@burdenoff/microfe-store 2026.510.113

package/dist/components/InstallAppModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstallAppModal.js","names":[],"sources":["../../src/components/InstallAppModal.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { X, Loader2, Building2, User, CheckCircle, AlertCircle, Info } from 'lucide-react';\nimport { graphqlFetch } from '@burdenoff/fe-libs/shared/graphql';\nimport { useStore } from '../providers/StoreProvider';\n\n// Local type definitions for workspace operations\ninterface Workspace {\n  id: string;\n  name: string;\n  slug: string;\n  type?: string;\n  status?: string;\n  organizationId?: string;\n}\n\ninterface WorkspaceList {\n  items: Workspace[];\n  total: number;\n}\n\ninterface InstallWorkspaceAppsResult {\n  successCount: number;\n  failedCount: number;\n  results: Array<{\n    success: boolean;\n    workspaceId: string;\n    app?: unknown;\n    error?: string;\n  }>;\n}\n\n// String queries for graphqlFetch\nconst MY_WORKSPACES_STRING = `query MyWorkspaces { myWorkspaces { items { id name slug type status organizationId } total } }`;\nconst INSTALL_WORKSPACE_APPS_STRING = `mutation InstallWorkspaceApps($workspaceIds: [ID!]!, $input: InstallWorkspaceAppInput!) { installWorkspaceApps(workspaceIds: $workspaceIds, input: $input) { successCount failedCount results { success workspaceId error } } }`;\nconst RECORD_APP_INSTALLATION_STRING = `mutation RecordAppInstallation($input: RecordAppInstallationInput!) { recordAppInstallation(input: $input) { id status workspaceId version } }`;\nconst INSTALL_PURCHASED_APP_STRING = `mutation InstallPurchasedApp($orderId: ID, $productId: String!, $workspaceId: String!) { installPurchasedApp(orderId: $orderId, productId: $productId, workspaceId: $workspaceId) { success alreadyInstalled installation { id productId workspaceId status version } error message } }`;\nconst CREATE_PRODUCT_ENTITLEMENT_STRING = `mutation CreateProductEntitlement($input: CreateProductEntitlementInput!) { createProductEntitlement(input: $input) { id status productId workspaceId } }`;\nconst STORE_DISTRIBUTED_TYPES = new Set([\n  'VIBEMODULE',\n  'NODE',\n  'CONSOLE',\n  'DASHBOARD',\n  'PARSER',\n  'DATASINK',\n]);\n\nexport interface AppInfo {\n  id: string;\n  name: string;\n  slug?: string;\n  icon?: string;\n  type?: string;\n  version?: string;\n}\n\ninterface InstallAppModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  app: AppInfo;\n  orderId?: string | null; // For purchased apps from orders page\n  purchaseState?: 'free' | 'purchased';\n  onInstallSuccess?: (workspaceId: string, workspaceName: string) => void;\n  onInstallError?: (error: Error) => void;\n}\n\ninterface UseWorkspacesResult {\n  workspaces: Workspace[];\n  loading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\n// NOTE: Inline Apollo clients removed. All GraphQL calls now use graphqlFetch\n// from fe-libs which automatically resolves gateway URLs and injects auth + locale headers.\n\n/**\n * Hook to fetch user's workspaces using graphqlFetch from fe-libs\n */\nfunction useWorkspaces(skip: boolean): UseWorkspacesResult {\n  const { authToken } = useStore();\n  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const fetchWorkspaces = useCallback(async () => {\n    if (skip) return;\n\n    setLoading(true);\n    setError(null);\n\n    try {\n      const result = await graphqlFetch<{ myWorkspaces: WorkspaceList }>({\n        gateway: 'global',\n        query: MY_WORKSPACES_STRING,\n        authToken: authToken || undefined,\n      });\n\n      if (result.errors?.length) {\n        throw new Error(result.errors[0]?.message ?? 'GraphQL error');\n      }\n\n      setWorkspaces(result.data?.myWorkspaces?.items || []);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Failed to fetch workspaces'));\n    } finally {\n      setLoading(false);\n    }\n  }, [authToken, skip]);\n\n  useEffect(() => {\n    fetchWorkspaces();\n  }, [fetchWorkspaces]);\n\n  return {\n    workspaces,\n    loading,\n    error,\n    refetch: fetchWorkspaces,\n  };\n}\n\n/**\n * InstallAppModal component\n *\n * Modal for selecting a workspace to install an app into\n */\nexport const InstallAppModal: FC<InstallAppModalProps> = ({\n  isOpen,\n  onClose,\n  app,\n  orderId,\n  purchaseState = 'free',\n  onInstallSuccess,\n  onInstallError,\n}) => {\n  const { authToken, user } = useStore();\n  const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null);\n  const [installing, setInstalling] = useState(false);\n  const [installError, setInstallError] = useState<string | null>(null);\n  const [installInfo, setInstallInfo] = useState<string | null>(null);\n\n  const { workspaces, loading, error } = useWorkspaces(!isOpen);\n\n  // Reset selection when modal opens\n  useEffect(() => {\n    if (isOpen) {\n      setSelectedWorkspace(null);\n      setInstallError(null);\n      setInstallInfo(null);\n    }\n  }, [isOpen]);\n\n  // Filter workspaces by status (only show active)\n  const filteredWorkspaces = workspaces.filter((ws) => ws.status === 'ACTIVE');\n\n  /**\n   * Install purchased app via Store Service (NEW FLOW)\n   * Used when installing from orders page or any already-purchased product\n   */\n  const handleInstallFromStore = async () => {\n    if (!selectedWorkspace) return;\n\n    const workspace = filteredWorkspaces.find((ws) => ws.id === selectedWorkspace);\n    if (!workspace) return;\n    const purchasedBy = user?.id;\n\n    setInstalling(true);\n    setInstallError(null);\n    setInstallInfo(null);\n\n    try {\n      if (!orderId && purchaseState !== 'purchased') {\n        if (!purchasedBy) {\n          throw new Error('Unable to identify the current user for license creation');\n        }\n\n        await graphqlFetch({\n          gateway: 'global',\n          query: CREATE_PRODUCT_ENTITLEMENT_STRING,\n          variables: {\n            input: {\n              productId: app.id,\n              purchasedBy,\n              workspaceId: workspace.id,\n              metadata: {\n                source: 'store-ui',\n                productType: app.type,\n              },\n            },\n          },\n          authToken: authToken || undefined,\n        });\n      }\n\n      // Call Store Service to install the purchased app\n      const result = await graphqlFetch<{\n        installPurchasedApp: {\n          success: boolean;\n          alreadyInstalled?: boolean;\n          installation?: {\n            id: string;\n            productId: string;\n            workspaceId: string;\n            status: string;\n            version: string;\n          };\n          error?: string;\n          message?: string;\n        };\n      }>({\n        gateway: 'global', // Store Service\n        query: INSTALL_PURCHASED_APP_STRING,\n        variables: {\n          orderId: orderId ?? null,\n          productId: app.id,\n          workspaceId: workspace.id,\n        },\n        authToken: authToken || undefined,\n      });\n\n      if (result.errors?.length) {\n        throw new Error(result.errors[0]?.message ?? 'Installation failed');\n      }\n\n      const installResult = result.data?.installPurchasedApp;\n\n      if (installResult?.success) {\n        if (installResult.alreadyInstalled) {\n          setInstallInfo(installResult.message || 'Already installed on this workspace');\n        } else {\n          onInstallSuccess?.(workspace.id, workspace.name);\n          onClose();\n        }\n      } else {\n        const errorMsg = installResult?.error || 'Installation failed';\n        setInstallError(errorMsg);\n        onInstallError?.(new Error(errorMsg));\n      }\n    } catch (err) {\n      const errorMsg = err instanceof Error ? err.message : 'Installation failed';\n      setInstallError(errorMsg);\n      onInstallError?.(new Error(errorMsg));\n    } finally {\n      setInstalling(false);\n    }\n  };\n\n  /**\n   * Install app via Workspace Service (LEGACY FLOW)\n   * Used for free apps or when installing without order\n   */\n  const handleInstallViaWorkspace = async () => {\n    if (!selectedWorkspace) return;\n\n    const workspace = filteredWorkspaces.find((ws) => ws.id === selectedWorkspace);\n    if (!workspace) return;\n\n    setInstalling(true);\n    setInstallError(null);\n    setInstallInfo(null);\n\n    try {\n      // Step 1: Install to workspace service via graphqlFetch\n      const installVars = {\n        workspaceIds: [workspace.id],\n        input: {\n          appName: app.slug || app.name.toLowerCase().replace(/\\s+/g, '-'),\n          displayName: app.name,\n          version: app.version || '1.0.0',\n          type: app.type || 'app',\n          manifest: {\n            productId: app.id,\n            icon: app.icon,\n          },\n        },\n      };\n\n      const result = await graphqlFetch<{\n        installWorkspaceApps: InstallWorkspaceAppsResult;\n      }>({\n        gateway: 'workspace',\n        query: INSTALL_WORKSPACE_APPS_STRING,\n        variables: installVars,\n        authToken: authToken || undefined,\n      });\n\n      if (result.errors?.length) {\n        throw new Error(result.errors[0]?.message ?? 'Installation failed');\n      }\n\n      const installResult = result.data?.installWorkspaceApps;\n      if (installResult?.successCount && installResult.successCount > 0) {\n        // Step 2: Record installation in store service (for tracking)\n        try {\n          await graphqlFetch({\n            gateway: 'global',\n            query: RECORD_APP_INSTALLATION_STRING,\n            variables: {\n              input: {\n                productId: app.id,\n                workspaceId: workspace.id,\n                workspaceName: workspace.name,\n                workspaceType: workspace.type,\n                organizationId: workspace.organizationId,\n                version: app.version || '1.0.0',\n                manifest: {\n                  productId: app.id,\n                  icon: app.icon,\n                  slug: app.slug,\n                  type: app.type,\n                },\n              },\n            },\n            authToken: authToken || undefined,\n          });\n        } catch (recordErr) {\n          // Log but don't fail - workspace installation succeeded\n          console.warn('Failed to record installation in store:', recordErr);\n        }\n\n        onInstallSuccess?.(workspace.id, workspace.name);\n        onClose();\n      } else {\n        const errorMsg = installResult?.results?.[0]?.error || 'Installation failed';\n        setInstallError(errorMsg);\n        onInstallError?.(new Error(errorMsg));\n      }\n    } catch (err) {\n      const errorMsg = err instanceof Error ? err.message : 'Installation failed';\n      setInstallError(errorMsg);\n      onInstallError?.(new Error(errorMsg));\n    } finally {\n      setInstalling(false);\n    }\n  };\n\n  /**\n   * Main install handler - routes to appropriate install function\n   */\n  const handleInstall = async () => {\n    const appType = app.type?.toUpperCase() ?? '';\n\n    if (purchaseState === 'purchased' || orderId || STORE_DISTRIBUTED_TYPES.has(appType)) {\n      // Purchased products install through the store service.\n      await handleInstallFromStore();\n    } else {\n      // Free products install through the workspace service.\n      await handleInstallViaWorkspace();\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-bg-overlay/50 backdrop-blur-sm\" onClick={onClose} />\n\n      {/* Modal */}\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"install-app-modal-title\"\n        className=\"relative z-10 mx-4 w-full max-w-lg rounded-2xl border border-border-default bg-bg-surface shadow-2xl\"\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between border-b border-border-default px-6 py-4\">\n          <div className=\"flex items-center gap-3\">\n            {app.icon ? (\n              <img src={app.icon} alt={app.name} className=\"h-10 w-10 rounded-lg object-cover\" />\n            ) : (\n              <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken text-lg font-bold text-text-muted\">\n                {app.name.charAt(0)}\n              </div>\n            )}\n            <div>\n              <h2 id=\"install-app-modal-title\" className=\"text-lg font-semibold text-text-primary\">\n                Install App\n              </h2>\n              <p className=\"text-sm text-text-muted\">{app.name}</p>\n            </div>\n          </div>\n          <button\n            onClick={onClose}\n            aria-label=\"Close install dialog\"\n            className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n          >\n            <X className=\"h-5 w-5\" />\n          </button>\n        </div>\n\n        {/* Content */}\n        <div className=\"px-6 py-4\">\n          <p className=\"mb-4 text-text-secondary\">\n            Select the workspace where you want to install this app:\n          </p>\n\n          {/* Workspace List */}\n          <div className=\"max-h-72 overflow-y-auto rounded-lg border border-border-default\">\n            {loading ? (\n              <div className=\"flex items-center justify-center py-12\">\n                <Loader2 className=\"h-8 w-8 animate-spin text-text-muted\" />\n              </div>\n            ) : error ? (\n              <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n                <AlertCircle className=\"mb-2 h-8 w-8 text-status-error-text\" />\n                <p className=\"text-sm text-status-error-text\">Failed to load workspaces</p>\n                <p className=\"text-xs text-text-muted mt-1\">{error.message}</p>\n              </div>\n            ) : filteredWorkspaces.length === 0 ? (\n              <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n                <Building2 className=\"mb-2 h-8 w-8 text-text-muted\" />\n                <p className=\"text-sm text-text-muted\">No workspaces available</p>\n              </div>\n            ) : (\n              <div className=\"divide-y divide-border-default\">\n                {filteredWorkspaces.map((workspace) => (\n                  <button\n                    key={workspace.id}\n                    onClick={() => setSelectedWorkspace(workspace.id)}\n                    className={`w-full cursor-pointer flex items-center gap-3 px-4 py-3 text-left transition-colors ${\n                      selectedWorkspace === workspace.id\n                        ? 'bg-action-primary-bg/10'\n                        : 'transition-colors hover:bg-bg-sunken'\n                    }`}\n                  >\n                    {/* Workspace Icon */}\n                    <div\n                      className={`flex h-10 w-10 items-center justify-center rounded-lg ${\n                        workspace.type === 'user'\n                          ? 'bg-status-info-bg-subtle text-status-info-text'\n                          : 'bg-action-primary-bg/10 text-text-link'\n                      }`}\n                    >\n                      {workspace.type === 'user' ? (\n                        <User className=\"h-5 w-5\" />\n                      ) : (\n                        <Building2 className=\"h-5 w-5\" />\n                      )}\n                    </div>\n\n                    {/* Workspace Info */}\n                    <div className=\"flex-1 min-w-0\">\n                      <p className=\"font-medium text-text-primary truncate\">{workspace.name}</p>\n                      <p className=\"text-xs text-text-muted\">\n                        {workspace.type === 'user' ? 'Personal' : 'Team'} workspace\n                      </p>\n                    </div>\n\n                    {/* Selection Indicator */}\n                    {selectedWorkspace === workspace.id && (\n                      <CheckCircle className=\"h-5 w-5 flex-shrink-0 text-action-primary-bg\" />\n                    )}\n                  </button>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Footer */}\n        <div className=\"border-t border-border-default px-6 py-4\">\n          {/* Already-installed info */}\n          {installInfo && (\n            <div className=\"mb-3 flex items-center gap-2 rounded-lg bg-status-info-bg-subtle px-3 py-2 text-sm text-status-info-text\">\n              <Info className=\"h-4 w-4 flex-shrink-0\" />\n              <span>{installInfo}</span>\n            </div>\n          )}\n          {/* Error message */}\n          {installError && (\n            <div className=\"mb-3 flex items-center gap-2 rounded-lg bg-status-error-bg-subtle/10 px-3 py-2 text-sm text-status-error-text\">\n              <AlertCircle className=\"h-4 w-4 flex-shrink-0\" />\n              <span>{installError}</span>\n            </div>\n          )}\n          <div className=\"flex items-center justify-end gap-3\">\n            <button\n              onClick={onClose}\n              disabled={installing}\n              className=\"cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:opacity-50\"\n            >\n              Cancel\n            </button>\n            <button\n              onClick={handleInstall}\n              disabled={!selectedWorkspace || installing}\n              className=\"cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2\"\n            >\n              {installing ? (\n                <>\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  Installing...\n                </>\n              ) : (\n                'Install App'\n              )}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/RouteGuards.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+/**
+ * Loading fallback for lazy-loaded route pages
+ */
+export declare const PageLoadingFallback: FC;
+/**
+ * Access denied page shown when user lacks permission for a route
+ */
+export declare const AccessDenied: FC;
+/**
+ * Route-level permission guard that shows AccessDenied when permission check fails
+ */
+export declare const PermissionGuard: FC<{
+    allowed: boolean;
+    children: ReactNode;
+}>;

package/dist/components/RouteGuards.js

@@ -0,0 +1,26 @@
+import { useI18n as e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/RouteGuards.tsx
+var i = () => /* @__PURE__ */ n("div", {
+	className: "flex h-full items-center justify-center",
+	children: /* @__PURE__ */ n("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-border-default border-t-accent-primary" })
+}), a = () => {
+	let { t } = e();
+	return /* @__PURE__ */ n("div", {
+		className: "flex items-center justify-center min-h-[400px] animate-in fade-in duration-300",
+		children: /* @__PURE__ */ r("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ n("h1", {
+				className: "text-2xl font-semibold text-foreground mb-2",
+				children: t("common.accessDenied", { defaultValue: "Access Denied" })
+			}), /* @__PURE__ */ n("p", {
+				className: "text-muted-foreground",
+				children: t("common.accessDeniedDescription", { defaultValue: "You do not have permission to access this section." })
+			})]
+		})
+	});
+}, o = ({ allowed: e, children: r }) => e ? /* @__PURE__ */ n(t, { children: r }) : /* @__PURE__ */ n(a, {});
+//#endregion
+export { a as AccessDenied, i as PageLoadingFallback, o as PermissionGuard };
+
+//# sourceMappingURL=RouteGuards.js.map

package/dist/components/RouteGuards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteGuards.js","names":[],"sources":["../../src/components/RouteGuards.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n/**\n * Loading fallback for lazy-loaded route pages\n */\nexport const PageLoadingFallback: FC = () => (\n  <div className=\"flex h-full items-center justify-center\">\n    <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-border-default border-t-accent-primary\" />\n  </div>\n);\n\n/**\n * Access denied page shown when user lacks permission for a route\n */\nexport const AccessDenied: FC = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"flex items-center justify-center min-h-[400px] animate-in fade-in duration-300\">\n      <div className=\"text-center\">\n        <h1 className=\"text-2xl font-semibold text-foreground mb-2\">\n          {t('common.accessDenied', { defaultValue: 'Access Denied' })}\n        </h1>\n        <p className=\"text-muted-foreground\">\n          {t('common.accessDeniedDescription', {\n            defaultValue: 'You do not have permission to access this section.',\n          })}\n        </p>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Route-level permission guard that shows AccessDenied when permission check fails\n */\nexport const PermissionGuard: FC<{ allowed: boolean; children: ReactNode }> = ({\n  allowed,\n  children,\n}) => {\n  if (!allowed) {\n    return <AccessDenied />;\n  }\n  return <>{children}</>;\n};\n"],"mappings":";;;AAMA,IAAa,UACX,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,OAAD,EAAK,WAAU,4FAA6F,CAAA;CACxG,CAAA,EAMK,UAAyB;CACpC,IAAM,EAAE,MAAM,GAAS;AACvB,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cACX,EAAE,uBAAuB,EAAE,cAAc,iBAAiB,CAAC;IACzD,CAAA,EACL,kBAAC,KAAD;IAAG,WAAU;cACV,EAAE,kCAAkC,EACnC,cAAc,sDACf,CAAC;IACA,CAAA,CACA;;EACF,CAAA;GAOG,KAAkE,EAC7E,YACA,kBAEK,IAGE,kBAAA,GAAA,EAAG,aAAY,CAAA,GAFb,kBAAC,GAAD,EAAgB,CAAA"}

package/dist/components/cart/CartDrawer.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+
+/**
+ * Props for CartDrawer
+ */
+interface CartDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onCheckout: () => void;
+    cartItems: Array<{
+        id: string;
+        quantity: number;
+        subtotal: number;
+        productName?: string;
+        productIcon?: string;
+        variantName?: string;
+        product?: {
+            icon?: string;
+            name?: string;
+        };
+    }>;
+    itemCount: number;
+    subtotal: number;
+    tax: number;
+    total: number;
+    updateQuantity: (cartItemId: string, quantity: number) => Promise<void>;
+    removeProduct: (cartItemId: string) => Promise<void>;
+}
+/**
+ * CartDrawer component
+ *
+ * Sliding drawer for cart management
+ */
+export declare const CartDrawer: FC<CartDrawerProps>;
+export {};

package/dist/components/cart/CartDrawer.js

@@ -0,0 +1,162 @@
+import { formatPrice as e } from "../../utils/index.js";
+import { Minus as t, Plus as n, ShoppingCart as r, Trash2 as i, X as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/cart/CartDrawer.tsx
+var l = ({ isOpen: l, onClose: u, onCheckout: d, cartItems: f, itemCount: p, subtotal: m, tax: h, total: g, updateQuantity: _, removeProduct: v }) => l ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+	className: "fixed inset-0 z-40 bg-bg-overlay/50 transition-opacity",
+	onClick: u
+}), /* @__PURE__ */ s("div", {
+	className: "fixed right-0 top-0 z-50 h-full w-full max-w-md bg-bg-surface shadow-xl",
+	children: /* @__PURE__ */ c("div", {
+		className: "flex h-full flex-col",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex items-center justify-between border-b border-border-default px-6 py-4",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ s(r, { className: "h-5 w-5 text-text-primary" }),
+						/* @__PURE__ */ s("h2", {
+							className: "text-lg font-semibold text-text-primary",
+							children: "Shopping Cart"
+						}),
+						p > 0 && /* @__PURE__ */ s("span", {
+							className: "rounded-full bg-bg-accent px-2 py-0.5 text-xs font-medium text-text-link",
+							children: p
+						})
+					]
+				}), /* @__PURE__ */ s("button", {
+					onClick: u,
+					"aria-label": "Close cart",
+					className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
+					children: /* @__PURE__ */ s(a, { className: "h-5 w-5" })
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "flex-1 overflow-y-auto px-6 py-4",
+				children: f.length === 0 ? /* @__PURE__ */ c("div", {
+					className: "flex h-full flex-col items-center justify-center text-center",
+					children: [
+						/* @__PURE__ */ s(r, { className: "mb-4 h-16 w-16 text-text-muted" }),
+						/* @__PURE__ */ s("h3", {
+							className: "mb-2 text-lg font-semibold text-text-primary",
+							children: "Your cart is empty"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "text-sm text-text-muted",
+							children: "Start shopping to add items to your cart"
+						})
+					]
+				}) : /* @__PURE__ */ s("div", {
+					className: "space-y-4",
+					children: f.map((a) => /* @__PURE__ */ c("div", {
+						className: "flex gap-4 rounded-lg border border-border-default p-4",
+						children: [/* @__PURE__ */ s("div", {
+							className: "h-20 w-20 flex-shrink-0 overflow-hidden rounded bg-bg-sunken",
+							children: a.productIcon || a.product?.icon ? /* @__PURE__ */ s("img", {
+								src: a.productIcon || a.product?.icon,
+								alt: a.productName || a.product?.name,
+								className: "h-full w-full object-cover"
+							}) : /* @__PURE__ */ s("div", {
+								className: "flex h-full w-full items-center justify-center",
+								children: /* @__PURE__ */ s(r, { className: "h-8 w-8 text-text-muted" })
+							})
+						}), /* @__PURE__ */ c("div", {
+							className: "flex flex-1 flex-col",
+							children: [
+								/* @__PURE__ */ s("h4", {
+									className: "mb-1 font-semibold text-text-primary",
+									children: a.productName || a.product?.name || "Product"
+								}),
+								a.variantName && /* @__PURE__ */ s("p", {
+									className: "mb-2 text-xs text-text-muted",
+									children: a.variantName
+								}),
+								/* @__PURE__ */ c("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ c("div", {
+										className: "flex items-center rounded border border-border-default",
+										children: [
+											/* @__PURE__ */ s("button", {
+												onClick: () => _(a.id, a.quantity - 1),
+												className: "cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50",
+												disabled: a.quantity <= 1,
+												children: /* @__PURE__ */ s(t, { className: "h-4 w-4" })
+											}),
+											/* @__PURE__ */ s("span", {
+												className: "min-w-[2rem] text-center text-sm font-medium",
+												children: a.quantity
+											}),
+											/* @__PURE__ */ s("button", {
+												onClick: () => _(a.id, a.quantity + 1),
+												className: "cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken",
+												children: /* @__PURE__ */ s(n, { className: "h-4 w-4" })
+											})
+										]
+									}), /* @__PURE__ */ s("button", {
+										onClick: () => v(a.id),
+										className: "cursor-pointer ml-auto text-status-error-text transition-colors hover:text-status-error-text-emphasis",
+										children: /* @__PURE__ */ s(i, { className: "h-4 w-4" })
+									})]
+								}),
+								/* @__PURE__ */ s("div", {
+									className: "mt-2 text-right",
+									children: /* @__PURE__ */ s("span", {
+										className: "font-semibold text-text-primary",
+										children: e(a.subtotal)
+									})
+								})
+							]
+						})]
+					}, a.id))
+				})
+			}),
+			f.length > 0 && /* @__PURE__ */ c("div", {
+				className: "border-t border-border-default bg-bg-sunken px-6 py-4",
+				children: [/* @__PURE__ */ c("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ c("div", {
+							className: "flex justify-between text-sm",
+							children: [/* @__PURE__ */ s("span", {
+								className: "text-text-muted",
+								children: "Subtotal"
+							}), /* @__PURE__ */ s("span", {
+								className: "font-medium text-text-primary",
+								children: e(m)
+							})]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "flex justify-between text-sm",
+							children: [/* @__PURE__ */ s("span", {
+								className: "text-text-muted",
+								children: "Tax"
+							}), /* @__PURE__ */ s("span", {
+								className: "font-medium text-text-primary",
+								children: e(h)
+							})]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "flex justify-between border-t border-border-default pt-2",
+							children: [/* @__PURE__ */ s("span", {
+								className: "font-semibold text-text-primary",
+								children: "Total"
+							}), /* @__PURE__ */ s("span", {
+								className: "text-lg font-bold text-text-primary",
+								children: e(g)
+							})]
+						})
+					]
+				}), /* @__PURE__ */ s("button", {
+					onClick: d,
+					className: "cursor-pointer mt-4 w-full rounded-lg bg-action-primary-bg py-3 font-bold text-action-primary-text shadow-lg transition-all hover:opacity-90 hover:shadow-xl active:scale-[0.98]",
+					children: "Proceed to Checkout"
+				})]
+			})
+		]
+	})
+})] }) : null;
+//#endregion
+export { l as CartDrawer };
+
+//# sourceMappingURL=CartDrawer.js.map

package/dist/components/cart/CartDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartDrawer.js","names":[],"sources":["../../../src/components/cart/CartDrawer.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { X, ShoppingCart, Trash2, Plus, Minus } from 'lucide-react';\nimport { formatPrice } from '../../utils';\n\n/**\n * Props for CartDrawer\n */\ninterface CartDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onCheckout: () => void;\n  cartItems: Array<{\n    id: string;\n    quantity: number;\n    subtotal: number;\n    productName?: string;\n    productIcon?: string;\n    variantName?: string;\n    product?: { icon?: string; name?: string };\n  }>;\n  itemCount: number;\n  subtotal: number;\n  tax: number;\n  total: number;\n  updateQuantity: (cartItemId: string, quantity: number) => Promise<void>;\n  removeProduct: (cartItemId: string) => Promise<void>;\n}\n\n/**\n * CartDrawer component\n *\n * Sliding drawer for cart management\n */\nexport const CartDrawer: FC<CartDrawerProps> = ({\n  isOpen,\n  onClose,\n  onCheckout,\n  cartItems,\n  itemCount,\n  subtotal,\n  tax,\n  total,\n  updateQuantity,\n  removeProduct,\n}) => {\n  if (!isOpen) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div className=\"fixed inset-0 z-40 bg-bg-overlay/50 transition-opacity\" onClick={onClose} />\n\n      {/* Drawer */}\n      <div className=\"fixed right-0 top-0 z-50 h-full w-full max-w-md bg-bg-surface shadow-xl\">\n        <div className=\"flex h-full flex-col\">\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-border-default px-6 py-4\">\n            <div className=\"flex items-center gap-2\">\n              <ShoppingCart className=\"h-5 w-5 text-text-primary\" />\n              <h2 className=\"text-lg font-semibold text-text-primary\">Shopping Cart</h2>\n              {itemCount > 0 && (\n                <span className=\"rounded-full bg-bg-accent px-2 py-0.5 text-xs font-medium text-text-link\">\n                  {itemCount}\n                </span>\n              )}\n            </div>\n            <button\n              onClick={onClose}\n              aria-label=\"Close cart\"\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <X className=\"h-5 w-5\" />\n            </button>\n          </div>\n\n          {/* Cart Items */}\n          <div className=\"flex-1 overflow-y-auto px-6 py-4\">\n            {cartItems.length === 0 ? (\n              <div className=\"flex h-full flex-col items-center justify-center text-center\">\n                <ShoppingCart className=\"mb-4 h-16 w-16 text-text-muted\" />\n                <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">Your cart is empty</h3>\n                <p className=\"text-sm text-text-muted\">Start shopping to add items to your cart</p>\n              </div>\n            ) : (\n              <div className=\"space-y-4\">\n                {cartItems.map((item) => (\n                  <div\n                    key={item.id}\n                    className=\"flex gap-4 rounded-lg border border-border-default p-4\"\n                  >\n                    {/* Product Image */}\n                    <div className=\"h-20 w-20 flex-shrink-0 overflow-hidden rounded bg-bg-sunken\">\n                      {item.productIcon || item.product?.icon ? (\n                        <img\n                          src={item.productIcon || item.product?.icon}\n                          alt={item.productName || item.product?.name}\n                          className=\"h-full w-full object-cover\"\n                        />\n                      ) : (\n                        <div className=\"flex h-full w-full items-center justify-center\">\n                          <ShoppingCart className=\"h-8 w-8 text-text-muted\" />\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Product Info */}\n                    <div className=\"flex flex-1 flex-col\">\n                      <h4 className=\"mb-1 font-semibold text-text-primary\">\n                        {item.productName || item.product?.name || 'Product'}\n                      </h4>\n                      {item.variantName && (\n                        <p className=\"mb-2 text-xs text-text-muted\">{item.variantName}</p>\n                      )}\n\n                      {/* Quantity Controls */}\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"flex items-center rounded border border-border-default\">\n                          <button\n                            onClick={() => updateQuantity(item.id, item.quantity - 1)}\n                            className=\"cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-50\"\n                            disabled={item.quantity <= 1}\n                          >\n                            <Minus className=\"h-4 w-4\" />\n                          </button>\n                          <span className=\"min-w-[2rem] text-center text-sm font-medium\">\n                            {item.quantity}\n                          </span>\n                          <button\n                            onClick={() => updateQuantity(item.id, item.quantity + 1)}\n                            className=\"cursor-pointer p-1.5 transition-colors hover:bg-bg-sunken\"\n                          >\n                            <Plus className=\"h-4 w-4\" />\n                          </button>\n                        </div>\n\n                        <button\n                          onClick={() => removeProduct(item.id)}\n                          className=\"cursor-pointer ml-auto text-status-error-text transition-colors hover:text-status-error-text-emphasis\"\n                        >\n                          <Trash2 className=\"h-4 w-4\" />\n                        </button>\n                      </div>\n\n                      {/* Price */}\n                      <div className=\"mt-2 text-right\">\n                        <span className=\"font-semibold text-text-primary\">\n                          {formatPrice(item.subtotal)}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* Footer with Summary */}\n          {cartItems.length > 0 && (\n            <div className=\"border-t border-border-default bg-bg-sunken px-6 py-4\">\n              <div className=\"space-y-2\">\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-text-muted\">Subtotal</span>\n                  <span className=\"font-medium text-text-primary\">{formatPrice(subtotal)}</span>\n                </div>\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-text-muted\">Tax</span>\n                  <span className=\"font-medium text-text-primary\">{formatPrice(tax)}</span>\n                </div>\n                <div className=\"flex justify-between border-t border-border-default pt-2\">\n                  <span className=\"font-semibold text-text-primary\">Total</span>\n                  <span className=\"text-lg font-bold text-text-primary\">{formatPrice(total)}</span>\n                </div>\n              </div>\n\n              <button\n                onClick={onCheckout}\n                className=\"cursor-pointer mt-4 w-full rounded-lg bg-action-primary-bg py-3 font-bold text-action-primary-text shadow-lg transition-all hover:opacity-90 hover:shadow-xl active:scale-[0.98]\"\n              >\n                Proceed to Checkout\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Store Components
+ *
+ * Re-exports all store UI components
+ */
+export { ProductCard } from './marketplace/ProductCard';
+export { CartDrawer } from './cart/CartDrawer';
+export { InstallAppModal } from './InstallAppModal';
+export type { AppInfo } from './InstallAppModal';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+import "./cart/CartDrawer.js";
+import "./marketplace/ProductCard.js";
+import "./InstallAppModal.js";

package/dist/components/marketplace/ProductCard.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Product } from '../../types';
+
+/**
+ * Props for ProductCard
+ */
+interface ProductCardProps {
+    product: Product;
+    onSelect: (product: Product) => void;
+    onAddToCart: (product: Product) => void;
+}
+/**
+ * ProductCard component
+ *
+ * Displays a product in grid view with key information and actions
+ */
+export declare const ProductCard: FC<ProductCardProps>;
+export {};

package/dist/components/marketplace/ProductCard.js

@@ -0,0 +1,2 @@
+import "lucide-react";
+import "react/jsx-runtime";

package/dist/dev/main.d.ts

@@ -0,0 +1 @@
+export {};