@burdenoff/microfe-store 2026.510.113

package/README.md

@@ -0,0 +1,217 @@
+# @burdenoff/microfe-store
+
+Standalone micro-frontend for the Store tenant module, providing app marketplace functionality including product discovery, shopping cart, checkout, installation management, licensing, and publisher portal.
+
+## Overview
+
+The Store micro-frontend is a fully isolated, production-ready module for:
+
+- **End Users**: Browse, purchase, and install digital/physical products
+- **Publishers**: Submit products, manage listings, track revenue
+- **Workspace Admins**: Install apps, manage entitlements, configure permissions
+- **Platform Admins**: Review submissions, moderate content, manage categories
+
+## Project Structure
+
+```
+microfe-store/
+├── package.json              # Package configuration with subpath exports
+├── vite.config.ts            # Vite build configuration
+├── tsconfig.json             # TypeScript configuration
+├── tsconfig.build.json       # Build-specific TS config
+├── tsconfig.node.json        # Node config for Vite
+├── .graphqlrc.yml            # GraphQL codegen configuration
+├── eslint.config.mjs         # ESLint configuration
+├── prettier.config.mjs       # Prettier configuration
+├── .gitignore                # Git ignore rules
+├── index.html                # Dev server entry
+└── src/
+    ├── index.ts              # Main exports
+    ├── StoreRoot.tsx         # Root component (entry point)
+    ├── StoreRoutes.tsx       # Internal routing
+    ├── components/           # Reusable UI components
+    │   ├── index.ts
+    │   ├── cart/
+    │   │   └── CartDrawer.tsx
+    │   └── marketplace/
+    │       └── ProductCard.tsx
+    ├── hooks/                # Custom React hooks
+    │   ├── index.ts
+    │   ├── useCart.ts
+    │   ├── useProductSearch.ts
+    │   ├── useStorePermissions.ts
+    │   └── useStoreGraphQL.ts    # 22+ GraphQL hooks
+    ├── graphql/              # GraphQL client & operations
+    │   ├── index.ts
+    │   ├── store-client.ts   # Apollo Client singleton
+    │   ├── operations.ts     # Queries, mutations, fragments
+    │   └── operations/       # .graphql files by domain
+    ├── pages/                # Page components
+    │   ├── MarketplaceHomePage.tsx
+    │   ├── ProductDetailPage.tsx
+    │   ├── CartPage.tsx
+    │   └── InstalledAppsPage.tsx
+    ├── providers/            # React context providers
+    │   └── StoreProvider.tsx
+    ├── store/                # Zustand state management
+    │   └── storeStore.ts
+    ├── types/                # TypeScript type definitions
+    │   └── index.ts
+    ├── utils/                # Utility functions
+    │   └── index.ts
+    └── dev/                  # Development entry point
+        └── main.tsx
+```
+
+## Installation
+
+```bash
+npm install @burdenoff/microfe-store
+# or
+bun add @burdenoff/microfe-store
+```
+
+## Usage
+
+### Basic Integration
+
+```tsx
+import { StoreRoot, type StoreRootProps } from '@burdenoff/microfe-store';
+
+function App() {
+  const props: StoreRootProps = {
+    basePath: '/store',
+    apiGatewayUrl: 'https://api.example.com/tenant/graphql',
+    authToken: 'your-jwt-token',
+    user: {
+      id: 'user-1',
+      email: 'user@example.com',
+      roles: ['user', 'publisher'],
+    },
+    features: {
+      enablePhysicalProducts: true,
+      enablePublisherPortal: true,
+      enableReviews: true,
+      enableSubscriptions: true,
+    },
+    registerNavItems: (items) => {
+      // Register navigation items with your shell
+      return () => {}; // Cleanup function
+    },
+  };
+
+  return <StoreRoot {...props} />;
+}
+```
+
+### Subpath Exports
+
+```tsx
+// Main entry
+import { StoreRoot, useStore, useCart } from '@burdenoff/microfe-store';
+
+// Components only
+import { ProductCard, CartDrawer } from '@burdenoff/microfe-store/components';
+
+// Hooks only
+import { useProductSearch, useStorePermissions } from '@burdenoff/microfe-store/hooks';
+
+// GraphQL client
+import { getStoreClient, resetStoreClient } from '@burdenoff/microfe-store/graphql';
+
+// Types only
+import type { Product, CartItem, Order } from '@burdenoff/microfe-store/types';
+
+// Utilities
+import { formatPrice, calculateCartTotals } from '@burdenoff/microfe-store/utils';
+```
+
+## Features
+
+### Implemented
+
+- Product catalog with search and filtering
+- Shopping cart with quantity management
+- Marketplace homepage with featured products
+- Installed apps management page
+- Cart page with order summary
+- Permission-based navigation
+- Feature flag support
+
+### Routes
+
+| Route                      | Description                    |
+| -------------------------- | ------------------------------ |
+| `/marketplace`             | Product catalog & search       |
+| `/marketplace/product/:id` | Product details                |
+| `/cart`                    | Shopping cart                  |
+| `/orders`                  | Order history                  |
+| `/installed`               | Installed apps                 |
+| `/licenses`                | License management             |
+| `/publisher/*`             | Publisher portal (conditional) |
+| `/admin/reviews`           | Review moderation (admin only) |
+
+## Architecture
+
+### State Management
+
+- **Zustand** with persistence middleware
+- Cart state persisted to localStorage
+- View preferences (grid/list, sort) persisted
+
+### GraphQL Integration
+
+- Apollo Client singleton with auth token injection
+- 22+ hooks for store operations
+- Pagination support with cache merge
+
+### Permission Scopes
+
+```typescript
+// Example scopes
+'tenantmodule-store:catalog:product:read';
+'tenantmodule-store:commerce:order:create';
+'tenantmodule-store:fulfillment:installation:create';
+'tenantmodule-store:publisher:submission:create';
+```
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start dev server
+bun run dev
+
+# Build for production
+bun run build
+
+# Type check
+bun run type:check
+
+# Run all checks
+bun run sanity
+```
+
+## Configuration
+
+### Environment Variables
+
+| Variable               | Description            | Default                                |
+| ---------------------- | ---------------------- | -------------------------------------- |
+| `VITE_API_GATEWAY_URL` | GraphQL API endpoint   | `http://localhost:4000/tenant/graphql` |
+| `VITE_AUTH_TOKEN`      | Development auth token | -                                      |
+
+## Peer Dependencies
+
+- `react` ^19.0.0
+- `react-dom` ^19.0.0
+- `react-router-dom` ^7.0.0
+- `@apollo/client` ^3.12.0
+- `zustand` ^5.0.0
+- `@burdenoff/fe-libs` workspace:\*
+
+## License
+
+MIT

package/dist/StoreAdminRoot.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { StoreAdminRootProps } from './types';
+
+/**
+ * Admin root component for the Store microfrontend.
+ *
+ * This is the admin entry point that the admin app shell imports and renders.
+ * It sets up the necessary providers and renders only admin-specific routing.
+ * User-facing routes (marketplace, cart, orders, etc.) are NOT included here —
+ * those are in StoreRoot, which product app shells import instead.
+ *
+ * Nav items are registered statically by the admin shell's NavRegistration
+ * component, so this root only needs to provide context and routes.
+ *
+ * @example
+ * ```tsx
+ * import { StoreAdminRoot } from '@burdenoff/microfe-store';
+ *
+ * <StoreAdminRoot basePath="/store" {...globalBaseProps} />
+ * ```
+ */
+export declare const StoreAdminRoot: FC<StoreAdminRootProps>;

package/dist/StoreAdminRoot.js

@@ -0,0 +1,23 @@
+import { StoreProvider as e } from "./providers/StoreProvider.js";
+import { StoreAdminRoutes as t } from "./StoreAdminRoutes.js";
+import { ErrorBoundary as n } from "@burdenoff/fe-libs/shared/components";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/StoreAdminRoot.tsx
+var a = (a) => {
+	let { t: o } = r();
+	return /* @__PURE__ */ i(n, {
+		fallback: /* @__PURE__ */ i("div", {
+			className: "p-6 text-center text-text-secondary",
+			children: o("common.moduleLoadError", { defaultValue: "Something went wrong loading this module. Please refresh the page." })
+		}),
+		children: /* @__PURE__ */ i(e, {
+			...a,
+			children: /* @__PURE__ */ i(t, {})
+		})
+	});
+};
+//#endregion
+export { a as StoreAdminRoot };
+
+//# sourceMappingURL=StoreAdminRoot.js.map

package/dist/StoreAdminRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreAdminRoot.js","names":[],"sources":["../src/StoreAdminRoot.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { StoreProvider } from './providers/StoreProvider';\nimport type { StoreAdminRootProps } from './types';\nimport { StoreAdminRoutes } from './StoreAdminRoutes';\n\n/**\n * Admin root component for the Store microfrontend.\n *\n * This is the admin entry point that the admin app shell imports and renders.\n * It sets up the necessary providers and renders only admin-specific routing.\n * User-facing routes (marketplace, cart, orders, etc.) are NOT included here —\n * those are in StoreRoot, which product app shells import instead.\n *\n * Nav items are registered statically by the admin shell's NavRegistration\n * component, so this root only needs to provide context and routes.\n *\n * @example\n * ```tsx\n * import { StoreAdminRoot } from '@burdenoff/microfe-store';\n *\n * <StoreAdminRoot basePath=\"/store\" {...globalBaseProps} />\n * ```\n */\nexport const StoreAdminRoot: FC<StoreAdminRootProps> = (props) => {\n  const { t } = useI18n();\n\n  return (\n    <ErrorBoundary\n      fallback={\n        <div className=\"p-6 text-center text-text-secondary\">\n          {t('common.moduleLoadError', {\n            defaultValue: 'Something went wrong loading this module. Please refresh the page.',\n          })}\n        </div>\n      }\n    >\n      <StoreProvider {...props}>\n        <StoreAdminRoutes />\n      </StoreProvider>\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,KAA2C,MAAU;CAChE,IAAM,EAAE,SAAM,GAAS;AAEvB,QACE,kBAAC,GAAD;EACE,UACE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,0BAA0B,EAC3B,cAAc,sEACf,CAAC;GACE,CAAA;YAGR,kBAAC,GAAD;GAAe,GAAI;aACjB,kBAAC,GAAD,EAAoB,CAAA;GACN,CAAA;EACF,CAAA"}

package/dist/StoreAdminRoutes.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+/**
+ * StoreAdminRoutes component
+ *
+ * Admin-only routing for the Store microfrontend.
+ * Mounted by the admin app shell via StoreAdminRoot.
+ */
+export declare const StoreAdminRoutes: FC;

package/dist/StoreAdminRoutes.js

@@ -0,0 +1,69 @@
+import { STORE_PERMISSIONS as e, useStorePermissions as t } from "./hooks/useStorePermissions.js";
+import { PageLoadingFallback as n, PermissionGuard as r } from "./components/RouteGuards.js";
+import { Suspense as i, lazy as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Navigate as c, Route as l, Routes as u } from "react-router-dom";
+//#region src/StoreAdminRoutes.tsx
+var d = a(() => import("./pages/AdminDashboardPage.js").then((e) => ({ default: e.AdminDashboardPage }))), f = a(() => import("./pages/AdminSubmissionsQueuePage.js").then((e) => ({ default: e.AdminSubmissionsQueuePage }))), p = a(() => import("./pages/AdminStoresPage.js").then((e) => ({ default: e.AdminStoresPage }))), m = a(() => import("./pages/AdminReviewModerationPage.js").then((e) => ({ default: e.AdminReviewModerationPage }))), h = () => {
+	let { hasPermission: a } = t(), h = a(e.REVIEW_ADMIN) || a(e.PRODUCT_ADMIN);
+	return /* @__PURE__ */ s(u, { children: [
+		/* @__PURE__ */ o(l, {
+			index: !0,
+			element: /* @__PURE__ */ o(c, {
+				to: "dashboard",
+				replace: !0
+			})
+		}),
+		/* @__PURE__ */ o(l, {
+			path: "dashboard",
+			element: /* @__PURE__ */ o(r, {
+				allowed: h,
+				children: /* @__PURE__ */ o(i, {
+					fallback: /* @__PURE__ */ o(n, {}),
+					children: /* @__PURE__ */ o(d, {})
+				})
+			})
+		}),
+		/* @__PURE__ */ o(l, {
+			path: "submissions",
+			element: /* @__PURE__ */ o(r, {
+				allowed: h,
+				children: /* @__PURE__ */ o(i, {
+					fallback: /* @__PURE__ */ o(n, {}),
+					children: /* @__PURE__ */ o(f, {})
+				})
+			})
+		}),
+		/* @__PURE__ */ o(l, {
+			path: "stores",
+			element: /* @__PURE__ */ o(r, {
+				allowed: h,
+				children: /* @__PURE__ */ o(i, {
+					fallback: /* @__PURE__ */ o(n, {}),
+					children: /* @__PURE__ */ o(p, {})
+				})
+			})
+		}),
+		/* @__PURE__ */ o(l, {
+			path: "reviews",
+			element: /* @__PURE__ */ o(r, {
+				allowed: a(e.REVIEW_ADMIN),
+				children: /* @__PURE__ */ o(i, {
+					fallback: /* @__PURE__ */ o(n, {}),
+					children: /* @__PURE__ */ o(m, {})
+				})
+			})
+		}),
+		/* @__PURE__ */ o(l, {
+			path: "*",
+			element: /* @__PURE__ */ o(c, {
+				to: "dashboard",
+				replace: !0
+			})
+		})
+	] });
+};
+//#endregion
+export { h as StoreAdminRoutes };
+
+//# sourceMappingURL=StoreAdminRoutes.js.map

package/dist/StoreAdminRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreAdminRoutes.js","names":[],"sources":["../src/StoreAdminRoutes.tsx"],"sourcesContent":["import { lazy, Suspense, type FC } from 'react';\nimport { Routes, Route, Navigate } from 'react-router-dom';\nimport { useStorePermissions, STORE_PERMISSIONS } from './hooks/useStorePermissions';\nimport { PageLoadingFallback, PermissionGuard } from './components/RouteGuards';\n\nconst AdminDashboardPage = lazy(() =>\n  import('./pages/AdminDashboardPage').then((m) => ({\n    default: m.AdminDashboardPage,\n  }))\n);\n\nconst AdminSubmissionsQueuePage = lazy(() =>\n  import('./pages/AdminSubmissionsQueuePage').then((m) => ({\n    default: m.AdminSubmissionsQueuePage,\n  }))\n);\n\nconst AdminStoresPage = lazy(() =>\n  import('./pages/AdminStoresPage').then((m) => ({\n    default: m.AdminStoresPage,\n  }))\n);\n\nconst AdminReviewModerationPage = lazy(() =>\n  import('./pages/AdminReviewModerationPage').then((m) => ({\n    default: m.AdminReviewModerationPage,\n  }))\n);\n\n/**\n * StoreAdminRoutes component\n *\n * Admin-only routing for the Store microfrontend.\n * Mounted by the admin app shell via StoreAdminRoot.\n */\nexport const StoreAdminRoutes: FC = () => {\n  const { hasPermission } = useStorePermissions();\n  const isAdmin =\n    hasPermission(STORE_PERMISSIONS.REVIEW_ADMIN) || hasPermission(STORE_PERMISSIONS.PRODUCT_ADMIN);\n\n  return (\n    <Routes>\n      {/* Default redirect to dashboard */}\n      <Route index element={<Navigate to=\"dashboard\" replace />} />\n\n      <Route\n        path=\"dashboard\"\n        element={\n          <PermissionGuard allowed={isAdmin}>\n            <Suspense fallback={<PageLoadingFallback />}>\n              <AdminDashboardPage />\n            </Suspense>\n          </PermissionGuard>\n        }\n      />\n\n      <Route\n        path=\"submissions\"\n        element={\n          <PermissionGuard allowed={isAdmin}>\n            <Suspense fallback={<PageLoadingFallback />}>\n              <AdminSubmissionsQueuePage />\n            </Suspense>\n          </PermissionGuard>\n        }\n      />\n\n      <Route\n        path=\"stores\"\n        element={\n          <PermissionGuard allowed={isAdmin}>\n            <Suspense fallback={<PageLoadingFallback />}>\n              <AdminStoresPage />\n            </Suspense>\n          </PermissionGuard>\n        }\n      />\n\n      <Route\n        path=\"reviews\"\n        element={\n          <PermissionGuard allowed={hasPermission(STORE_PERMISSIONS.REVIEW_ADMIN)}>\n            <Suspense fallback={<PageLoadingFallback />}>\n              <AdminReviewModerationPage />\n            </Suspense>\n          </PermissionGuard>\n        }\n      />\n\n      {/* Catch-all redirect */}\n      <Route path=\"*\" element={<Navigate to=\"dashboard\" replace />} />\n    </Routes>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAM,IAAqB,QACzB,OAAO,iCAA8B,MAAM,OAAO,EAChD,SAAS,EAAE,oBACZ,EAAE,CACJ,EAEK,IAA4B,QAChC,OAAO,wCAAqC,MAAM,OAAO,EACvD,SAAS,EAAE,2BACZ,EAAE,CACJ,EAEK,IAAkB,QACtB,OAAO,8BAA2B,MAAM,OAAO,EAC7C,SAAS,EAAE,iBACZ,EAAE,CACJ,EAEK,IAA4B,QAChC,OAAO,wCAAqC,MAAM,OAAO,EACvD,SAAS,EAAE,2BACZ,EAAE,CACJ,EAQY,UAA6B;CACxC,IAAM,EAAE,qBAAkB,GAAqB,EACzC,IACJ,EAAc,EAAkB,aAAa,IAAI,EAAc,EAAkB,cAAc;AAEjG,QACE,kBAAC,GAAD,EAAA,UAAA;EAEE,kBAAC,GAAD;GAAO,OAAA;GAAM,SAAS,kBAAC,GAAD;IAAU,IAAG;IAAY,SAAA;IAAU,CAAA;GAAI,CAAA;EAE7D,kBAAC,GAAD;GACE,MAAK;GACL,SACE,kBAAC,GAAD;IAAiB,SAAS;cACxB,kBAAC,GAAD;KAAU,UAAU,kBAAC,GAAD,EAAuB,CAAA;eACzC,kBAAC,GAAD,EAAsB,CAAA;KACb,CAAA;IACK,CAAA;GAEpB,CAAA;EAEF,kBAAC,GAAD;GACE,MAAK;GACL,SACE,kBAAC,GAAD;IAAiB,SAAS;cACxB,kBAAC,GAAD;KAAU,UAAU,kBAAC,GAAD,EAAuB,CAAA;eACzC,kBAAC,GAAD,EAA6B,CAAA;KACpB,CAAA;IACK,CAAA;GAEpB,CAAA;EAEF,kBAAC,GAAD;GACE,MAAK;GACL,SACE,kBAAC,GAAD;IAAiB,SAAS;cACxB,kBAAC,GAAD;KAAU,UAAU,kBAAC,GAAD,EAAuB,CAAA;eACzC,kBAAC,GAAD,EAAmB,CAAA;KACV,CAAA;IACK,CAAA;GAEpB,CAAA;EAEF,kBAAC,GAAD;GACE,MAAK;GACL,SACE,kBAAC,GAAD;IAAiB,SAAS,EAAc,EAAkB,aAAa;cACrE,kBAAC,GAAD;KAAU,UAAU,kBAAC,GAAD,EAAuB,CAAA;eACzC,kBAAC,GAAD,EAA6B,CAAA;KACpB,CAAA;IACK,CAAA;GAEpB,CAAA;EAGF,kBAAC,GAAD;GAAO,MAAK;GAAI,SAAS,kBAAC,GAAD;IAAU,IAAG;IAAY,SAAA;IAAU,CAAA;GAAI,CAAA;EACzD,EAAA,CAAA"}

package/dist/StoreRoot.d.ts

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { StoreRootProps } from './types';
+
+/**
+ * Root component for the Store microfrontend.
+ *
+ * This is the main entry point that host applications import and render.
+ * It sets up the necessary providers and renders the internal routing.
+ * Automatically registers navigation items with the shell if registration functions are provided.
+ *
+ * @example
+ * ```tsx
+ * import { StoreRoot, type StoreRootProps } from '@burdenoff/micro-fe/store';
+ *
+ * function App() {
+ *   const props: StoreRootProps = {
+ *     basePath: '/store',
+ *     navigate: (path) => router.push(path),
+ *     currentUser: { id: '1', email: 'user@example.com', firstName: 'John', lastName: 'Doe' },
+ *     workspaceId: 'ws-123',
+ *     organizationId: 'org-123',
+ *     apiGatewayUrl: 'https://api.example.com/tenant/graphql',
+ *     authToken: 'token',
+ *     registerNavItems: (items) => { return () => {}; },
+ *   };
+ *
+ *   return <StoreRoot {...props} />;
+ * }
+ * ```
+ */
+export declare const StoreRoot: FC<StoreRootProps>;

package/dist/StoreRoot.js

@@ -0,0 +1,139 @@
+import { StoreProvider as e } from "./providers/StoreProvider.js";
+import { STORE_PERMISSIONS as t, useStorePermissions as n } from "./hooks/useStorePermissions.js";
+import { useCart as r } from "./hooks/useCart.js";
+import { StoreRoutes as i } from "./StoreRoutes.js";
+import { useEffect as a, useMemo as o } from "react";
+import { ErrorBoundary as s } from "@burdenoff/fe-libs/shared/components";
+import { FeatureFlagProvider as c } from "@burdenoff/fe-libs/shared/feature-flags";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Briefcase as u, DollarSign as d, FileCheck as f, Key as p, LayoutDashboard as m, Package as h, Receipt as g, ShoppingBag as _, ShoppingCart as v, Upload as y } from "lucide-react";
+import { jsx as b } from "react/jsx-runtime";
+//#region src/StoreRoot.tsx
+var x = (t) => {
+	let { t: n } = l();
+	return /* @__PURE__ */ b(c, {
+		workspaceId: t.workspaceId ?? null,
+		gateway: "global",
+		defaultEnabled: !0,
+		children: /* @__PURE__ */ b(s, {
+			fallback: /* @__PURE__ */ b("div", {
+				className: "p-6 text-center text-text-secondary",
+				children: n("common.moduleLoadError", { defaultValue: "Something went wrong loading this module. Please refresh the page." })
+			}),
+			children: /* @__PURE__ */ b(e, {
+				...t,
+				children: /* @__PURE__ */ b(S, { ...t })
+			})
+		})
+	});
+}, S = ({ registerNavItems: e, registerFooterItems: s, basePath: c = "/" }) => {
+	let { itemCount: x } = r(), { permissions: S, hasPermission: C } = n(), { t: w } = l(), T = S.canPublish, E = C(t.EARNINGS_READ);
+	a(() => {
+		if (!e) return;
+		let t = (e, t) => (e.endsWith("/") ? e.slice(0, -1) : e) + (t.startsWith("/") ? t : `/${t}`), n = [
+			{
+				id: "store-marketplace",
+				label: w("nav.marketplace", { defaultValue: "Marketplace" }),
+				path: t(c, "marketplace"),
+				icon: /* @__PURE__ */ b(_, { size: 20 }),
+				order: 10,
+				group: "store"
+			},
+			{
+				id: "store-cart",
+				label: w("nav.cart", { defaultValue: "Cart" }),
+				path: t(c, "cart"),
+				icon: /* @__PURE__ */ b(v, { size: 20 }),
+				badge: x > 0 ? x : void 0,
+				order: 20,
+				group: "store"
+			},
+			{
+				id: "store-orders",
+				label: w("nav.orders", { defaultValue: "My Orders" }),
+				path: t(c, "orders"),
+				icon: /* @__PURE__ */ b(g, { size: 20 }),
+				order: 30,
+				group: "store"
+			},
+			{
+				id: "store-installed",
+				label: w("nav.installed", { defaultValue: "Installed Apps" }),
+				path: t(c, "installed"),
+				icon: /* @__PURE__ */ b(h, { size: 20 }),
+				order: 40,
+				group: "store"
+			},
+			{
+				id: "store-licenses",
+				label: w("nav.licenses", { defaultValue: "Licenses" }),
+				path: t(c, "licenses"),
+				icon: /* @__PURE__ */ b(p, { size: 20 }),
+				order: 50,
+				group: "store"
+			}
+		];
+		if (T) {
+			let e = [
+				{
+					id: "store-publisher-dashboard",
+					label: w("nav.publisherDashboard", { defaultValue: "Dashboard" }),
+					path: t(c, "publisher"),
+					icon: /* @__PURE__ */ b(m, { size: 20 }),
+					order: 10
+				},
+				{
+					id: "store-publisher-submit",
+					label: w("nav.submitProduct", { defaultValue: "Submit Product" }),
+					path: t(c, "publisher/submit"),
+					icon: /* @__PURE__ */ b(y, { size: 20 }),
+					order: 20
+				},
+				{
+					id: "store-publisher-submissions",
+					label: w("nav.submissions", { defaultValue: "Submissions" }),
+					path: t(c, "publisher/submissions"),
+					icon: /* @__PURE__ */ b(f, { size: 20 }),
+					order: 30
+				}
+			];
+			E && e.push({
+				id: "store-publisher-revenue",
+				label: w("nav.revenue", { defaultValue: "Revenue" }),
+				path: t(c, "publisher/revenue"),
+				icon: /* @__PURE__ */ b(d, { size: 20 }),
+				order: 40
+			}), n.push({
+				id: "store-publisher",
+				label: w("nav.publisher", { defaultValue: "Publisher Portal" }),
+				path: t(c, "publisher"),
+				icon: /* @__PURE__ */ b(u, { size: 20 }),
+				order: 60,
+				group: "store",
+				children: e
+			});
+		}
+		return e(n);
+	}, [
+		e,
+		c,
+		x,
+		T,
+		E,
+		w
+	]);
+	let D = o(() => [{
+		id: "store-status",
+		label: w("store.footer.ready", { defaultValue: "Store Ready" }),
+		type: "status",
+		order: 10,
+		section: "left"
+	}], [w]);
+	return a(() => {
+		if (s) return s(D);
+	}, [s, D]), /* @__PURE__ */ b(i, {});
+};
+//#endregion
+export { x as StoreRoot };
+
+//# sourceMappingURL=StoreRoot.js.map

package/dist/StoreRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreRoot.js","names":[],"sources":["../src/StoreRoot.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useEffect, useMemo } from 'react';\nimport { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';\nimport { FeatureFlagProvider } from '@burdenoff/fe-libs/shared/feature-flags';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ShoppingBag,\n  ShoppingCart,\n  Receipt,\n  Package,\n  Key,\n  Briefcase,\n  LayoutDashboard,\n  Upload,\n  FileCheck,\n  DollarSign,\n} from 'lucide-react';\nimport { StoreProvider } from './providers/StoreProvider';\nimport type { NavItem, StoreRootProps } from './types';\nimport { StoreRoutes } from './StoreRoutes';\nimport { useCart } from './hooks/useCart';\nimport { useStorePermissions, STORE_PERMISSIONS } from './hooks/useStorePermissions';\n\n/**\n * Root component for the Store microfrontend.\n *\n * This is the main entry point that host applications import and render.\n * It sets up the necessary providers and renders the internal routing.\n * Automatically registers navigation items with the shell if registration functions are provided.\n *\n * @example\n * ```tsx\n * import { StoreRoot, type StoreRootProps } from '@burdenoff/micro-fe/store';\n *\n * function App() {\n *   const props: StoreRootProps = {\n *     basePath: '/store',\n *     navigate: (path) => router.push(path),\n *     currentUser: { id: '1', email: 'user@example.com', firstName: 'John', lastName: 'Doe' },\n *     workspaceId: 'ws-123',\n *     organizationId: 'org-123',\n *     apiGatewayUrl: 'https://api.example.com/tenant/graphql',\n *     authToken: 'token',\n *     registerNavItems: (items) => { return () => {}; },\n *   };\n *\n *   return <StoreRoot {...props} />;\n * }\n * ```\n */\nexport const StoreRoot: FC<StoreRootProps> = (props) => {\n  const { t } = useI18n();\n\n  return (\n    <FeatureFlagProvider\n      workspaceId={props.workspaceId ?? null}\n      gateway=\"global\"\n      defaultEnabled={true}\n    >\n      <ErrorBoundary\n        fallback={\n          <div className=\"p-6 text-center text-text-secondary\">\n            {t('common.moduleLoadError', {\n              defaultValue: 'Something went wrong loading this module. Please refresh the page.',\n            })}\n          </div>\n        }\n      >\n        <StoreProvider {...props}>\n          <StoreNavigationRegistration {...props} />\n        </StoreProvider>\n      </ErrorBoundary>\n    </FeatureFlagProvider>\n  );\n};\n\n/**\n * Internal component that handles navigation registration\n */\nconst StoreNavigationRegistration: FC<StoreRootProps> = ({\n  registerNavItems,\n  registerFooterItems,\n  basePath = '/',\n}) => {\n  const { itemCount } = useCart(); // Get item count from backend cart\n  const { permissions, hasPermission } = useStorePermissions();\n  const { t } = useI18n();\n\n  // Extract primitive flags so the registration effect only re-runs when\n  // values actually change — not on every re-render of the permissions\n  // object or memoized `hasPermission` identity. Without this, the parent\n  // shell's nav store subscription causes a render loop: register → state\n  // change → parent re-render → new permissions object → effect re-run →\n  // unregister → register → ... (\"Maximum update depth exceeded\").\n  const canPublish = permissions.canPublish;\n  const canReadEarnings = hasPermission(STORE_PERMISSIONS.EARNINGS_READ);\n\n  // Register navigation items with the shell\n  useEffect(() => {\n    if (!registerNavItems) return;\n\n    const joinPath = (base: string, path: string): string => {\n      const cleanBase = base.endsWith('/') ? base.slice(0, -1) : base;\n      const cleanPath = path.startsWith('/') ? path : `/${path}`;\n      return cleanBase + cleanPath;\n    };\n\n    const navItems: NavItem[] = [\n      {\n        id: 'store-marketplace',\n        label: t('nav.marketplace', { defaultValue: 'Marketplace' }),\n        path: joinPath(basePath, 'marketplace'),\n        icon: <ShoppingBag size={20} />,\n        order: 10,\n        group: 'store',\n      },\n      {\n        id: 'store-cart',\n        label: t('nav.cart', { defaultValue: 'Cart' }),\n        path: joinPath(basePath, 'cart'),\n        icon: <ShoppingCart size={20} />,\n        badge: itemCount > 0 ? itemCount : undefined,\n        order: 20,\n        group: 'store',\n      },\n      {\n        id: 'store-orders',\n        label: t('nav.orders', { defaultValue: 'My Orders' }),\n        path: joinPath(basePath, 'orders'),\n        icon: <Receipt size={20} />,\n        order: 30,\n        group: 'store',\n      },\n      {\n        id: 'store-installed',\n        label: t('nav.installed', { defaultValue: 'Installed Apps' }),\n        path: joinPath(basePath, 'installed'),\n        icon: <Package size={20} />,\n        order: 40,\n        group: 'store',\n      },\n      {\n        id: 'store-licenses',\n        label: t('nav.licenses', { defaultValue: 'Licenses' }),\n        path: joinPath(basePath, 'licenses'),\n        icon: <Key size={20} />,\n        order: 50,\n        group: 'store',\n      },\n    ];\n\n    if (canPublish) {\n      const publisherChildren: NavItem[] = [\n        {\n          id: 'store-publisher-dashboard',\n          label: t('nav.publisherDashboard', { defaultValue: 'Dashboard' }),\n          path: joinPath(basePath, 'publisher'),\n          icon: <LayoutDashboard size={20} />,\n          order: 10,\n        },\n        {\n          id: 'store-publisher-submit',\n          label: t('nav.submitProduct', { defaultValue: 'Submit Product' }),\n          path: joinPath(basePath, 'publisher/submit'),\n          icon: <Upload size={20} />,\n          order: 20,\n        },\n        {\n          id: 'store-publisher-submissions',\n          label: t('nav.submissions', { defaultValue: 'Submissions' }),\n          path: joinPath(basePath, 'publisher/submissions'),\n          icon: <FileCheck size={20} />,\n          order: 30,\n        },\n      ];\n\n      if (canReadEarnings) {\n        publisherChildren.push({\n          id: 'store-publisher-revenue',\n          label: t('nav.revenue', { defaultValue: 'Revenue' }),\n          path: joinPath(basePath, 'publisher/revenue'),\n          icon: <DollarSign size={20} />,\n          order: 40,\n        });\n      }\n\n      navItems.push({\n        id: 'store-publisher',\n        label: t('nav.publisher', { defaultValue: 'Publisher Portal' }),\n        path: joinPath(basePath, 'publisher'),\n        icon: <Briefcase size={20} />,\n        order: 60,\n        group: 'store',\n        children: publisherChildren,\n      });\n    }\n\n    const cleanup = registerNavItems(navItems);\n    return cleanup;\n  }, [registerNavItems, basePath, itemCount, canPublish, canReadEarnings, t]);\n\n  // Register footer items — memoized to avoid re-registering on every render.\n  const footerItems = useMemo(\n    () => [\n      {\n        id: 'store-status',\n        label: t('store.footer.ready', { defaultValue: 'Store Ready' }),\n        type: 'status' as const,\n        order: 10,\n        section: 'left' as const,\n      },\n    ],\n    [t]\n  );\n\n  useEffect(() => {\n    if (!registerFooterItems) return;\n    const cleanup = registerFooterItems(footerItems);\n    return cleanup;\n  }, [registerFooterItems, footerItems]);\n\n  return <StoreRoutes />;\n};\n"],"mappings":"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"}

package/dist/StoreRoutes.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+/**
+ * StoreRoutes component
+ *
+ * Internal routing for the Store microfrontend. Every route is gated by both
+ * a live feature flag (via FeatureGate) and an RBAC permission check so that
+ * features can be toggled per-org without a deployment.
+ *
+ * Flag namespace: store.*
+ */
+export declare const StoreRoutes: FC;