@contractspec/example.marketplace 3.7.6 → 3.8.2

package/dist/browser/ui/index.js

@@ -1,249 +1,6 @@
-// src/ui/renderers/marketplace.markdown.ts
-var mockStores = [
-  {
-    id: "store-1",
-    name: "Tech Gadgets Store",
-    status: "ACTIVE",
-    productCount: 45,
-    rating: 4.8
-  },
-  {
-    id: "store-2",
-    name: "Home & Garden",
-    status: "ACTIVE",
-    productCount: 120,
-    rating: 4.5
-  },
-  {
-    id: "store-3",
-    name: "Fashion Boutique",
-    status: "PENDING",
-    productCount: 0,
-    rating: 0
-  }
-];
-var mockProducts = [
-  {
-    id: "prod-1",
-    name: "Wireless Earbuds",
-    storeId: "store-1",
-    price: 79.99,
-    currency: "USD",
-    status: "ACTIVE",
-    stock: 150
-  },
-  {
-    id: "prod-2",
-    name: "Smart Watch",
-    storeId: "store-1",
-    price: 249.99,
-    currency: "USD",
-    status: "ACTIVE",
-    stock: 50
-  },
-  {
-    id: "prod-3",
-    name: "Garden Tools Set",
-    storeId: "store-2",
-    price: 89.99,
-    currency: "USD",
-    status: "ACTIVE",
-    stock: 30
-  },
-  {
-    id: "prod-4",
-    name: "Indoor Plant Kit",
-    storeId: "store-2",
-    price: 45.99,
-    currency: "USD",
-    status: "ACTIVE",
-    stock: 75
-  },
-  {
-    id: "prod-5",
-    name: "LED Desk Lamp",
-    storeId: "store-1",
-    price: 34.99,
-    currency: "USD",
-    status: "OUT_OF_STOCK",
-    stock: 0
-  }
-];
-var mockOrders = [
-  {
-    id: "ord-1",
-    storeId: "store-1",
-    customerId: "cust-1",
-    total: 329.98,
-    currency: "USD",
-    status: "DELIVERED",
-    itemCount: 2,
-    createdAt: "2024-01-15T10:00:00Z"
-  },
-  {
-    id: "ord-2",
-    storeId: "store-2",
-    customerId: "cust-2",
-    total: 135.98,
-    currency: "USD",
-    status: "SHIPPED",
-    itemCount: 2,
-    createdAt: "2024-01-14T14:00:00Z"
-  },
-  {
-    id: "ord-3",
-    storeId: "store-1",
-    customerId: "cust-3",
-    total: 79.99,
-    currency: "USD",
-    status: "PROCESSING",
-    itemCount: 1,
-    createdAt: "2024-01-16T08:00:00Z"
-  },
-  {
-    id: "ord-4",
-    storeId: "store-2",
-    customerId: "cust-4",
-    total: 45.99,
-    currency: "USD",
-    status: "PENDING",
-    itemCount: 1,
-    createdAt: "2024-01-16T12:00:00Z"
-  }
-];
-function formatCurrency(value, currency = "USD") {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency,
-    minimumFractionDigits: 2
-  }).format(value);
-}
-var marketplaceDashboardMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "MarketplaceDashboard") {
-      throw new Error("marketplaceDashboardMarkdownRenderer: not MarketplaceDashboard");
-    }
-    const stores = mockStores;
-    const products = mockProducts;
-    const orders = mockOrders;
-    const activeStores = stores.filter((s) => s.status === "ACTIVE");
-    const activeProducts = products.filter((p) => p.status === "ACTIVE");
-    const totalRevenue = orders.reduce((sum, o) => sum + o.total, 0);
-    const pendingOrders = orders.filter((o) => o.status === "PENDING" || o.status === "PROCESSING");
-    const lines = [
-      "# Marketplace Dashboard",
-      "",
-      "> Two-sided marketplace overview",
-      "",
-      "## Summary",
-      "",
-      "| Metric | Value |",
-      "|--------|-------|",
-      `| Active Stores | ${activeStores.length} |`,
-      `| Active Products | ${activeProducts.length} |`,
-      `| Total Orders | ${orders.length} |`,
-      `| Total Revenue | ${formatCurrency(totalRevenue)} |`,
-      `| Pending Orders | ${pendingOrders.length} |`,
-      "",
-      "## Top Stores",
-      "",
-      "| Store | Products | Rating | Status |",
-      "|-------|----------|--------|--------|"
-    ];
-    for (const store of stores.slice(0, 5)) {
-      lines.push(`| ${store.name} | ${store.productCount} | ⭐ ${store.rating || "N/A"} | ${store.status} |`);
-    }
-    lines.push("");
-    lines.push("## Recent Orders");
-    lines.push("");
-    lines.push("| Order | Items | Total | Status | Date |");
-    lines.push("|-------|-------|-------|--------|------|");
-    for (const order of orders.slice(0, 10)) {
-      const date = new Date(order.createdAt).toLocaleDateString();
-      lines.push(`| ${order.id} | ${order.itemCount} | ${formatCurrency(order.total, order.currency)} | ${order.status} | ${date} |`);
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var productCatalogMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "ProductCatalog") {
-      throw new Error("productCatalogMarkdownRenderer: not ProductCatalog");
-    }
-    const products = mockProducts;
-    const stores = mockStores;
-    const lines = [
-      "# Product Catalog",
-      "",
-      "> Browse products across all marketplace stores",
-      ""
-    ];
-    for (const store of stores.filter((s) => s.status === "ACTIVE")) {
-      const storeProducts = products.filter((p) => p.storeId === store.id);
-      if (storeProducts.length === 0)
-        continue;
-      lines.push(`## ${store.name}`);
-      lines.push("");
-      lines.push("| Product | Price | Stock | Status |");
-      lines.push("|---------|-------|-------|--------|");
-      for (const product of storeProducts) {
-        const stockStatus = product.stock > 0 ? `${product.stock} in stock` : "Out of stock";
-        lines.push(`| ${product.name} | ${formatCurrency(product.price, product.currency)} | ${stockStatus} | ${product.status} |`);
-      }
-      lines.push("");
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var orderListMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "OrderList") {
-      throw new Error("orderListMarkdownRenderer: not OrderList");
-    }
-    const orders = mockOrders;
-    const stores = mockStores;
-    const lines = [
-      "# Orders",
-      "",
-      "> Manage marketplace orders",
-      "",
-      "| Order ID | Store | Items | Total | Status | Created |",
-      "|----------|-------|-------|-------|--------|---------|"
-    ];
-    for (const order of orders) {
-      const store = stores.find((s) => s.id === order.storeId);
-      const date = new Date(order.createdAt).toLocaleDateString();
-      lines.push(`| ${order.id} | ${store?.name ?? "Unknown"} | ${order.itemCount} | ${formatCurrency(order.total, order.currency)} | ${order.status} | ${date} |`);
-    }
-    lines.push("");
-    lines.push("## Order Status Legend");
-    lines.push("");
-    lines.push("- **PENDING**: Awaiting payment confirmation");
-    lines.push("- **PROCESSING**: Being prepared");
-    lines.push("- **SHIPPED**: In transit");
-    lines.push("- **DELIVERED**: Order completed");
-    lines.push("- **CANCELLED**: Order cancelled");
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
 // src/ui/hooks/useMarketplaceData.ts
-import { useCallback, useEffect, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useState } from "react";
 "use client";
 function useMarketplaceData(projectId = "local-project") {
   const { handlers } = useTemplateRuntime();
@@ -295,8 +52,224 @@ function useMarketplaceData(projectId = "local-project") {
   };
 }
 
+// src/ui/hooks/index.ts
+"use client";
+
+// src/visualizations/catalog.ts
+import {
+  defineVisualization,
+  VisualizationRegistry
+} from "@contractspec/lib.contracts-spec/visualizations";
+var ORDER_LIST_REF = {
+  key: "marketplace.order.list",
+  version: "1.0.0"
+};
+var PRODUCT_LIST_REF = {
+  key: "marketplace.product.list",
+  version: "1.0.0"
+};
+var META = {
+  version: "1.0.0",
+  domain: "marketplace",
+  stability: "experimental",
+  owners: ["@example.marketplace"],
+  tags: ["marketplace", "visualization", "commerce"]
+};
+var MarketplaceOrderStatusVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "marketplace.visualization.order-status",
+    title: "Order Status Breakdown",
+    description: "Distribution of current order states.",
+    goal: "Expose delivery and backlog mix at a glance.",
+    context: "Marketplace operations overview."
+  },
+  source: { primary: ORDER_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "pie",
+    nameDimension: "status",
+    valueMeasure: "orders",
+    dimensions: [
+      { key: "status", label: "Status", dataPath: "status", type: "category" }
+    ],
+    measures: [
+      { key: "orders", label: "Orders", dataPath: "orders", format: "number" }
+    ],
+    table: { caption: "Order counts by status." }
+  }
+});
+var MarketplaceCategoryValueVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "marketplace.visualization.category-value",
+    title: "Category Value Comparison",
+    description: "Catalog value by product category derived from current pricing and stock.",
+    goal: "Compare where the marketplace catalog is concentrated.",
+    context: "Merchandising overview."
+  },
+  source: { primary: PRODUCT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "bar",
+    xDimension: "category",
+    yMeasures: ["catalogValue"],
+    dimensions: [
+      {
+        key: "category",
+        label: "Category",
+        dataPath: "category",
+        type: "category"
+      }
+    ],
+    measures: [
+      {
+        key: "catalogValue",
+        label: "Catalog Value",
+        dataPath: "catalogValue",
+        format: "currency",
+        color: "#1d4ed8"
+      }
+    ],
+    table: { caption: "Catalog value by product category." }
+  }
+});
+var MarketplaceOrderActivityVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "marketplace.visualization.order-activity",
+    title: "Recent Order Activity",
+    description: "Daily order volume from recent order creation timestamps.",
+    goal: "Show recent order activity trends.",
+    context: "Commerce operations trend monitoring."
+  },
+  source: { primary: ORDER_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "line",
+    xDimension: "day",
+    yMeasures: ["orders"],
+    dimensions: [{ key: "day", label: "Day", dataPath: "day", type: "time" }],
+    measures: [
+      {
+        key: "orders",
+        label: "Orders",
+        dataPath: "orders",
+        format: "number",
+        color: "#0f766e"
+      }
+    ],
+    table: { caption: "Daily order counts." }
+  }
+});
+var MarketplaceVisualizationSpecs = [
+  MarketplaceOrderStatusVisualization,
+  MarketplaceCategoryValueVisualization,
+  MarketplaceOrderActivityVisualization
+];
+var MarketplaceVisualizationRegistry = new VisualizationRegistry([
+  ...MarketplaceVisualizationSpecs
+]);
+var MarketplaceVisualizationRefs = MarketplaceVisualizationSpecs.map((spec) => ({
+  key: spec.meta.key,
+  version: spec.meta.version
+}));
+
+// src/visualizations/selectors.ts
+function toDayKey(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return date.toISOString().slice(0, 10);
+}
+function createMarketplaceVisualizationItems(products, orders) {
+  const orderStatus = new Map;
+  const orderActivity = new Map;
+  const categoryValue = new Map;
+  for (const order of orders) {
+    orderStatus.set(order.status, (orderStatus.get(order.status) ?? 0) + 1);
+    const day = toDayKey(order.createdAt);
+    orderActivity.set(day, (orderActivity.get(day) ?? 0) + 1);
+  }
+  for (const product of products) {
+    const category = product.category ?? "Uncategorized";
+    categoryValue.set(category, (categoryValue.get(category) ?? 0) + product.price * product.stock);
+  }
+  return [
+    {
+      key: "marketplace-order-status",
+      spec: MarketplaceOrderStatusVisualization,
+      data: {
+        data: Array.from(orderStatus.entries()).map(([status, count]) => ({
+          status,
+          orders: count
+        }))
+      },
+      title: "Order Status Breakdown",
+      description: "Status mix across the current order set.",
+      height: 260
+    },
+    {
+      key: "marketplace-category-value",
+      spec: MarketplaceCategoryValueVisualization,
+      data: {
+        data: Array.from(categoryValue.entries()).sort(([, left], [, right]) => right - left).map(([category, value]) => ({
+          category,
+          catalogValue: value
+        }))
+      },
+      title: "Category Value Comparison",
+      description: "Derived from current product pricing and stock."
+    },
+    {
+      key: "marketplace-order-activity",
+      spec: MarketplaceOrderActivityVisualization,
+      data: {
+        data: Array.from(orderActivity.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([day, count]) => ({ day, orders: count }))
+      },
+      title: "Recent Order Activity",
+      description: "Daily order count from current order history."
+    }
+  ];
+}
+// src/ui/MarketplaceDashboard.visualizations.tsx
+import {
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function MarketplaceVisualizationOverview({
+  products,
+  orders
+}) {
+  const items = createMarketplaceVisualizationItems(products, orders);
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "space-y-3",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-semibold text-lg",
+            children: "Commerce Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Order and catalog trends exposed through shared visualization contracts."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VisualizationGrid, {
+        children: items.map((item) => /* @__PURE__ */ jsxDEV(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/ui/MarketplaceDashboard.tsx
-import { useState as useState2 } from "react";
 import {
   Button,
   ErrorState,
@@ -304,7 +277,8 @@ import {
   StatCard,
   StatCardGroup
 } from "@contractspec/lib.design-system";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { useState as useState2 } from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 var STATUS_COLORS = {
   ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
@@ -319,7 +293,7 @@ var STATUS_COLORS = {
   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 formatCurrency2(value, currency = "USD") {
+function formatCurrency(value, currency = "USD") {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency,
@@ -336,32 +310,32 @@ function MarketplaceDashboard() {
     { id: "orders", label: "Orders", icon: "\uD83D\uDED2" }
   ];
   if (loading) {
-    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+    return /* @__PURE__ */ jsxDEV2(LoaderBlock, {
       label: "Loading Marketplace..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV(ErrorState, {
+    return /* @__PURE__ */ jsxDEV2(ErrorState, {
       title: "Failed to load Marketplace",
       description: error.message,
       onRetry: refetch,
       retryLabel: "Retry"
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
-            className: "text-2xl font-bold",
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "font-bold text-2xl",
             children: "Marketplace"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(Button, {
+          /* @__PURE__ */ jsxDEV2(Button, {
             onClick: () => alert("Create store modal"),
             children: [
-              /* @__PURE__ */ jsxDEV("span", {
+              /* @__PURE__ */ jsxDEV2("span", {
                 className: "mr-2",
                 children: "+"
               }, undefined, false, undefined, this),
@@ -370,108 +344,112 @@ function MarketplaceDashboard() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(StatCardGroup, {
+      /* @__PURE__ */ jsxDEV2(StatCardGroup, {
         children: [
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Stores",
             value: stats.totalStores,
             hint: `${stats.activeStores} active`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Products",
             value: stats.totalProducts,
             hint: "listed"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Orders",
             value: stats.totalOrders,
             hint: `${stats.pendingOrders} pending`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV2(StatCard, {
             label: "Revenue",
-            value: formatCurrency2(stats.totalRevenue),
+            value: formatCurrency(stats.totalRevenue),
             hint: "total"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("nav", {
-        className: "bg-muted flex gap-1 rounded-lg p-1",
+      /* @__PURE__ */ jsxDEV2(MarketplaceVisualizationOverview, {
+        orders,
+        products
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("nav", {
+        className: "flex gap-1 rounded-lg bg-muted p-1",
         role: "tablist",
-        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV(Button, {
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV2(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"}`,
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
           children: [
-            /* @__PURE__ */ jsxDEV("span", {
+            /* @__PURE__ */ jsxDEV2("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "stores" && /* @__PURE__ */ jsxDEV("div", {
-            className: "border-border rounded-lg border",
-            children: /* @__PURE__ */ jsxDEV("table", {
+          activeTab === "stores" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "rounded-lg border border-border",
+            children: /* @__PURE__ */ jsxDEV2("table", {
               className: "w-full",
               children: [
-                /* @__PURE__ */ jsxDEV("thead", {
-                  className: "border-border bg-muted/30 border-b",
-                  children: /* @__PURE__ */ jsxDEV("tr", {
+                /* @__PURE__ */ jsxDEV2("thead", {
+                  className: "border-border border-b bg-muted/30",
+                  children: /* @__PURE__ */ jsxDEV2("tr", {
                     children: [
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Store"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Status"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Rating"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Reviews"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("tbody", {
-                  className: "divide-border divide-y",
+                /* @__PURE__ */ jsxDEV2("tbody", {
+                  className: "divide-y divide-border",
                   children: [
-                    stores.map((store) => /* @__PURE__ */ jsxDEV("tr", {
+                    stores.map((store) => /* @__PURE__ */ jsxDEV2("tr", {
                       className: "hover:bg-muted/50",
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
                           children: [
-                            /* @__PURE__ */ jsxDEV("div", {
+                            /* @__PURE__ */ jsxDEV2("div", {
                               className: "font-medium",
                               children: store.name
                             }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV("div", {
+                            /* @__PURE__ */ jsxDEV2("div", {
                               className: "text-muted-foreground text-sm",
                               children: store.description
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV("span", {
-                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[store.status] ?? ""}`,
+                          children: /* @__PURE__ */ jsxDEV2("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${STATUS_COLORS[store.status] ?? ""}`,
                             children: store.status
                           }, undefined, false, undefined, this)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV("span", {
+                          children: /* @__PURE__ */ jsxDEV2("span", {
                             className: "flex items-center gap-1",
                             children: [
                               "⭐ ",
@@ -479,8 +457,8 @@ function MarketplaceDashboard() {
                             ]
                           }, undefined, true, undefined, this)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
-                          className: "text-muted-foreground px-4 py-3 text-sm",
+                        /* @__PURE__ */ jsxDEV2("td", {
+                          className: "px-4 py-3 text-muted-foreground text-sm",
                           children: [
                             store.reviewCount,
                             " reviews"
@@ -488,10 +466,10 @@ function MarketplaceDashboard() {
                         }, undefined, true, undefined, this)
                       ]
                     }, store.id, true, undefined, this)),
-                    stores.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
-                      children: /* @__PURE__ */ jsxDEV("td", {
+                    stores.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
+                      children: /* @__PURE__ */ jsxDEV2("td", {
                         colSpan: 4,
-                        className: "text-muted-foreground px-4 py-8 text-center",
+                        className: "px-4 py-8 text-center text-muted-foreground",
                         children: "No stores found"
                       }, undefined, false, undefined, this)
                     }, undefined, false, undefined, this)
@@ -500,74 +478,74 @@ function MarketplaceDashboard() {
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          activeTab === "products" && /* @__PURE__ */ jsxDEV("div", {
-            className: "border-border rounded-lg border",
-            children: /* @__PURE__ */ jsxDEV("table", {
+          activeTab === "products" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "rounded-lg border border-border",
+            children: /* @__PURE__ */ jsxDEV2("table", {
               className: "w-full",
               children: [
-                /* @__PURE__ */ jsxDEV("thead", {
-                  className: "border-border bg-muted/30 border-b",
-                  children: /* @__PURE__ */ jsxDEV("tr", {
+                /* @__PURE__ */ jsxDEV2("thead", {
+                  className: "border-border border-b bg-muted/30",
+                  children: /* @__PURE__ */ jsxDEV2("tr", {
                     children: [
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Product"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Price"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Stock"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Status"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("tbody", {
-                  className: "divide-border divide-y",
+                /* @__PURE__ */ jsxDEV2("tbody", {
+                  className: "divide-y divide-border",
                   children: [
-                    products.map((product) => /* @__PURE__ */ jsxDEV("tr", {
+                    products.map((product) => /* @__PURE__ */ jsxDEV2("tr", {
                       className: "hover:bg-muted/50",
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
                           children: [
-                            /* @__PURE__ */ jsxDEV("div", {
+                            /* @__PURE__ */ jsxDEV2("div", {
                               className: "font-medium",
                               children: product.name
                             }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV("div", {
+                            /* @__PURE__ */ jsxDEV2("div", {
                               className: "text-muted-foreground text-sm",
                               children: product.category
                             }, undefined, false, undefined, this)
                           ]
                         }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 font-mono",
-                          children: formatCurrency2(product.price, product.currency)
+                          children: formatCurrency(product.price, product.currency)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
                           children: product.stock
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV("span", {
-                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[product.status] ?? ""}`,
+                          children: /* @__PURE__ */ jsxDEV2("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${STATUS_COLORS[product.status] ?? ""}`,
                             children: product.status
                           }, undefined, false, undefined, this)
                         }, undefined, false, undefined, this)
                       ]
                     }, product.id, true, undefined, this)),
-                    products.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
-                      children: /* @__PURE__ */ jsxDEV("td", {
+                    products.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
+                      children: /* @__PURE__ */ jsxDEV2("td", {
                         colSpan: 4,
-                        className: "text-muted-foreground px-4 py-8 text-center",
+                        className: "px-4 py-8 text-center text-muted-foreground",
                         children: "No products found"
                       }, undefined, false, undefined, this)
                     }, undefined, false, undefined, this)
@@ -576,73 +554,73 @@ function MarketplaceDashboard() {
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          activeTab === "orders" && /* @__PURE__ */ jsxDEV("div", {
-            className: "border-border rounded-lg border",
-            children: /* @__PURE__ */ jsxDEV("table", {
+          activeTab === "orders" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "rounded-lg border border-border",
+            children: /* @__PURE__ */ jsxDEV2("table", {
               className: "w-full",
               children: [
-                /* @__PURE__ */ jsxDEV("thead", {
-                  className: "border-border bg-muted/30 border-b",
-                  children: /* @__PURE__ */ jsxDEV("tr", {
+                /* @__PURE__ */ jsxDEV2("thead", {
+                  className: "border-border border-b bg-muted/30",
+                  children: /* @__PURE__ */ jsxDEV2("tr", {
                     children: [
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Order ID"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Customer"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Total"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Status"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "px-4 py-3 text-left font-medium text-sm",
                         children: "Date"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("tbody", {
-                  className: "divide-border divide-y",
+                /* @__PURE__ */ jsxDEV2("tbody", {
+                  className: "divide-y divide-border",
                   children: [
-                    orders.map((order) => /* @__PURE__ */ jsxDEV("tr", {
+                    orders.map((order) => /* @__PURE__ */ jsxDEV2("tr", {
                       className: "hover:bg-muted/50",
                       children: [
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 font-mono text-sm",
                           children: order.id
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 text-sm",
                           children: order.customerId
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3 font-mono",
-                          children: formatCurrency2(order.total, order.currency)
+                          children: formatCurrency(order.total, order.currency)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
+                        /* @__PURE__ */ jsxDEV2("td", {
                           className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV("span", {
-                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[order.status] ?? ""}`,
+                          children: /* @__PURE__ */ jsxDEV2("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${STATUS_COLORS[order.status] ?? ""}`,
                             children: order.status
                           }, undefined, false, undefined, this)
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("td", {
-                          className: "text-muted-foreground px-4 py-3 text-sm",
+                        /* @__PURE__ */ jsxDEV2("td", {
+                          className: "px-4 py-3 text-muted-foreground text-sm",
                           children: order.createdAt.toLocaleDateString()
                         }, undefined, false, undefined, this)
                       ]
                     }, order.id, true, undefined, this)),
-                    orders.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
-                      children: /* @__PURE__ */ jsxDEV("td", {
+                    orders.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
+                      children: /* @__PURE__ */ jsxDEV2("td", {
                         colSpan: 5,
-                        className: "text-muted-foreground px-4 py-8 text-center",
+                        className: "px-4 py-8 text-center text-muted-foreground",
                         children: "No orders found"
                       }, undefined, false, undefined, this)
                     }, undefined, false, undefined, this)
@@ -657,8 +635,261 @@ function MarketplaceDashboard() {
   }, undefined, true, undefined, this);
 }
 
-// src/ui/hooks/index.ts
-"use client";
+// src/ui/renderers/marketplace.markdown.ts
+var mockStores = [
+  {
+    id: "store-1",
+    name: "Tech Gadgets Store",
+    status: "ACTIVE",
+    productCount: 45,
+    rating: 4.8
+  },
+  {
+    id: "store-2",
+    name: "Home & Garden",
+    status: "ACTIVE",
+    productCount: 120,
+    rating: 4.5
+  },
+  {
+    id: "store-3",
+    name: "Fashion Boutique",
+    status: "PENDING",
+    productCount: 0,
+    rating: 0
+  }
+];
+var mockProducts = [
+  {
+    id: "prod-1",
+    name: "Wireless Earbuds",
+    storeId: "store-1",
+    category: "Electronics",
+    price: 79.99,
+    currency: "USD",
+    status: "ACTIVE",
+    stock: 150
+  },
+  {
+    id: "prod-2",
+    name: "Smart Watch",
+    storeId: "store-1",
+    category: "Wearables",
+    price: 249.99,
+    currency: "USD",
+    status: "ACTIVE",
+    stock: 50
+  },
+  {
+    id: "prod-3",
+    name: "Garden Tools Set",
+    storeId: "store-2",
+    category: "Garden",
+    price: 89.99,
+    currency: "USD",
+    status: "ACTIVE",
+    stock: 30
+  },
+  {
+    id: "prod-4",
+    name: "Indoor Plant Kit",
+    storeId: "store-2",
+    category: "Garden",
+    price: 45.99,
+    currency: "USD",
+    status: "ACTIVE",
+    stock: 75
+  },
+  {
+    id: "prod-5",
+    name: "LED Desk Lamp",
+    storeId: "store-1",
+    category: "Home Office",
+    price: 34.99,
+    currency: "USD",
+    status: "OUT_OF_STOCK",
+    stock: 0
+  }
+];
+var mockOrders = [
+  {
+    id: "ord-1",
+    storeId: "store-1",
+    customerId: "cust-1",
+    total: 329.98,
+    currency: "USD",
+    status: "DELIVERED",
+    itemCount: 2,
+    createdAt: "2024-01-15T10:00:00Z"
+  },
+  {
+    id: "ord-2",
+    storeId: "store-2",
+    customerId: "cust-2",
+    total: 135.98,
+    currency: "USD",
+    status: "SHIPPED",
+    itemCount: 2,
+    createdAt: "2024-01-14T14:00:00Z"
+  },
+  {
+    id: "ord-3",
+    storeId: "store-1",
+    customerId: "cust-3",
+    total: 79.99,
+    currency: "USD",
+    status: "PROCESSING",
+    itemCount: 1,
+    createdAt: "2024-01-16T08:00:00Z"
+  },
+  {
+    id: "ord-4",
+    storeId: "store-2",
+    customerId: "cust-4",
+    total: 45.99,
+    currency: "USD",
+    status: "PENDING",
+    itemCount: 1,
+    createdAt: "2024-01-16T12:00:00Z"
+  }
+];
+function formatCurrency2(value, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2
+  }).format(value);
+}
+var marketplaceDashboardMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "MarketplaceDashboard") {
+      throw new Error("marketplaceDashboardMarkdownRenderer: not MarketplaceDashboard");
+    }
+    const stores = mockStores;
+    const products = mockProducts;
+    const orders = mockOrders;
+    const visualizationItems = createMarketplaceVisualizationItems(products, orders);
+    const activeStores = stores.filter((s) => s.status === "ACTIVE");
+    const activeProducts = products.filter((p) => p.status === "ACTIVE");
+    const totalRevenue = orders.reduce((sum, o) => sum + o.total, 0);
+    const pendingOrders = orders.filter((o) => o.status === "PENDING" || o.status === "PROCESSING");
+    const lines = [
+      "# Marketplace Dashboard",
+      "",
+      "> Two-sided marketplace overview",
+      "",
+      "## Summary",
+      "",
+      "| Metric | Value |",
+      "|--------|-------|",
+      `| Active Stores | ${activeStores.length} |`,
+      `| Active Products | ${activeProducts.length} |`,
+      `| Total Orders | ${orders.length} |`,
+      `| Total Revenue | ${formatCurrency2(totalRevenue)} |`,
+      `| Pending Orders | ${pendingOrders.length} |`,
+      "",
+      "## Visualization Overview",
+      ""
+    ];
+    for (const item of visualizationItems) {
+      lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+    }
+    lines.push("");
+    lines.push("## Top Stores");
+    lines.push("");
+    lines.push("| Store | Products | Rating | Status |");
+    lines.push("|-------|----------|--------|--------|");
+    for (const store of stores.slice(0, 5)) {
+      lines.push(`| ${store.name} | ${store.productCount} | ⭐ ${store.rating || "N/A"} | ${store.status} |`);
+    }
+    lines.push("");
+    lines.push("## Recent Orders");
+    lines.push("");
+    lines.push("| Order | Items | Total | Status | Date |");
+    lines.push("|-------|-------|-------|--------|------|");
+    for (const order of orders.slice(0, 10)) {
+      const date = new Date(order.createdAt).toLocaleDateString();
+      lines.push(`| ${order.id} | ${order.itemCount} | ${formatCurrency2(order.total, order.currency)} | ${order.status} | ${date} |`);
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+var productCatalogMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "ProductCatalog") {
+      throw new Error("productCatalogMarkdownRenderer: not ProductCatalog");
+    }
+    const products = mockProducts;
+    const stores = mockStores;
+    const lines = [
+      "# Product Catalog",
+      "",
+      "> Browse products across all marketplace stores",
+      ""
+    ];
+    for (const store of stores.filter((s) => s.status === "ACTIVE")) {
+      const storeProducts = products.filter((p) => p.storeId === store.id);
+      if (storeProducts.length === 0)
+        continue;
+      lines.push(`## ${store.name}`);
+      lines.push("");
+      lines.push("| Product | Price | Stock | Status |");
+      lines.push("|---------|-------|-------|--------|");
+      for (const product of storeProducts) {
+        const stockStatus = product.stock > 0 ? `${product.stock} in stock` : "Out of stock";
+        lines.push(`| ${product.name} | ${formatCurrency2(product.price, product.currency)} | ${stockStatus} | ${product.status} |`);
+      }
+      lines.push("");
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+var orderListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "OrderList") {
+      throw new Error("orderListMarkdownRenderer: not OrderList");
+    }
+    const orders = mockOrders;
+    const stores = mockStores;
+    const lines = [
+      "# Orders",
+      "",
+      "> Manage marketplace orders",
+      "",
+      "| Order ID | Store | Items | Total | Status | Created |",
+      "|----------|-------|-------|-------|--------|---------|"
+    ];
+    for (const order of orders) {
+      const store = stores.find((s) => s.id === order.storeId);
+      const date = new Date(order.createdAt).toLocaleDateString();
+      lines.push(`| ${order.id} | ${store?.name ?? "Unknown"} | ${order.itemCount} | ${formatCurrency2(order.total, order.currency)} | ${order.status} | ${date} |`);
+    }
+    lines.push("");
+    lines.push("## Order Status Legend");
+    lines.push("");
+    lines.push("- **PENDING**: Awaiting payment confirmation");
+    lines.push("- **PROCESSING**: Being prepared");
+    lines.push("- **SHIPPED**: In transit");
+    lines.push("- **DELIVERED**: Order completed");
+    lines.push("- **CANCELLED**: Order cancelled");
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
 export {
   useMarketplaceData,
   productCatalogMarkdownRenderer,