@elizaos/plugin-shopify-ui 2.0.3-beta.5 → 2.0.3-beta.7

package/dist/ShopifyAppView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ShopifyAppView.tsx"],"sourcesContent":["import type { OverlayAppContext } from \"@elizaos/ui\";\nimport {\n  Badge,\n  Button,\n  Skeleton,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@elizaos/ui\";\nimport { useAgentElement } from \"@elizaos/ui/agent-surface\";\nimport {\n  AlertTriangle,\n  BarChart3,\n  ChevronLeft,\n  Globe2,\n  KeyRound,\n  type LucideIcon,\n  Package,\n  ShoppingBag,\n  ShoppingCart,\n  Store,\n  Users,\n  Wifi,\n  WifiOff,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { CustomersPanel } from \"./CustomersPanel.js\";\nimport { InventoryLevelsPanel } from \"./InventoryLevelsPanel.js\";\nimport { OrdersPanel } from \"./OrdersPanel.js\";\nimport { ProductsPanel } from \"./ProductsPanel.js\";\nimport { StoreOverviewCard } from \"./StoreOverviewCard.js\";\nimport { useShopifyDashboard } from \"./useShopifyDashboard.js\";\n\nconst SH_ACCENT = \"var(--accent, #ff8a24)\";\nconst SH_TXT = \"var(--txt, #111)\";\nconst SH_MUTED = \"var(--muted, rgba(0,0,0,0.58))\";\n\nfunction SetupField({\n  icon: Icon,\n  label,\n  description,\n  envHint,\n}: {\n  icon: LucideIcon;\n  label: string;\n  description: string;\n  envHint: string;\n}) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 12,\n        padding: \"10px 2px\",\n      }}\n    >\n      <span\n        style={{\n          width: 34,\n          height: 34,\n          flexShrink: 0,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          color: SH_ACCENT,\n        }}\n      >\n        <Icon className=\"h-4 w-4\" />\n      </span>\n      <span\n        style={{\n          minWidth: 0,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 2,\n        }}\n      >\n        <span style={{ fontSize: 13.5, fontWeight: 600, color: SH_TXT }}>\n          {label}\n        </span>\n        <span\n          className=\"sr-only\"\n          style={{ fontSize: 12, color: SH_MUTED, lineHeight: 1.4 }}\n        >\n          {description}\n        </span>\n        <code\n          style={{\n            marginTop: 3,\n            fontSize: 10.5,\n            color: SH_MUTED,\n            opacity: 0.75,\n            fontFamily: \"ui-monospace, monospace\",\n          }}\n        >\n          {envHint}\n        </code>\n      </span>\n    </div>\n  );\n}\n\nfunction ShopifySetupCard() {\n  return (\n    <div className=\"mx-auto w-full max-w-md\">\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          textAlign: \"center\",\n          gap: 6,\n          marginBottom: 18,\n        }}\n      >\n        <div\n          style={{\n            width: 84,\n            height: 84,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n          }}\n        >\n          <ShoppingBag style={{ width: 38, height: 38, color: SH_ACCENT }} />\n        </div>\n        <h2\n          style={{\n            margin: \"12px 0 0\",\n            fontSize: 20,\n            fontWeight: 700,\n            color: SH_TXT,\n          }}\n        >\n          Connect your store\n        </h2>\n        <p\n          className=\"sr-only\"\n          style={{\n            margin: 0,\n            maxWidth: 320,\n            fontSize: 13.5,\n            color: SH_MUTED,\n            lineHeight: 1.5,\n          }}\n        >\n          Link a Shopify store to manage products, orders, and inventory right\n          here.\n        </p>\n      </div>\n\n      <div\n        style={{\n          padding: 4,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 10,\n        }}\n      >\n        <SetupField\n          icon={Globe2}\n          label=\"Store domain\"\n          description=\"Your shop address, e.g. mystore.myshopify.com\"\n          envHint=\"SHOPIFY_STORE_DOMAIN\"\n        />\n        <SetupField\n          icon={KeyRound}\n          label=\"Access token\"\n          description=\"Admin API token with product, order & inventory scopes\"\n          envHint=\"SHOPIFY_ACCESS_TOKEN\"\n        />\n\n        <div\n          style={{\n            display: \"flex\",\n            flexWrap: \"wrap\",\n            gap: 6,\n            padding: \"2px 2px 6px\",\n          }}\n        >\n          {[\n            { label: \"Products\", icon: Package },\n            { label: \"Orders\", icon: ShoppingCart },\n            { label: \"Stock\", icon: BarChart3 },\n          ].map(({ label, icon: Icon }) => (\n            <span\n              key={label}\n              style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: 6,\n                padding: \"3px 0\",\n                fontSize: 12,\n                fontWeight: 600,\n                color: SH_TXT,\n              }}\n            >\n              <Icon style={{ width: 13, height: 13, color: SH_MUTED }} />\n              {label}\n            </span>\n          ))}\n        </div>\n\n        <a\n          href=\"/settings\"\n          style={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            gap: 8,\n            height: 42,\n            background: SH_ACCENT,\n            color: \"var(--accent-foreground, #fff)\",\n            fontSize: 14,\n            fontWeight: 600,\n            textDecoration: \"none\",\n          }}\n        >\n          <Store className=\"h-4 w-4\" />\n          Settings\n        </a>\n      </div>\n    </div>\n  );\n}\n\nfunction ConnectionStatus({\n  connected,\n  loading,\n  domain,\n}: {\n  connected: boolean;\n  loading: boolean;\n  domain?: string;\n}) {\n  if (loading) {\n    return <Skeleton className=\"h-6 w-24\" />;\n  }\n\n  if (connected && domain) {\n    return (\n      <div className=\"flex items-center gap-1.5 px-1 py-1\">\n        <Wifi className=\"h-3.5 w-3.5 text-ok\" />\n        <span className=\"max-w-[10rem] truncate text-xs font-medium text-ok\">\n          {domain}\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center gap-1.5 px-1 py-1\">\n      <WifiOff className=\"h-3.5 w-3.5 text-danger\" />\n      <span className=\"text-xs font-medium text-danger\">Offline</span>\n    </div>\n  );\n}\n\ntype DashboardTab =\n  | \"overview\"\n  | \"products\"\n  | \"orders\"\n  | \"inventory\"\n  | \"customers\";\n\nconst DASHBOARD_TABS: {\n  value: DashboardTab;\n  label: string;\n  icon: LucideIcon;\n}[] = [\n  { value: \"overview\", label: \"Overview\", icon: BarChart3 },\n  { value: \"products\", label: \"Products\", icon: Package },\n  { value: \"orders\", label: \"Orders\", icon: ShoppingCart },\n  { value: \"inventory\", label: \"Inventory\", icon: BarChart3 },\n  { value: \"customers\", label: \"Customers\", icon: Users },\n];\n\nfunction ShopifyDashboardTabTrigger({\n  value,\n  label,\n  icon: Icon,\n  active,\n}: {\n  value: DashboardTab;\n  label: string;\n  icon: LucideIcon;\n  active: boolean;\n}) {\n  const { ref, agentProps } = useAgentElement<HTMLButtonElement>({\n    id: `tab-${value}`,\n    role: \"tab\",\n    label,\n    group: \"dashboard-tabs\",\n    status: active ? \"active\" : \"inactive\",\n    description: `Show the ${label} tab`,\n  });\n  return (\n    <TabsTrigger\n      ref={ref}\n      value={value}\n      className=\"h-9 w-9 gap-0 px-0 sm:w-auto sm:gap-1.5 sm:px-3\"\n      aria-current={active ? \"true\" : undefined}\n      title={label}\n      {...agentProps}\n    >\n      <Icon className=\"h-3.5 w-3.5\" />\n      <span className=\"hidden sm:inline\">{label}</span>\n    </TabsTrigger>\n  );\n}\n\nfunction OverviewTile({\n  icon: Icon,\n  label,\n  value,\n  accent,\n  onClick,\n}: {\n  icon: LucideIcon;\n  label: string;\n  value: string;\n  accent: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className=\"group flex min-h-20 items-start gap-3 px-2 py-2 text-left transition-colors hover:bg-bg-muted/20\"\n      title={label}\n    >\n      <span\n        className={`flex h-9 w-9 shrink-0 items-center justify-center ${accent}`}\n      >\n        <Icon className=\"h-4 w-4\" />\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-2xl font-semibold leading-none text-txt\">\n          {value}\n        </span>\n        <span className=\"mt-2 block truncate text-xs font-medium text-muted\">\n          {label}\n        </span>\n      </span>\n    </button>\n  );\n}\n\nexport function ShopifyAppView({ exitToApps }: OverlayAppContext) {\n  const [activeTab, setActiveTab] = useState<DashboardTab>(\"overview\");\n\n  const {\n    status,\n    statusLoading,\n    statusError,\n\n    products,\n    productsTotal,\n    productsPage,\n    productsLoading,\n    productsError,\n    productSearch,\n    setProductsPage,\n\n    orders,\n    ordersTotal,\n    ordersLoading,\n    ordersError,\n    orderStatusFilter,\n    setOrderStatusFilter,\n\n    inventoryItems,\n    inventoryLocations,\n    inventoryLoading,\n    inventoryError,\n\n    customers,\n    customersTotal,\n    customersLoading,\n    customersError,\n    customerSearch,\n\n    counts,\n  } = useShopifyDashboard();\n\n  const connected = status?.connected ?? false;\n  const shop = status?.shop ?? null;\n  const lowInventoryItems = inventoryItems.filter(\n    (item) => item.available <= 5,\n  );\n  const urgentInventoryCount = lowInventoryItems.filter(\n    (item) => item.available === 0,\n  ).length;\n\n  const backButton = useAgentElement<HTMLButtonElement>({\n    id: \"action-back\",\n    role: \"button\",\n    label: \"Back to apps\",\n    group: \"header\",\n    description: \"Exit the Shopify dashboard and return to the apps grid\",\n  });\n  const viewAllOrdersButton = useAgentElement<HTMLButtonElement>({\n    id: \"overview-view-all-orders\",\n    role: \"button\",\n    label: \"View all orders\",\n    group: \"overview\",\n    description: \"Jump to the orders tab from the overview summary\",\n    onActivate: () => setActiveTab(\"orders\"),\n  });\n  const viewAllInventoryButton = useAgentElement<HTMLButtonElement>({\n    id: \"overview-view-inventory\",\n    role: \"button\",\n    label: \"View inventory\",\n    group: \"overview\",\n    description: \"Jump to the inventory tab from the overview summary\",\n    onActivate: () => setActiveTab(\"inventory\"),\n  });\n\n  return (\n    <div\n      data-testid=\"shopify-shell\"\n      className=\"fixed inset-0 z-50 flex flex-col overflow-hidden bg-bg pb-[var(--safe-area-bottom,0px)] pl-[var(--safe-area-left,0px)] pr-[var(--safe-area-right,0px)] pt-[var(--safe-area-top,0px)] supports-[height:100dvh]:h-[100dvh]\"\n    >\n      <div className=\"flex shrink-0 items-center gap-3 px-3 py-2\">\n        <Button\n          ref={backButton.ref}\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={exitToApps}\n          className=\"h-8 w-8 shrink-0\"\n          aria-label=\"Back to apps\"\n          {...backButton.agentProps}\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span\n            className=\"flex h-8 w-8 shrink-0 items-center justify-center\"\n            style={{\n              color: SH_ACCENT,\n            }}\n          >\n            <Store className=\"h-4 w-4\" />\n          </span>\n          <span className=\"truncate text-sm font-semibold text-txt\">\n            {shop?.name ?? \"Shopify\"}\n          </span>\n        </div>\n\n        <div className=\"flex-1\" />\n\n        <ConnectionStatus\n          connected={connected}\n          loading={statusLoading}\n          domain={shop?.domain}\n        />\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-y-auto pb-[calc(7rem+var(--safe-area-bottom,0px))]\">\n        {statusError ? (\n          <div className=\"m-3 px-1 py-2 text-sm text-danger\">{statusError}</div>\n        ) : null}\n\n        {!statusLoading && !connected ? (\n          <div className=\"flex min-h-full items-center justify-center px-4 py-10\">\n            <ShopifySetupCard />\n          </div>\n        ) : statusLoading && !connected ? (\n          <div className=\"flex min-h-full items-center justify-center\">\n            <Skeleton className=\"mx-4 h-80 w-full max-w-lg\" />\n          </div>\n        ) : (\n          <div className=\"mx-auto w-full max-w-3xl px-4 py-4\">\n            <Tabs\n              value={activeTab}\n              onValueChange={(v) => setActiveTab(v as DashboardTab)}\n            >\n              <TabsList className=\"sticky top-3 z-10 mb-3 h-auto w-full justify-between gap-1 bg-transparent p-0 sm:w-auto sm:justify-start\">\n                {DASHBOARD_TABS.map((tab) => (\n                  <ShopifyDashboardTabTrigger\n                    key={tab.value}\n                    value={tab.value}\n                    label={tab.label}\n                    icon={tab.icon}\n                    active={activeTab === tab.value}\n                  />\n                ))}\n              </TabsList>\n\n              <TabsContent value=\"overview\">\n                <div className=\"space-y-4\">\n                  {shop ? <StoreOverviewCard shop={shop} /> : null}\n\n                  <div className=\"grid gap-2 sm:grid-cols-2\">\n                    <OverviewTile\n                      icon={Package}\n                      label=\"Products\"\n                      value={counts.productCount.toLocaleString()}\n                      accent=\"text-muted-strong\"\n                      onClick={() => setActiveTab(\"products\")}\n                    />\n                    <OverviewTile\n                      icon={ShoppingCart}\n                      label=\"Orders\"\n                      value={counts.orderCount.toLocaleString()}\n                      accent=\"text-muted-strong\"\n                      onClick={() => setActiveTab(\"orders\")}\n                    />\n                    <OverviewTile\n                      icon={AlertTriangle}\n                      label=\"Low stock\"\n                      value={lowInventoryItems.length.toLocaleString()}\n                      accent={\n                        urgentInventoryCount > 0 ? \"text-danger\" : \"text-warn\"\n                      }\n                      onClick={() => setActiveTab(\"inventory\")}\n                    />\n                    <OverviewTile\n                      icon={Users}\n                      label=\"Customers\"\n                      value={counts.customerCount.toLocaleString()}\n                      accent=\"text-muted-strong\"\n                      onClick={() => setActiveTab(\"customers\")}\n                    />\n                  </div>\n\n                  <div className=\"space-y-3\">\n                    <div className=\"px-2 py-2\">\n                      <div className=\"flex items-center justify-between gap-2\">\n                        <span\n                          className=\"inline-flex h-8 w-8 items-center justify-center text-muted-strong\"\n                          title=\"Recent orders\"\n                        >\n                          <ShoppingCart className=\"h-4 w-4\" aria-hidden />\n                        </span>\n                        {ordersTotal > 3 ? (\n                          <Button\n                            ref={viewAllOrdersButton.ref}\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"h-7 px-2 text-xs-tight\"\n                            onClick={() => setActiveTab(\"orders\")}\n                            title={`View all ${ordersTotal.toLocaleString()} orders`}\n                            {...viewAllOrdersButton.agentProps}\n                          >\n                            +{(ordersTotal - 3).toLocaleString()}\n                          </Button>\n                        ) : null}\n                      </div>\n                      <div className=\"mt-2 space-y-1.5\">\n                        {ordersLoading && orders.length === 0 ? (\n                          <>\n                            <Skeleton className=\"h-8 w-full\" />\n                            <Skeleton className=\"h-8 w-full\" />\n                            <Skeleton className=\"h-8 w-full\" />\n                          </>\n                        ) : (\n                          orders.slice(0, 3).map((order) => (\n                            <div\n                              key={order.id}\n                              className=\"grid grid-cols-[5rem_minmax(0,1fr)_auto] items-center gap-2 px-2 py-1.5\"\n                            >\n                              <span className=\"text-xs font-semibold text-txt\">\n                                {order.name}\n                              </span>\n                              <span className=\"truncate text-xs-tight text-muted\">\n                                {order.email}\n                              </span>\n                              <span className=\"shrink-0 text-xs font-semibold text-txt\">\n                                {order.totalPrice} {order.currencyCode}\n                              </span>\n                            </div>\n                          ))\n                        )}\n                        {orders.length === 0 && !ordersLoading ? (\n                          <p className=\"text-xs text-muted\">None</p>\n                        ) : null}\n                      </div>\n                    </div>\n\n                    <div className=\"px-2 py-2\">\n                      <div className=\"flex items-center justify-between gap-2\">\n                        <span\n                          className=\"inline-flex h-8 w-8 items-center justify-center text-muted-strong\"\n                          title=\"Low inventory\"\n                        >\n                          <Package className=\"h-4 w-4\" aria-hidden />\n                        </span>\n                        {lowInventoryItems.length > 3 ? (\n                          <Button\n                            ref={viewAllInventoryButton.ref}\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"h-7 px-2 text-xs-tight\"\n                            onClick={() => setActiveTab(\"inventory\")}\n                            title=\"View inventory\"\n                            {...viewAllInventoryButton.agentProps}\n                          >\n                            +{(lowInventoryItems.length - 3).toLocaleString()}\n                          </Button>\n                        ) : null}\n                      </div>\n                      <div className=\"mt-2 space-y-1.5\">\n                        {inventoryLoading && inventoryItems.length === 0 ? (\n                          <>\n                            <Skeleton className=\"h-8 w-full\" />\n                            <Skeleton className=\"h-8 w-full\" />\n                          </>\n                        ) : (\n                          lowInventoryItems.slice(0, 3).map((item) => (\n                            <div\n                              key={`${item.id}:${item.locationName}`}\n                              className=\"flex items-center justify-between gap-2 px-2 py-1.5\"\n                            >\n                              <span className=\"min-w-0 flex-1 truncate text-xs font-semibold text-txt\">\n                                {item.productTitle}\n                                {item.variantTitle\n                                  ? ` — ${item.variantTitle}`\n                                  : \"\"}\n                              </span>\n                              <Badge\n                                variant={\n                                  item.available === 0\n                                    ? \"destructive\"\n                                    : \"secondary\"\n                                }\n                                className=\"shrink-0 text-2xs\"\n                              >\n                                {item.available}\n                              </Badge>\n                            </div>\n                          ))\n                        )}\n                        {lowInventoryItems.length === 0 && !inventoryLoading ? (\n                          <p className=\"text-xs text-muted\">\n                            Stock levels look good.\n                          </p>\n                        ) : null}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </TabsContent>\n\n              <TabsContent value=\"products\">\n                <ProductsPanel\n                  products={products}\n                  total={productsTotal}\n                  page={productsPage}\n                  loading={productsLoading}\n                  error={productsError}\n                  search={productSearch}\n                  onPageChange={setProductsPage}\n                />\n              </TabsContent>\n\n              <TabsContent value=\"orders\">\n                <OrdersPanel\n                  orders={orders}\n                  total={ordersTotal}\n                  loading={ordersLoading}\n                  error={ordersError}\n                  statusFilter={orderStatusFilter}\n                  onStatusFilterChange={setOrderStatusFilter}\n                />\n              </TabsContent>\n\n              <TabsContent value=\"inventory\">\n                <InventoryLevelsPanel\n                  items={inventoryItems}\n                  locations={inventoryLocations}\n                  loading={inventoryLoading}\n                  error={inventoryError}\n                />\n              </TabsContent>\n\n              <TabsContent value=\"customers\">\n                <CustomersPanel\n                  customers={customers}\n                  total={customersTotal}\n                  loading={customersLoading}\n                  error={customersError}\n                  search={customerSearch}\n                />\n              </TabsContent>\n            </Tabs>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ShopifyView.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ShopifyView — the single GUI/XR data wrapper for the Shopify surface.
+ *
+ * It owns the live store data (status / products / orders / inventory /
+ * customers polling via {@link useShopifyDashboard}, tab selection, search and
+ * filter state, pagination, and product creation) and renders the one
+ * presentational {@link ShopifySpatialView} inside a {@link SpatialSurface}.
+ * Omitting the `modality` prop lets `SpatialSurface` auto-detect GUI vs XR, so
+ * the SAME component serves both surfaces. The TUI surface renders the same
+ * `ShopifySpatialView` through the terminal registry (see
+ * `register-terminal-view.tsx`).
+ *
+ * The full-screen overlay app (`ShopifyAppView`, registered via `shopify-app.ts`)
+ * keeps its own richer Tabs/dialog chrome; this wrapper is the view-manager
+ * surface drawn from the cross-modal spatial source of truth.
+ */
+export declare function ShopifyView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShopifyView.d.ts.map

package/dist/ShopifyView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShopifyView.d.ts","sourceRoot":"","sources":["../src/ShopifyView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAWH,wBAAgB,WAAW,4CA6J1B"}

package/dist/ShopifyView.js

@@ -0,0 +1,143 @@
+import { jsx } from "react/jsx-runtime";
+import { SpatialSurface } from "@elizaos/ui/spatial";
+import { useCallback, useState } from "react";
+import {
+  ShopifySpatialView
+} from "./components/ShopifySpatialView.js";
+import { useShopifyDashboard } from "./useShopifyDashboard.js";
+function ShopifyView() {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [createTitle, setCreateTitle] = useState("");
+  const [createError, setCreateError] = useState(null);
+  const {
+    status,
+    statusLoading,
+    statusError,
+    products,
+    productsTotal,
+    productsPage,
+    productsLoading,
+    productsError,
+    productSearch,
+    setProductSearch,
+    setProductsPage,
+    orders,
+    ordersTotal,
+    ordersLoading,
+    ordersError,
+    orderStatusFilter,
+    setOrderStatusFilter,
+    inventoryItems,
+    inventoryLocations,
+    inventoryLoading,
+    inventoryError,
+    customers,
+    customersTotal,
+    customersLoading,
+    customersError,
+    customerSearch,
+    setCustomerSearch,
+    counts,
+    refresh
+  } = useShopifyDashboard();
+  const createProduct = useCallback(async () => {
+    const title = createTitle.trim();
+    if (!title) {
+      setCreateError("Enter a product title.");
+      return;
+    }
+    setCreateError(null);
+    try {
+      const res = await fetch("/api/shopify/products", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title })
+      });
+      if (!res.ok) {
+        const text = await res.text().catch(() => "Unknown error");
+        throw new Error(text);
+      }
+      setCreateTitle("");
+      refresh();
+    } catch (err) {
+      setCreateError(
+        err instanceof Error ? err.message : "Failed to create product."
+      );
+    }
+  }, [createTitle, refresh]);
+  const onAction = useCallback(
+    (action) => {
+      if (action.startsWith("tab:")) {
+        setActiveTab(action.slice("tab:".length));
+        return;
+      }
+      if (action.startsWith("products:search:")) {
+        setProductsPage(1);
+        setProductSearch(action.slice("products:search:".length));
+        return;
+      }
+      if (action.startsWith("products:create-title:")) {
+        setCreateError(null);
+        setCreateTitle(action.slice("products:create-title:".length));
+        return;
+      }
+      if (action.startsWith("orders:filter:")) {
+        setOrderStatusFilter(action.slice("orders:filter:".length));
+        return;
+      }
+      if (action.startsWith("customers:search:")) {
+        setCustomerSearch(action.slice("customers:search:".length));
+        return;
+      }
+      switch (action) {
+        case "products:create":
+          void createProduct();
+          return;
+        case "products:prev-page":
+          setProductsPage(Math.max(1, productsPage - 1));
+          return;
+        case "products:next-page":
+          setProductsPage(productsPage + 1);
+          return;
+        case "refresh":
+          refresh();
+          return;
+      }
+    },
+    [
+      createProduct,
+      productsPage,
+      refresh,
+      setCustomerSearch,
+      setOrderStatusFilter,
+      setProductSearch,
+      setProductsPage
+    ]
+  );
+  const loading = statusLoading || productsLoading || ordersLoading || inventoryLoading || customersLoading;
+  const error = createError ?? statusError ?? productsError ?? ordersError ?? inventoryError ?? customersError;
+  const snapshot = {
+    status,
+    tab: activeTab,
+    counts,
+    products,
+    productsTotal,
+    productsPage,
+    productSearch,
+    orders,
+    ordersTotal,
+    orderStatusFilter,
+    inventoryItems,
+    inventoryLocations,
+    customers,
+    customersTotal,
+    customerSearch,
+    loading,
+    error
+  };
+  return /* @__PURE__ */ jsx(SpatialSurface, { children: /* @__PURE__ */ jsx(ShopifySpatialView, { snapshot, onAction }) });
+}
+export {
+  ShopifyView
+};
+//# sourceMappingURL=ShopifyView.js.map

package/dist/ShopifyView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ShopifyView.tsx"],"sourcesContent":["/**\n * ShopifyView — the single GUI/XR data wrapper for the Shopify surface.\n *\n * It owns the live store data (status / products / orders / inventory /\n * customers polling via {@link useShopifyDashboard}, tab selection, search and\n * filter state, pagination, and product creation) and renders the one\n * presentational {@link ShopifySpatialView} inside a {@link SpatialSurface}.\n * Omitting the `modality` prop lets `SpatialSurface` auto-detect GUI vs XR, so\n * the SAME component serves both surfaces. The TUI surface renders the same\n * `ShopifySpatialView` through the terminal registry (see\n * `register-terminal-view.tsx`).\n *\n * The full-screen overlay app (`ShopifyAppView`, registered via `shopify-app.ts`)\n * keeps its own richer Tabs/dialog chrome; this wrapper is the view-manager\n * surface drawn from the cross-modal spatial source of truth.\n */\n\nimport { SpatialSurface } from \"@elizaos/ui/spatial\";\nimport { useCallback, useState } from \"react\";\nimport {\n  type ShopifySnapshot,\n  type ShopifyTab,\n  ShopifySpatialView,\n} from \"./components/ShopifySpatialView.js\";\nimport { useShopifyDashboard } from \"./useShopifyDashboard.js\";\n\nexport function ShopifyView() {\n  const [activeTab, setActiveTab] = useState<ShopifyTab>(\"overview\");\n  const [createTitle, setCreateTitle] = useState(\"\");\n  const [createError, setCreateError] = useState<string | null>(null);\n\n  const {\n    status,\n    statusLoading,\n    statusError,\n\n    products,\n    productsTotal,\n    productsPage,\n    productsLoading,\n    productsError,\n    productSearch,\n    setProductSearch,\n    setProductsPage,\n\n    orders,\n    ordersTotal,\n    ordersLoading,\n    ordersError,\n    orderStatusFilter,\n    setOrderStatusFilter,\n\n    inventoryItems,\n    inventoryLocations,\n    inventoryLoading,\n    inventoryError,\n\n    customers,\n    customersTotal,\n    customersLoading,\n    customersError,\n    customerSearch,\n    setCustomerSearch,\n\n    counts,\n    refresh,\n  } = useShopifyDashboard();\n\n  const createProduct = useCallback(async () => {\n    const title = createTitle.trim();\n    if (!title) {\n      setCreateError(\"Enter a product title.\");\n      return;\n    }\n    setCreateError(null);\n    try {\n      const res = await fetch(\"/api/shopify/products\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ title }),\n      });\n      if (!res.ok) {\n        const text = await res.text().catch(() => \"Unknown error\");\n        throw new Error(text);\n      }\n      setCreateTitle(\"\");\n      refresh();\n    } catch (err) {\n      setCreateError(\n        err instanceof Error ? err.message : \"Failed to create product.\",\n      );\n    }\n  }, [createTitle, refresh]);\n\n  const onAction = useCallback(\n    (action: string) => {\n      if (action.startsWith(\"tab:\")) {\n        setActiveTab(action.slice(\"tab:\".length) as ShopifyTab);\n        return;\n      }\n      if (action.startsWith(\"products:search:\")) {\n        setProductsPage(1);\n        setProductSearch(action.slice(\"products:search:\".length));\n        return;\n      }\n      if (action.startsWith(\"products:create-title:\")) {\n        setCreateError(null);\n        setCreateTitle(action.slice(\"products:create-title:\".length));\n        return;\n      }\n      if (action.startsWith(\"orders:filter:\")) {\n        setOrderStatusFilter(action.slice(\"orders:filter:\".length));\n        return;\n      }\n      if (action.startsWith(\"customers:search:\")) {\n        setCustomerSearch(action.slice(\"customers:search:\".length));\n        return;\n      }\n      switch (action) {\n        case \"products:create\":\n          void createProduct();\n          return;\n        case \"products:prev-page\":\n          setProductsPage(Math.max(1, productsPage - 1));\n          return;\n        case \"products:next-page\":\n          setProductsPage(productsPage + 1);\n          return;\n        case \"refresh\":\n          refresh();\n          return;\n      }\n    },\n    [\n      createProduct,\n      productsPage,\n      refresh,\n      setCustomerSearch,\n      setOrderStatusFilter,\n      setProductSearch,\n      setProductsPage,\n    ],\n  );\n\n  const loading =\n    statusLoading ||\n    productsLoading ||\n    ordersLoading ||\n    inventoryLoading ||\n    customersLoading;\n  const error =\n    createError ??\n    statusError ??\n    productsError ??\n    ordersError ??\n    inventoryError ??\n    customersError;\n\n  const snapshot: ShopifySnapshot = {\n    status,\n    tab: activeTab,\n    counts,\n    products,\n    productsTotal,\n    productsPage,\n    productSearch,\n    orders,\n    ordersTotal,\n    orderStatusFilter,\n    inventoryItems,\n    inventoryLocations,\n    customers,\n    customersTotal,\n    customerSearch,\n    loading,\n    error,\n  };\n\n  return (\n    <SpatialSurface>\n      <ShopifySpatialView snapshot={snapshot} onAction={onAction} />\n    </SpatialSurface>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/StoreOverviewCard.d.ts

@@ -0,0 +1,13 @@
+interface StoreShop {
+    name: string;
+    domain: string;
+    plan: string;
+    email: string;
+    currencyCode: string;
+}
+interface StoreOverviewCardProps {
+    shop: StoreShop;
+}
+export declare function StoreOverviewCard({ shop }: StoreOverviewCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StoreOverviewCard.d.ts.map

package/dist/StoreOverviewCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreOverviewCard.d.ts","sourceRoot":"","sources":["../src/StoreOverviewCard.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,sBAAsB;IAC9B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE,sBAAsB,2CA0BjE"}

package/dist/StoreOverviewCard.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Store } from "lucide-react";
+function StoreOverviewCard({ shop }) {
+  return /* @__PURE__ */ jsx("div", { className: "px-2 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(Store, { className: "h-5 w-5 text-muted-strong" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-lg font-semibold text-txt", children: shop.name }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-muted", children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-medium text-ok", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-ok" }),
+          "live"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[12rem] truncate", children: shop.domain }),
+        /* @__PURE__ */ jsx("span", { children: shop.currencyCode })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-1 py-1 text-xs font-medium text-muted-strong", children: shop.plan })
+  ] }) });
+}
+export {
+  StoreOverviewCard
+};
+//# sourceMappingURL=StoreOverviewCard.js.map

package/dist/StoreOverviewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/StoreOverviewCard.tsx"],"sourcesContent":["import { Store } from \"lucide-react\";\n\ninterface StoreShop {\n  name: string;\n  domain: string;\n  plan: string;\n  email: string;\n  currencyCode: string;\n}\n\ninterface StoreOverviewCardProps {\n  shop: StoreShop;\n}\n\nexport function StoreOverviewCard({ shop }: StoreOverviewCardProps) {\n  return (\n    <div className=\"px-2 py-2\">\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <div className=\"flex h-11 w-11 shrink-0 items-center justify-center\">\n          <Store className=\"h-5 w-5 text-muted-strong\" />\n        </div>\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"truncate text-lg font-semibold text-txt\">\n            {shop.name}\n          </div>\n          <div className=\"mt-1 flex flex-wrap items-center gap-2 text-xs text-muted\">\n            <span className=\"inline-flex items-center gap-1.5 font-medium text-ok\">\n              <span className=\"h-2 w-2 rounded-full bg-ok\" />\n              live\n            </span>\n            <span className=\"max-w-[12rem] truncate\">{shop.domain}</span>\n            <span>{shop.currencyCode}</span>\n          </div>\n        </div>\n        <div className=\"px-1 py-1 text-xs font-medium text-muted-strong\">\n          {shop.plan}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAmBU,cAOE,YAPF;AAnBV,SAAS,aAAa;AAcf,SAAS,kBAAkB,EAAE,KAAK,GAA2B;AAClE,SACE,oBAAC,SAAI,WAAU,aACb,+BAAC,SAAI,WAAU,qCACb;AAAA,wBAAC,SAAI,WAAU,uDACb,8BAAC,SAAM,WAAU,6BAA4B,GAC/C;AAAA,IACA,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,SAAI,WAAU,2CACZ,eAAK,MACR;AAAA,MACA,qBAAC,SAAI,WAAU,6DACb;AAAA,6BAAC,UAAK,WAAU,wDACd;AAAA,8BAAC,UAAK,WAAU,8BAA6B;AAAA,UAAE;AAAA,WAEjD;AAAA,QACA,oBAAC,UAAK,WAAU,0BAA0B,eAAK,QAAO;AAAA,QACtD,oBAAC,UAAM,eAAK,cAAa;AAAA,SAC3B;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,mDACZ,eAAK,MACR;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/ShopifySpatialView.d.ts

@@ -0,0 +1,57 @@
+/**
+ * ShopifySpatialView - the Shopify store dashboard authored once with the
+ * spatial vocabulary, so it renders correctly wherever it is displayed:
+ *
+ *   - GUI / XR - mounted in `<SpatialSurface>` (DOM; XR scales up).
+ *   - TUI      - rendered to real terminal lines by the agent terminal, via
+ *                `registerSpatialTerminalView` (see `register-terminal-view.tsx`).
+ *
+ * It is purely presentational (a snapshot + an action callback in, primitives
+ * out) and imports only the cross-modality primitives plus type-only views of
+ * the dashboard data shapes, so it is safe to render in the Node agent process
+ * where the terminal lives (no React-DOM / browser runtime import).
+ *
+ * GUI Tabs map to spatial sections: the dashboard shows a counts strip
+ * (overview) and one focused commerce section per active tab. On every surface
+ * tab selection is a row of `Button`s; the host swaps `snapshot.tab` and
+ * re-renders, so the same authored view drives GUI tab clicks, XR spatial
+ * selection, and TUI grid sections from one source of truth.
+ */
+import type { ShopifyCustomer, ShopifyInventoryItem, ShopifyOrder, ShopifyProduct, ShopifyStatus } from "../useShopifyDashboard.ts";
+export type ShopifyTab = "overview" | "products" | "orders" | "inventory" | "customers";
+export interface ShopifySnapshot {
+    status: ShopifyStatus | null;
+    tab: ShopifyTab;
+    counts: {
+        productCount: number;
+        orderCount: number;
+        customerCount: number;
+    };
+    products: ShopifyProduct[];
+    productsTotal: number;
+    productsPage: number;
+    productSearch: string;
+    orders: ShopifyOrder[];
+    ordersTotal: number;
+    orderStatusFilter: string;
+    inventoryItems: ShopifyInventoryItem[];
+    inventoryLocations: string[];
+    customers: ShopifyCustomer[];
+    customersTotal: number;
+    customerSearch: string;
+    loading?: boolean;
+    error?: string | null;
+}
+export interface ShopifySpatialViewProps {
+    snapshot: ShopifySnapshot;
+    /**
+     * Dispatch by agent id. Supported actions:
+     * `tab:<id>`, `refresh`,
+     * `products:search:<q>`, `products:create-title:<q>`, `products:create`,
+     * `products:prev-page`, `products:next-page`,
+     * `orders:filter:<status>`, `customers:search:<q>`.
+     */
+    onAction?: (action: string) => void;
+}
+export declare function ShopifySpatialView({ snapshot, onAction, }: ShopifySpatialViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShopifySpatialView.d.ts.map

package/dist/components/ShopifySpatialView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShopifySpatialView.d.ts","sourceRoot":"","sources":["../../src/components/ShopifySpatialView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAaH,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,aAAa,EACd,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,UAAU,GAClB,UAAU,GACV,UAAU,GACV,QAAQ,GACR,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,EAAE;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5E,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,oBAAoB,EAAE,CAAC;IACvC,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAqcD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,eAAe,CAAC;IAC1B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,2CA6DzB"}