@contractspec/example.marketplace 0.0.0-canary-20260113170453

package/dist/ui/MarketplaceDashboard.js

@@ -0,0 +1,319 @@
+'use client';
+
+import { useMarketplaceData } from "./hooks/useMarketplaceData.js";
+import { useState } from "react";
+import { Button, ErrorState, LoaderBlock, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/MarketplaceDashboard.tsx
+/**
+* Marketplace Dashboard
+*
+* Interactive dashboard for the marketplace template.
+* Displays stores, products, and orders with stats.
+*/
+const STATUS_COLORS = {
+	ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+	PENDING: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+	SUSPENDED: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+	DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+	OUT_OF_STOCK: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+	ARCHIVED: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+	CONFIRMED: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+	PROCESSING: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
+	SHIPPED: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+	DELIVERED: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+	CANCELLED: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+};
+function formatCurrency(value, currency = "USD") {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency,
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 2
+	}).format(value);
+}
+function MarketplaceDashboard() {
+	const [activeTab, setActiveTab] = useState("stores");
+	const { stores, products, orders, loading, error, stats, refetch } = useMarketplaceData();
+	const tabs = [
+		{
+			id: "stores",
+			label: "Stores",
+			icon: "🏪"
+		},
+		{
+			id: "products",
+			label: "Products",
+			icon: "📦"
+		},
+		{
+			id: "orders",
+			label: "Orders",
+			icon: "🛒"
+		}
+	];
+	if (loading) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading Marketplace..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load Marketplace",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Marketplace"
+				}), /* @__PURE__ */ jsxs(Button, {
+					onClick: () => alert("Create store modal"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mr-2",
+						children: "+"
+					}), " New Store"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(StatCardGroup, { children: [
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Stores",
+					value: stats.totalStores,
+					hint: `${stats.activeStores} active`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Products",
+					value: stats.totalProducts,
+					hint: "listed"
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Orders",
+					value: stats.totalOrders,
+					hint: `${stats.pendingOrders} pending`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Revenue",
+					value: formatCurrency(stats.totalRevenue),
+					hint: "total"
+				})
+			] }),
+			/* @__PURE__ */ jsx("nav", {
+				className: "bg-muted flex gap-1 rounded-lg p-1",
+				role: "tablist",
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					role: "tab",
+					"aria-selected": activeTab === tab.id,
+					onClick: () => setActiveTab(tab.id),
+					className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+					children: [/* @__PURE__ */ jsx("span", { children: tab.icon }), tab.label]
+				}, tab.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-[400px]",
+				role: "tabpanel",
+				children: [
+					activeTab === "stores" && /* @__PURE__ */ jsx("div", {
+						className: "border-border rounded-lg border",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "w-full",
+							children: [/* @__PURE__ */ jsx("thead", {
+								className: "border-border bg-muted/30 border-b",
+								children: /* @__PURE__ */ jsxs("tr", { children: [
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Store"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Status"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Rating"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Reviews"
+									})
+								] })
+							}), /* @__PURE__ */ jsxs("tbody", {
+								className: "divide-border divide-y",
+								children: [stores.map((store) => /* @__PURE__ */ jsxs("tr", {
+									className: "hover:bg-muted/50",
+									children: [
+										/* @__PURE__ */ jsxs("td", {
+											className: "px-4 py-3",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "font-medium",
+												children: store.name
+											}), /* @__PURE__ */ jsx("div", {
+												className: "text-muted-foreground text-sm",
+												children: store.description
+											})]
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsx("span", {
+												className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[store.status] ?? ""}`,
+												children: store.status
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsxs("span", {
+												className: "flex items-center gap-1",
+												children: ["⭐ ", store.rating.toFixed(1)]
+											})
+										}),
+										/* @__PURE__ */ jsxs("td", {
+											className: "text-muted-foreground px-4 py-3 text-sm",
+											children: [store.reviewCount, " reviews"]
+										})
+									]
+								}, store.id)), stores.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+									colSpan: 4,
+									className: "text-muted-foreground px-4 py-8 text-center",
+									children: "No stores found"
+								}) })]
+							})]
+						})
+					}),
+					activeTab === "products" && /* @__PURE__ */ jsx("div", {
+						className: "border-border rounded-lg border",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "w-full",
+							children: [/* @__PURE__ */ jsx("thead", {
+								className: "border-border bg-muted/30 border-b",
+								children: /* @__PURE__ */ jsxs("tr", { children: [
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Product"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Price"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Stock"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Status"
+									})
+								] })
+							}), /* @__PURE__ */ jsxs("tbody", {
+								className: "divide-border divide-y",
+								children: [products.map((product) => /* @__PURE__ */ jsxs("tr", {
+									className: "hover:bg-muted/50",
+									children: [
+										/* @__PURE__ */ jsxs("td", {
+											className: "px-4 py-3",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "font-medium",
+												children: product.name
+											}), /* @__PURE__ */ jsx("div", {
+												className: "text-muted-foreground text-sm",
+												children: product.category
+											})]
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3 font-mono",
+											children: formatCurrency(product.price, product.currency)
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: product.stock
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsx("span", {
+												className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[product.status] ?? ""}`,
+												children: product.status
+											})
+										})
+									]
+								}, product.id)), products.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+									colSpan: 4,
+									className: "text-muted-foreground px-4 py-8 text-center",
+									children: "No products found"
+								}) })]
+							})]
+						})
+					}),
+					activeTab === "orders" && /* @__PURE__ */ jsx("div", {
+						className: "border-border rounded-lg border",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "w-full",
+							children: [/* @__PURE__ */ jsx("thead", {
+								className: "border-border bg-muted/30 border-b",
+								children: /* @__PURE__ */ jsxs("tr", { children: [
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Order ID"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Customer"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Total"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Status"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Date"
+									})
+								] })
+							}), /* @__PURE__ */ jsxs("tbody", {
+								className: "divide-border divide-y",
+								children: [orders.map((order) => /* @__PURE__ */ jsxs("tr", {
+									className: "hover:bg-muted/50",
+									children: [
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3 font-mono text-sm",
+											children: order.id
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3 text-sm",
+											children: order.customerId
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3 font-mono",
+											children: formatCurrency(order.total, order.currency)
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsx("span", {
+												className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[order.status] ?? ""}`,
+												children: order.status
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "text-muted-foreground px-4 py-3 text-sm",
+											children: order.createdAt.toLocaleDateString()
+										})
+									]
+								}, order.id)), orders.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+									colSpan: 5,
+									className: "text-muted-foreground px-4 py-8 text-center",
+									children: "No orders found"
+								}) })]
+							})]
+						})
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { MarketplaceDashboard };
+//# sourceMappingURL=MarketplaceDashboard.js.map

package/dist/ui/MarketplaceDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketplaceDashboard.js","names":[],"sources":["../../src/ui/MarketplaceDashboard.tsx"],"sourcesContent":["'use client';\n\n/**\n * Marketplace Dashboard\n *\n * Interactive dashboard for the marketplace template.\n * Displays stores, products, and orders with stats.\n */\nimport { useState } from 'react';\nimport {\n  Button,\n  ErrorState,\n  LoaderBlock,\n  StatCard,\n  StatCardGroup,\n} from '@contractspec/lib.design-system';\nimport { useMarketplaceData } from './hooks/useMarketplaceData';\n\ntype Tab = 'stores' | 'products' | 'orders';\n\nconst STATUS_COLORS: Record<string, string> = {\n  ACTIVE:\n    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',\n  PENDING:\n    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',\n  SUSPENDED: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',\n  DRAFT: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',\n  OUT_OF_STOCK:\n    'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',\n  ARCHIVED: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',\n  CONFIRMED: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',\n  PROCESSING:\n    'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',\n  SHIPPED:\n    'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',\n  DELIVERED:\n    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',\n  CANCELLED: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',\n};\n\nfunction formatCurrency(value: number, currency = 'USD'): string {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 2,\n  }).format(value);\n}\n\nexport function MarketplaceDashboard() {\n  const [activeTab, setActiveTab] = useState<Tab>('stores');\n  const { stores, products, orders, loading, error, stats, refetch } =\n    useMarketplaceData();\n\n  const tabs: { id: Tab; label: string; icon: string }[] = [\n    { id: 'stores', label: 'Stores', icon: '🏪' },\n    { id: 'products', label: 'Products', icon: '📦' },\n    { id: 'orders', label: 'Orders', icon: '🛒' },\n  ];\n\n  if (loading) {\n    return <LoaderBlock label=\"Loading Marketplace...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load Marketplace\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-2xl font-bold\">Marketplace</h2>\n        <Button onClick={() => alert('Create store modal')}>\n          <span className=\"mr-2\">+</span> New Store\n        </Button>\n      </div>\n\n      {/* Stats Row */}\n      <StatCardGroup>\n        <StatCard\n          label=\"Stores\"\n          value={stats.totalStores}\n          hint={`${stats.activeStores} active`}\n        />\n        <StatCard label=\"Products\" value={stats.totalProducts} hint=\"listed\" />\n        <StatCard\n          label=\"Orders\"\n          value={stats.totalOrders}\n          hint={`${stats.pendingOrders} pending`}\n        />\n        <StatCard\n          label=\"Revenue\"\n          value={formatCurrency(stats.totalRevenue)}\n          hint=\"total\"\n        />\n      </StatCardGroup>\n\n      {/* Navigation Tabs */}\n      <nav className=\"bg-muted flex gap-1 rounded-lg p-1\" role=\"tablist\">\n        {tabs.map((tab) => (\n          <Button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={activeTab === tab.id}\n            onClick={() => setActiveTab(tab.id)}\n            className={`flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${\n              activeTab === tab.id\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            <span>{tab.icon}</span>\n            {tab.label}\n          </Button>\n        ))}\n      </nav>\n\n      {/* Tab Content */}\n      <div className=\"min-h-[400px]\" role=\"tabpanel\">\n        {activeTab === 'stores' && (\n          <div className=\"border-border rounded-lg border\">\n            <table className=\"w-full\">\n              <thead className=\"border-border bg-muted/30 border-b\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Store\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Status\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Rating\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Reviews\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-border divide-y\">\n                {stores.map((store) => (\n                  <tr key={store.id} className=\"hover:bg-muted/50\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-medium\">{store.name}</div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {store.description}\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[store.status] ?? ''}`}\n                      >\n                        {store.status}\n                      </span>\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span className=\"flex items-center gap-1\">\n                        ⭐ {store.rating.toFixed(1)}\n                      </span>\n                    </td>\n                    <td className=\"text-muted-foreground px-4 py-3 text-sm\">\n                      {store.reviewCount} reviews\n                    </td>\n                  </tr>\n                ))}\n                {stores.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={4}\n                      className=\"text-muted-foreground px-4 py-8 text-center\"\n                    >\n                      No stores found\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n\n        {activeTab === 'products' && (\n          <div className=\"border-border rounded-lg border\">\n            <table className=\"w-full\">\n              <thead className=\"border-border bg-muted/30 border-b\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Product\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Price\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Stock\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Status\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-border divide-y\">\n                {products.map((product) => (\n                  <tr key={product.id} className=\"hover:bg-muted/50\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-medium\">{product.name}</div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {product.category}\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-3 font-mono\">\n                      {formatCurrency(product.price, product.currency)}\n                    </td>\n                    <td className=\"px-4 py-3\">{product.stock}</td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[product.status] ?? ''}`}\n                      >\n                        {product.status}\n                      </span>\n                    </td>\n                  </tr>\n                ))}\n                {products.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={4}\n                      className=\"text-muted-foreground px-4 py-8 text-center\"\n                    >\n                      No products found\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n\n        {activeTab === 'orders' && (\n          <div className=\"border-border rounded-lg border\">\n            <table className=\"w-full\">\n              <thead className=\"border-border bg-muted/30 border-b\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Order ID\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Customer\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Total\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Status\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Date\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-border divide-y\">\n                {orders.map((order) => (\n                  <tr key={order.id} className=\"hover:bg-muted/50\">\n                    <td className=\"px-4 py-3 font-mono text-sm\">{order.id}</td>\n                    <td className=\"px-4 py-3 text-sm\">{order.customerId}</td>\n                    <td className=\"px-4 py-3 font-mono\">\n                      {formatCurrency(order.total, order.currency)}\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[order.status] ?? ''}`}\n                      >\n                        {order.status}\n                      </span>\n                    </td>\n                    <td className=\"text-muted-foreground px-4 py-3 text-sm\">\n                      {order.createdAt.toLocaleDateString()}\n                    </td>\n                  </tr>\n                ))}\n                {orders.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={5}\n                      className=\"text-muted-foreground px-4 py-8 text-center\"\n                    >\n                      No orders found\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { MarketplaceStats, useMarketplaceData } from "./useMarketplaceData.js";
+export { type MarketplaceStats, useMarketplaceData };

package/dist/ui/hooks/index.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { useMarketplaceData } from "./useMarketplaceData.js";
+
+export { useMarketplaceData };

package/dist/ui/hooks/useMarketplaceData.d.ts

@@ -0,0 +1,23 @@
+import { Order, Product, Store } from "../../handlers/marketplace.handlers.js";
+
+//#region src/ui/hooks/useMarketplaceData.d.ts
+interface MarketplaceStats {
+  totalStores: number;
+  activeStores: number;
+  totalProducts: number;
+  totalOrders: number;
+  totalRevenue: number;
+  pendingOrders: number;
+}
+declare function useMarketplaceData(projectId?: string): {
+  stores: Store[];
+  products: Product[];
+  orders: Order[];
+  loading: boolean;
+  error: Error | null;
+  stats: MarketplaceStats;
+  refetch: () => Promise<void>;
+};
+//#endregion
+export { MarketplaceStats, useMarketplaceData };
+//# sourceMappingURL=useMarketplaceData.d.ts.map

package/dist/ui/hooks/useMarketplaceData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMarketplaceData.d.ts","names":[],"sources":["../../../src/ui/hooks/useMarketplaceData.ts"],"sourcesContent":[],"mappings":";;;UAWiB,gBAAA;;EAAA,YAAA,EAAA,MAAgB;EASjB,aAAA,EAAA,MAAkB;;;;;iBAAlB,kBAAA"}

package/dist/ui/hooks/useMarketplaceData.js

@@ -0,0 +1,64 @@
+'use client';
+
+import { useCallback, useEffect, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useMarketplaceData.ts
+function useMarketplaceData(projectId = "local-project") {
+	const { handlers } = useTemplateRuntime();
+	const marketplace = handlers.marketplace;
+	const [stores, setStores] = useState([]);
+	const [products, setProducts] = useState([]);
+	const [orders, setOrders] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [totalRevenue, setTotalRevenue] = useState(0);
+	const fetchData = useCallback(async () => {
+		try {
+			setLoading(true);
+			setError(null);
+			const [storeResult, productResult, orderResult] = await Promise.all([
+				marketplace.listStores({
+					projectId,
+					limit: 100
+				}),
+				marketplace.listProducts({ limit: 100 }),
+				marketplace.listOrders({
+					projectId,
+					limit: 100
+				})
+			]);
+			setStores(storeResult.stores);
+			setProducts(productResult.products);
+			setOrders(orderResult.orders);
+			setTotalRevenue(orderResult.totalRevenue);
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load marketplace"));
+		} finally {
+			setLoading(false);
+		}
+	}, [marketplace, projectId]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		stores,
+		products,
+		orders,
+		loading,
+		error,
+		stats: {
+			totalStores: stores.length,
+			activeStores: stores.filter((s) => s.status === "ACTIVE").length,
+			totalProducts: products.length,
+			totalOrders: orders.length,
+			totalRevenue,
+			pendingOrders: orders.filter((o) => o.status === "PENDING").length
+		},
+		refetch: fetchData
+	};
+}
+
+//#endregion
+export { useMarketplaceData };
+//# sourceMappingURL=useMarketplaceData.js.map

package/dist/ui/hooks/useMarketplaceData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMarketplaceData.js","names":[],"sources":["../../../src/ui/hooks/useMarketplaceData.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport type {\n  MarketplaceHandlers,\n  Order,\n  Product,\n  Store,\n} from '../../handlers/marketplace.handlers';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\n\nexport interface MarketplaceStats {\n  totalStores: number;\n  activeStores: number;\n  totalProducts: number;\n  totalOrders: number;\n  totalRevenue: number;\n  pendingOrders: number;\n}\n\nexport function useMarketplaceData(projectId = 'local-project') {\n  const { handlers } = useTemplateRuntime<{\n    marketplace: MarketplaceHandlers;\n  }>();\n  const marketplace = handlers.marketplace;\n  const [stores, setStores] = useState<Store[]>([]);\n  const [products, setProducts] = useState<Product[]>([]);\n  const [orders, setOrders] = useState<Order[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [totalRevenue, setTotalRevenue] = useState(0);\n\n  const fetchData = useCallback(async () => {\n    try {\n      setLoading(true);\n      setError(null);\n\n      const [storeResult, productResult, orderResult] = await Promise.all([\n        marketplace.listStores({ projectId, limit: 100 }),\n        marketplace.listProducts({ limit: 100 }),\n        marketplace.listOrders({ projectId, limit: 100 }),\n      ]);\n\n      setStores(storeResult.stores);\n      setProducts(productResult.products);\n      setOrders(orderResult.orders);\n      setTotalRevenue(orderResult.totalRevenue);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Failed to load marketplace')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [marketplace, projectId]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  const stats: MarketplaceStats = {\n    totalStores: stores.length,\n    activeStores: stores.filter((s) => s.status === 'ACTIVE').length,\n    totalProducts: products.length,\n    totalOrders: orders.length,\n    totalRevenue,\n    pendingOrders: orders.filter((o) => o.status === 'PENDING').length,\n  };\n\n  return {\n    stores,\n    products,\n    orders,\n    loading,\n    error,\n    stats,\n    refetch: fetchData,\n  };\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,mBAAmB,YAAY,iBAAiB;CAC9D,MAAM,EAAE,aAAa,oBAEjB;CACJ,MAAM,cAAc,SAAS;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAkB,EAAE,CAAC;CACjD,MAAM,CAAC,UAAU,eAAe,SAAoB,EAAE,CAAC;CACvD,MAAM,CAAC,QAAQ,aAAa,SAAkB,EAAE,CAAC;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CAEnD,MAAM,YAAY,YAAY,YAAY;AACxC,MAAI;AACF,cAAW,KAAK;AAChB,YAAS,KAAK;GAEd,MAAM,CAAC,aAAa,eAAe,eAAe,MAAM,QAAQ,IAAI;IAClE,YAAY,WAAW;KAAE;KAAW,OAAO;KAAK,CAAC;IACjD,YAAY,aAAa,EAAE,OAAO,KAAK,CAAC;IACxC,YAAY,WAAW;KAAE;KAAW,OAAO;KAAK,CAAC;IAClD,CAAC;AAEF,aAAU,YAAY,OAAO;AAC7B,eAAY,cAAc,SAAS;AACnC,aAAU,YAAY,OAAO;AAC7B,mBAAgB,YAAY,aAAa;WAClC,KAAK;AACZ,YACE,eAAe,QAAQ,sBAAM,IAAI,MAAM,6BAA6B,CACrE;YACO;AACR,cAAW,MAAM;;IAElB,CAAC,aAAa,UAAU,CAAC;AAE5B,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAWf,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,OAf8B;GAC9B,aAAa,OAAO;GACpB,cAAc,OAAO,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;GAC1D,eAAe,SAAS;GACxB,aAAa,OAAO;GACpB;GACA,eAAe,OAAO,QAAQ,MAAM,EAAE,WAAW,UAAU,CAAC;GAC7D;EASC,SAAS;EACV"}

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+import { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer } from "./renderers/marketplace.markdown.js";
+import "./renderers/index.js";
+import { MarketplaceDashboard } from "./MarketplaceDashboard.js";
+import { MarketplaceStats, useMarketplaceData } from "./hooks/useMarketplaceData.js";
+import "./hooks/index.js";
+export { MarketplaceDashboard, MarketplaceStats, marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer, useMarketplaceData };

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+import { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer } from "./renderers/marketplace.markdown.js";
+import { useMarketplaceData } from "./hooks/useMarketplaceData.js";
+import { MarketplaceDashboard } from "./MarketplaceDashboard.js";
+import "./hooks/index.js";
+
+export { MarketplaceDashboard, marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer, useMarketplaceData };

package/dist/ui/renderers/index.d.ts

@@ -0,0 +1,2 @@
+import { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer } from "./marketplace.markdown.js";
+export { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer };

package/dist/ui/renderers/index.js

@@ -0,0 +1,3 @@
+import { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer } from "./marketplace.markdown.js";
+
+export { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer };

package/dist/ui/renderers/marketplace.markdown.d.ts

@@ -0,0 +1,28 @@
+import { PresentationRenderer } from "@contractspec/lib.contracts";
+
+//#region src/ui/renderers/marketplace.markdown.d.ts
+
+/**
+ * Markdown renderer for Marketplace Dashboard
+ */
+declare const marketplaceDashboardMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+/**
+ * Markdown renderer for Product Catalog
+ */
+declare const productCatalogMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+/**
+ * Markdown renderer for Order List
+ */
+declare const orderListMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+//#endregion
+export { marketplaceDashboardMarkdownRenderer, orderListMarkdownRenderer, productCatalogMarkdownRenderer };
+//# sourceMappingURL=marketplace.markdown.d.ts.map

package/dist/ui/renderers/marketplace.markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marketplace.markdown.d.ts","names":[],"sources":["../../../src/ui/renderers/marketplace.markdown.ts"],"sourcesContent":[],"mappings":";;;;AAiNA;AAuDA;;cApIa,sCAAsC;;;;;;;cA6EtC,gCAAgC;;;;;;;cAuDhC,2BAA2B"}