shared-features 0.0.1

package/README.md

@@ -0,0 +1,200 @@
+# shared-features
+
+Centralized common features for Zaions projects. Manage ads, contacts, feature requests, and more from a single admin panel at [aoneahsan.com](https://aoneahsan.com).
+
+## Features
+
+- **Advertising Campaigns** - Cross-promote Zaions products across all projects
+- **Products Catalog** - Centralized product information
+- **Contact Forms** - (Coming soon)
+- **Feature Requests** - (Coming soon)
+- **Payment Options** - (Coming soon)
+- **Social Links** - (Coming soon)
+- **Developer Info** - (Coming soon)
+
+## Installation
+
+```bash
+yarn add shared-features
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+yarn add react react-dom firebase @radix-ui/themes zustand
+# Optional for mobile:
+yarn add @capacitor/preferences
+```
+
+## Setup
+
+### 1. Initialize the package
+
+```typescript
+// src/config/shared-features.ts
+import { initSharedFeatures } from 'shared-features';
+
+export const sharedFeatures = initSharedFeatures({
+  firebaseConfig: {
+    apiKey: import.meta.env.VITE_ZAIONS_FIREBASE_API_KEY,
+    authDomain: 'aoneahsan-portfolio.firebaseapp.com',
+    projectId: 'aoneahsan-portfolio',
+  },
+  projectId: 'your-project-id',
+  projectName: 'Your Project Name',
+  platform: 'web', // or 'android', 'ios', 'extension'
+  debug: import.meta.env.DEV,
+});
+```
+
+### 2. Add environment variables
+
+Create or update your `.env` file:
+
+```env
+# shared-features configuration
+VITE_ZAIONS_FIREBASE_API_KEY=your-api-key
+```
+
+### 3. Initialize on app startup
+
+```typescript
+// src/main.tsx or src/App.tsx
+import { initSharedFeatures } from 'shared-features';
+import './config/shared-features'; // Import to initialize
+```
+
+## Usage
+
+### Displaying Ads
+
+```tsx
+import { AdPanel, useCampaigns } from 'shared-features';
+
+// Simple panel in sidebar
+function Sidebar() {
+  return <AdPanel placement="sidebar_panel" />;
+}
+
+// Custom implementation with hook
+function Footer() {
+  const { campaigns, loading, recordImpression, recordClick } = useCampaigns({
+    placement: 'footer_slider',
+    maxCampaigns: 5,
+  });
+
+  if (loading || campaigns.length === 0) return null;
+
+  return (
+    <div>
+      {campaigns.map(campaign => (
+        <div
+          key={campaign.id}
+          onMouseEnter={() => recordImpression(campaign)}
+          onClick={() => {
+            recordClick(campaign);
+            window.open(campaign.product.url, '_blank');
+          }}
+        >
+          <h3>{campaign.product.name}</h3>
+          <p>{campaign.product.tagline}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Available Placements
+
+| Placement | Description | Recommended Variant |
+|-----------|-------------|-------------------|
+| `popup_slider` | Extension popup | Small variants |
+| `options_panel` | Extension options page | Small variants |
+| `onetime_modal` | First-visit welcome modal | Large variants |
+| `update_modal` | Version update modal | Large variants |
+| `notification` | Push notification | - |
+| `footer_slider` | Web app footer | Small variants |
+| `sidebar_panel` | Web app sidebar | Small variants |
+| `home_banner` | Home page hero | Large variants |
+
+### Available Variants
+
+**Small Variants (compact spaces):**
+- `small_panel_1` - Minimal
+- `small_panel_2` - Tagline
+- `small_panel_3` - Features
+- `small_panel_4` - Gradient
+- `small_panel_5` - Card
+
+**Large Variants (feature areas):**
+- `large_slider_1` - Hero
+- `large_slider_2` - Feature Grid
+- `large_slider_3` - Testimonial
+- `large_slider_4` - Comparison
+- `large_slider_5` - Video Placeholder
+
+## API Reference
+
+### `initSharedFeatures(config)`
+
+Initialize the package with your configuration.
+
+```typescript
+interface SharedFeaturesConfig {
+  firebaseConfig: FirebaseConfig;
+  projectId: string;
+  projectName: string;
+  platform: 'web' | 'android' | 'ios' | 'extension';
+  debug?: boolean;
+}
+```
+
+### `useCampaigns(options)`
+
+Hook to fetch and manage campaigns.
+
+```typescript
+interface UseCampaignsOptions {
+  placement: AdPlacement;
+  maxCampaigns?: number;
+  autoFetch?: boolean;
+}
+
+interface UseCampaignsResult {
+  campaigns: CampaignWithProduct[];
+  campaign: CampaignWithProduct | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+  recordImpression: (campaign: CampaignWithProduct) => Promise<void>;
+  recordClick: (campaign: CampaignWithProduct) => Promise<void>;
+  recordClose: (campaign: CampaignWithProduct) => Promise<void>;
+}
+```
+
+### `AdPanel`
+
+Component to display a single ad.
+
+```tsx
+<AdPanel
+  placement="sidebar_panel"
+  variant="small_panel_2"
+  className="my-ad"
+/>
+```
+
+## Frequency Capping
+
+Ads automatically respect frequency capping set in the admin panel. By default, each campaign is shown to a user once every 20 days. This is tracked locally using Capacitor Preferences (mobile) or localStorage (web).
+
+## Admin Panel
+
+All campaigns are managed through the admin panel at [aoneahsan.com/admin/campaigns](https://aoneahsan.com/admin/campaigns). Consumer projects only need read access.
+
+## License
+
+MIT - Ahsan Mahmood <aoneahsan@gmail.com>

package/dist/AdPanel-D0BiV6Xb.cjs

@@ -0,0 +1,88 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const themes = require("@radix-ui/themes");
+const reactIcons = require("@radix-ui/react-icons");
+const useCampaigns = require("./useCampaigns-BNOHpETm.cjs");
+function AdPanel({
+  placement,
+  variant: _variant = "small_panel_2",
+  className
+}) {
+  const { campaign, loading, error, recordImpression, recordClick, recordClose } = useCampaigns.useCampaign({ placement });
+  const hasRecordedImpression = react.useRef(false);
+  react.useEffect(() => {
+    if (campaign && !hasRecordedImpression.current) {
+      hasRecordedImpression.current = true;
+      recordImpression(campaign);
+    }
+  }, [campaign, recordImpression]);
+  if (loading || error || !campaign) {
+    return null;
+  }
+  const handleClick = () => {
+    recordClick(campaign);
+    const url = campaign.customCtaUrl || campaign.product.url;
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const handleClose = () => {
+    recordClose(campaign);
+  };
+  const title = campaign.customTitle || campaign.product.name;
+  const tagline = campaign.customTagline || campaign.product.tagline;
+  const ctaText = campaign.customCta || "Learn More";
+  const color = campaign.customProductColor || campaign.product.color;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Box,
+    {
+      className,
+      style: {
+        border: `1px solid ${color}`,
+        borderRadius: "8px",
+        padding: "12px",
+        backgroundColor: `${color}10`,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          themes.IconButton,
+          {
+            size: "1",
+            variant: "ghost",
+            onClick: handleClose,
+            style: {
+              position: "absolute",
+              top: "4px",
+              right: "4px"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", children: [
+            campaign.product.icon64 && /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Box,
+              {
+                dangerouslySetInnerHTML: { __html: campaign.product.icon64 },
+                style: { width: 32, height: 32 }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { weight: "bold", size: "3", style: { color }, children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", color: "gray", children: tagline }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            themes.Button,
+            {
+              size: "2",
+              onClick: handleClick,
+              style: { backgroundColor: color },
+              children: ctaText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+exports.AdPanel = AdPanel;
+//# sourceMappingURL=AdPanel-D0BiV6Xb.cjs.map

package/dist/AdPanel-D0BiV6Xb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdPanel-D0BiV6Xb.cjs","sources":["../src/components/ads/AdPanel.tsx"],"sourcesContent":["/**\n * AdPanel Component\n *\n * A simple ad panel component that displays a single campaign.\n * Can be placed in sidebars, footers, or other static locations.\n *\n * @author Ahsan Mahmood <aoneahsan@gmail.com>\n */\n\nimport { useEffect, useRef } from 'react';\nimport { Box, Flex, Text, Button, IconButton } from '@radix-ui/themes';\nimport { Cross2Icon } from '@radix-ui/react-icons';\nimport { useCampaign } from '../../hooks/useCampaigns';\nimport type { AdPanelProps } from '../../types/campaigns';\n\n/**\n * AdPanel displays a single campaign in a compact panel format.\n *\n * @example\n * ```tsx\n * <AdPanel placement=\"sidebar_panel\" variant=\"small_panel_2\" />\n * ```\n */\nexport function AdPanel({\n  placement,\n  variant: _variant = 'small_panel_2',\n  className,\n}: AdPanelProps) {\n  // TODO: variant will be used for different display styles in future variants\n  const { campaign, loading, error, recordImpression, recordClick, recordClose } =\n    useCampaign({ placement });\n\n  const hasRecordedImpression = useRef(false);\n\n  // Record impression when campaign is first displayed\n  useEffect(() => {\n    if (campaign && !hasRecordedImpression.current) {\n      hasRecordedImpression.current = true;\n      recordImpression(campaign);\n    }\n  }, [campaign, recordImpression]);\n\n  if (loading || error || !campaign) {\n    return null;\n  }\n\n  const handleClick = () => {\n    recordClick(campaign);\n    const url = campaign.customCtaUrl || campaign.product.url;\n    window.open(url, '_blank', 'noopener,noreferrer');\n  };\n\n  const handleClose = () => {\n    recordClose(campaign);\n    // Hide the panel (could use state or CSS)\n  };\n\n  const title = campaign.customTitle || campaign.product.name;\n  const tagline = campaign.customTagline || campaign.product.tagline;\n  const ctaText = campaign.customCta || 'Learn More';\n  const color = campaign.customProductColor || campaign.product.color;\n\n  return (\n    <Box\n      className={className}\n      style={{\n        border: `1px solid ${color}`,\n        borderRadius: '8px',\n        padding: '12px',\n        backgroundColor: `${color}10`,\n        position: 'relative',\n      }}\n    >\n      <IconButton\n        size=\"1\"\n        variant=\"ghost\"\n        onClick={handleClose}\n        style={{\n          position: 'absolute',\n          top: '4px',\n          right: '4px',\n        }}\n      >\n        <Cross2Icon />\n      </IconButton>\n\n      <Flex direction=\"column\" gap=\"2\">\n        <Flex align=\"center\" gap=\"2\">\n          {campaign.product.icon64 && (\n            <Box\n              dangerouslySetInnerHTML={{ __html: campaign.product.icon64 }}\n              style={{ width: 32, height: 32 }}\n            />\n          )}\n          <Text weight=\"bold\" size=\"3\" style={{ color }}>\n            {title}\n          </Text>\n        </Flex>\n\n        <Text size=\"2\" color=\"gray\">\n          {tagline}\n        </Text>\n\n        <Button\n          size=\"2\"\n          onClick={handleClick}\n          style={{ backgroundColor: color }}\n        >\n          {ctaText}\n        </Button>\n      </Flex>\n    </Box>\n  );\n}\n\nexport default AdPanel;\n"],"names":["useCampaign","useRef","useEffect","jsxs","Box","jsx","IconButton","Cross2Icon","Flex","Text","Button"],"mappings":";;;;;;AAuBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS,WAAW;AAAA,EACpB;AACF,GAAiB;AAEf,QAAM,EAAE,UAAU,SAAS,OAAO,kBAAkB,aAAa,gBAC/DA,aAAAA,YAAY,EAAE,WAAW;AAE3B,QAAM,wBAAwBC,MAAAA,OAAO,KAAK;AAG1CC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY,CAAC,sBAAsB,SAAS;AAC9C,4BAAsB,UAAU;AAChC,uBAAiB,QAAQ;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,MAAI,WAAW,SAAS,CAAC,UAAU;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAY,QAAQ;AACpB,UAAM,MAAM,SAAS,gBAAgB,SAAS,QAAQ;AACtD,WAAO,KAAK,KAAK,UAAU,qBAAqB;AAAA,EAClD;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAY,QAAQ;AAAA,EAEtB;AAEA,QAAM,QAAQ,SAAS,eAAe,SAAS,QAAQ;AACvD,QAAM,UAAU,SAAS,iBAAiB,SAAS,QAAQ;AAC3D,QAAM,UAAU,SAAS,aAAa;AACtC,QAAM,QAAQ,SAAS,sBAAsB,SAAS,QAAQ;AAE9D,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,QAAQ,aAAa,KAAK;AAAA,QAC1B,cAAc;AAAA,QACd,SAAS;AAAA,QACT,iBAAiB,GAAG,KAAK;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,OAAAA;AAAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS;AAAA,YACT,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO;AAAA,YAAA;AAAA,YAGT,yCAACC,WAAAA,YAAA,CAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAGdJ,2BAAAA,KAACK,OAAAA,MAAA,EAAK,WAAU,UAAS,KAAI,KAC3B,UAAA;AAAA,UAAAL,2BAAAA,KAACK,OAAAA,MAAA,EAAK,OAAM,UAAS,KAAI,KACtB,UAAA;AAAA,YAAA,SAAS,QAAQ,UAChBH,2BAAAA;AAAAA,cAACD,OAAAA;AAAAA,cAAA;AAAA,gBACC,yBAAyB,EAAE,QAAQ,SAAS,QAAQ,OAAA;AAAA,gBACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,cAAG;AAAA,YAAA;AAAA,YAGnCC,2BAAAA,IAACI,OAAAA,MAAA,EAAK,QAAO,QAAO,MAAK,KAAI,OAAO,EAAE,SACnC,UAAA,MAAA,CACH;AAAA,UAAA,GACF;AAAA,yCAECA,OAAAA,MAAA,EAAK,MAAK,KAAI,OAAM,QAClB,UAAA,SACH;AAAA,UAEAJ,2BAAAA;AAAAA,YAACK,OAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,OAAO,EAAE,iBAAiB,MAAA;AAAA,cAEzB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/AdPanel-RGRBf4ub.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { Box, IconButton, Flex, Text, Button } from "@radix-ui/themes";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { a as useCampaign } from "./useCampaigns-3NxODLLs.js";
+function AdPanel({
+  placement,
+  variant: _variant = "small_panel_2",
+  className
+}) {
+  const { campaign, loading, error, recordImpression, recordClick, recordClose } = useCampaign({ placement });
+  const hasRecordedImpression = useRef(false);
+  useEffect(() => {
+    if (campaign && !hasRecordedImpression.current) {
+      hasRecordedImpression.current = true;
+      recordImpression(campaign);
+    }
+  }, [campaign, recordImpression]);
+  if (loading || error || !campaign) {
+    return null;
+  }
+  const handleClick = () => {
+    recordClick(campaign);
+    const url = campaign.customCtaUrl || campaign.product.url;
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const handleClose = () => {
+    recordClose(campaign);
+  };
+  const title = campaign.customTitle || campaign.product.name;
+  const tagline = campaign.customTagline || campaign.product.tagline;
+  const ctaText = campaign.customCta || "Learn More";
+  const color = campaign.customProductColor || campaign.product.color;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      style: {
+        border: `1px solid ${color}`,
+        borderRadius: "8px",
+        padding: "12px",
+        backgroundColor: `${color}10`,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "1",
+            variant: "ghost",
+            onClick: handleClose,
+            style: {
+              position: "absolute",
+              top: "4px",
+              right: "4px"
+            },
+            children: /* @__PURE__ */ jsx(Cross2Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+            campaign.product.icon64 && /* @__PURE__ */ jsx(
+              Box,
+              {
+                dangerouslySetInnerHTML: { __html: campaign.product.icon64 },
+                style: { width: 32, height: 32 }
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { weight: "bold", size: "3", style: { color }, children: title })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: tagline }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "2",
+              onClick: handleClick,
+              style: { backgroundColor: color },
+              children: ctaText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AdPanel as A
+};
+//# sourceMappingURL=AdPanel-RGRBf4ub.js.map

package/dist/AdPanel-RGRBf4ub.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdPanel-RGRBf4ub.js","sources":["../src/components/ads/AdPanel.tsx"],"sourcesContent":["/**\n * AdPanel Component\n *\n * A simple ad panel component that displays a single campaign.\n * Can be placed in sidebars, footers, or other static locations.\n *\n * @author Ahsan Mahmood <aoneahsan@gmail.com>\n */\n\nimport { useEffect, useRef } from 'react';\nimport { Box, Flex, Text, Button, IconButton } from '@radix-ui/themes';\nimport { Cross2Icon } from '@radix-ui/react-icons';\nimport { useCampaign } from '../../hooks/useCampaigns';\nimport type { AdPanelProps } from '../../types/campaigns';\n\n/**\n * AdPanel displays a single campaign in a compact panel format.\n *\n * @example\n * ```tsx\n * <AdPanel placement=\"sidebar_panel\" variant=\"small_panel_2\" />\n * ```\n */\nexport function AdPanel({\n  placement,\n  variant: _variant = 'small_panel_2',\n  className,\n}: AdPanelProps) {\n  // TODO: variant will be used for different display styles in future variants\n  const { campaign, loading, error, recordImpression, recordClick, recordClose } =\n    useCampaign({ placement });\n\n  const hasRecordedImpression = useRef(false);\n\n  // Record impression when campaign is first displayed\n  useEffect(() => {\n    if (campaign && !hasRecordedImpression.current) {\n      hasRecordedImpression.current = true;\n      recordImpression(campaign);\n    }\n  }, [campaign, recordImpression]);\n\n  if (loading || error || !campaign) {\n    return null;\n  }\n\n  const handleClick = () => {\n    recordClick(campaign);\n    const url = campaign.customCtaUrl || campaign.product.url;\n    window.open(url, '_blank', 'noopener,noreferrer');\n  };\n\n  const handleClose = () => {\n    recordClose(campaign);\n    // Hide the panel (could use state or CSS)\n  };\n\n  const title = campaign.customTitle || campaign.product.name;\n  const tagline = campaign.customTagline || campaign.product.tagline;\n  const ctaText = campaign.customCta || 'Learn More';\n  const color = campaign.customProductColor || campaign.product.color;\n\n  return (\n    <Box\n      className={className}\n      style={{\n        border: `1px solid ${color}`,\n        borderRadius: '8px',\n        padding: '12px',\n        backgroundColor: `${color}10`,\n        position: 'relative',\n      }}\n    >\n      <IconButton\n        size=\"1\"\n        variant=\"ghost\"\n        onClick={handleClose}\n        style={{\n          position: 'absolute',\n          top: '4px',\n          right: '4px',\n        }}\n      >\n        <Cross2Icon />\n      </IconButton>\n\n      <Flex direction=\"column\" gap=\"2\">\n        <Flex align=\"center\" gap=\"2\">\n          {campaign.product.icon64 && (\n            <Box\n              dangerouslySetInnerHTML={{ __html: campaign.product.icon64 }}\n              style={{ width: 32, height: 32 }}\n            />\n          )}\n          <Text weight=\"bold\" size=\"3\" style={{ color }}>\n            {title}\n          </Text>\n        </Flex>\n\n        <Text size=\"2\" color=\"gray\">\n          {tagline}\n        </Text>\n\n        <Button\n          size=\"2\"\n          onClick={handleClick}\n          style={{ backgroundColor: color }}\n        >\n          {ctaText}\n        </Button>\n      </Flex>\n    </Box>\n  );\n}\n\nexport default AdPanel;\n"],"names":[],"mappings":";;;;;AAuBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS,WAAW;AAAA,EACpB;AACF,GAAiB;AAEf,QAAM,EAAE,UAAU,SAAS,OAAO,kBAAkB,aAAa,gBAC/D,YAAY,EAAE,WAAW;AAE3B,QAAM,wBAAwB,OAAO,KAAK;AAG1C,YAAU,MAAM;AACd,QAAI,YAAY,CAAC,sBAAsB,SAAS;AAC9C,4BAAsB,UAAU;AAChC,uBAAiB,QAAQ;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,MAAI,WAAW,SAAS,CAAC,UAAU;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAY,QAAQ;AACpB,UAAM,MAAM,SAAS,gBAAgB,SAAS,QAAQ;AACtD,WAAO,KAAK,KAAK,UAAU,qBAAqB;AAAA,EAClD;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAY,QAAQ;AAAA,EAEtB;AAEA,QAAM,QAAQ,SAAS,eAAe,SAAS,QAAQ;AACvD,QAAM,UAAU,SAAS,iBAAiB,SAAS,QAAQ;AAC3D,QAAM,UAAU,SAAS,aAAa;AACtC,QAAM,QAAQ,SAAS,sBAAsB,SAAS,QAAQ;AAE9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,QAAQ,aAAa,KAAK;AAAA,QAC1B,cAAc;AAAA,QACd,SAAS;AAAA,QACT,iBAAiB,GAAG,KAAK;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS;AAAA,YACT,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO;AAAA,YAAA;AAAA,YAGT,8BAAC,YAAA,CAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,qBAAC,MAAA,EAAK,WAAU,UAAS,KAAI,KAC3B,UAAA;AAAA,UAAA,qBAAC,MAAA,EAAK,OAAM,UAAS,KAAI,KACtB,UAAA;AAAA,YAAA,SAAS,QAAQ,UAChB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,yBAAyB,EAAE,QAAQ,SAAS,QAAQ,OAAA;AAAA,gBACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,cAAG;AAAA,YAAA;AAAA,YAGnC,oBAAC,MAAA,EAAK,QAAO,QAAO,MAAK,KAAI,OAAO,EAAE,SACnC,UAAA,MAAA,CACH;AAAA,UAAA,GACF;AAAA,8BAEC,MAAA,EAAK,MAAK,KAAI,OAAM,QAClB,UAAA,SACH;AAAA,UAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,OAAO,EAAE,iBAAiB,MAAA;AAAA,cAEzB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}