@fluid-app/rep-sdk 0.1.0

package/README.md

@@ -0,0 +1,413 @@
+# @fluid-app/rep-sdk
+
+SDK for building custom Fluid rep portals. Provides React hooks, providers, and an API client for integrating with the Fluid Commerce platform.
+
+## Installation
+
+```bash
+npm install @fluid-app/rep-sdk
+# or
+pnpm add @fluid-app/rep-sdk
+# or
+bun add @fluid-app/rep-sdk
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```json
+{
+  "react": ">=18.0.0",
+  "@tanstack/react-query": ">=5.0.0"
+}
+```
+
+## Quick Start
+
+Wrap your application with `FluidProvider`:
+
+```tsx
+import { FluidProvider } from "@fluid-app/rep-sdk";
+
+function App() {
+  return (
+    <FluidProvider
+      config={{
+        baseUrl: "https://api.fluid.app/api",
+        getAuthToken: () => localStorage.getItem("fluid_token"),
+        onAuthError: () => {
+          // Handle 401 errors (e.g., redirect to login)
+          window.location.href = "/login";
+        },
+      }}
+    >
+      <YourApp />
+    </FluidProvider>
+  );
+}
+```
+
+## Hooks
+
+### useFluidApi
+
+Access the API client for making requests:
+
+```tsx
+import { useFluidApi } from "@fluid-app/rep-sdk";
+import { useQuery } from "@tanstack/react-query";
+
+function ProductList() {
+  const api = useFluidApi();
+
+  const { data: products, isLoading } = useQuery({
+    queryKey: ["products"],
+    queryFn: () => api.products.list({ active: true }),
+  });
+
+  if (isLoading) return <Spinner />;
+
+  return (
+    <ul>
+      {products?.map((product) => <li key={product.id}>{product.name}</li>)}
+    </ul>
+  );
+}
+```
+
+### useCurrentRep
+
+Fetch the currently authenticated rep's profile:
+
+```tsx
+import { useCurrentRep } from "@fluid-app/rep-sdk";
+
+function RepHeader() {
+  const { data: rep, isLoading } = useCurrentRep();
+
+  if (isLoading) return <Skeleton />;
+
+  return (
+    <div>
+      <Avatar src={rep?.avatar_url} />
+      <span>
+        {rep?.first_name} {rep?.last_name}
+      </span>
+    </div>
+  );
+}
+```
+
+### useFluidProfile
+
+Fetch the rep portal profile (themes, navigation, screens):
+
+```tsx
+import { useFluidProfile } from "@fluid-app/rep-sdk";
+
+function Navigation() {
+  const { data: profile, isLoading } = useFluidProfile();
+
+  if (isLoading) return <Spinner />;
+
+  return (
+    <nav>
+      {profile?.navigation.navigation_items.map((item) => (
+        <NavItem key={item.id} item={item} />
+      ))}
+    </nav>
+  );
+}
+```
+
+### useFluidPermissions
+
+Check user permissions with a convenient `can()` helper:
+
+```tsx
+import { useFluidPermissions } from "@fluid-app/rep-sdk";
+
+function TeamSettings() {
+  const { can, isSuperAdmin } = useFluidPermissions();
+
+  // Check if user can manage team
+  if (!can("team", "manage")) {
+    return <AccessDenied />;
+  }
+
+  return (
+    <div>
+      <h1>Team Settings</h1>
+      {/* Only show delete button if user has delete permission */}
+      {can("team", "delete") && <DeleteTeamButton />}
+    </div>
+  );
+}
+```
+
+Available permission actions: `"view"`, `"create"`, `"update"`, `"delete"`, `"settings"`, `"add"`, `"manage"`, `"send"`
+
+### useFluidTheme
+
+Control theme settings:
+
+```tsx
+import { useFluidTheme } from "@fluid-app/rep-sdk";
+import type { Theme } from "@fluid-app/rep-sdk";
+
+function ThemeSwitcher({ themes }: { themes: Theme[] }) {
+  const { currentTheme, setTheme, setThemeMode, mode } = useFluidTheme();
+
+  return (
+    <div>
+      <select
+        value={currentTheme?.name}
+        onChange={(e) => {
+          const theme = themes.find((t) => t.name === e.target.value);
+          if (theme) setTheme(theme);
+        }}
+      >
+        {themes.map((theme) => (
+          <option key={theme.name} value={theme.name}>
+            {theme.name}
+          </option>
+        ))}
+      </select>
+
+      <button onClick={() => setThemeMode(mode === "dark" ? "light" : "dark")}>
+        Toggle {mode === "dark" ? "Light" : "Dark"} Mode
+      </button>
+    </div>
+  );
+}
+```
+
+## API Client
+
+The SDK provides a typed API client with methods for common operations:
+
+### Products
+
+```tsx
+const api = useFluidApi();
+
+// List products with optional filters
+const products = await api.products.list({
+  active: true,
+  page: 1,
+  per_page: 20,
+});
+
+// Get a single product
+const product = await api.products.get("product-id");
+
+// Search products
+const results = await api.products.search("query");
+```
+
+### Orders
+
+```tsx
+const api = useFluidApi();
+
+// List orders
+const orders = await api.orders.list({
+  status: "pending",
+  date_from: "2024-01-01",
+});
+
+// Get a single order
+const order = await api.orders.get("order-id");
+
+// Create an order
+const newOrder = await api.orders.create({
+  customer_id: "customer-id",
+  line_items: [{ product_id: "product-id", quantity: 2 }],
+});
+```
+
+### Reps
+
+```tsx
+const api = useFluidApi();
+
+// Get current rep profile
+const rep = await api.reps.current();
+
+// Update profile
+const updated = await api.reps.updateProfile({
+  first_name: "John",
+  last_name: "Doe",
+});
+```
+
+### Analytics
+
+```tsx
+const api = useFluidApi();
+
+// Get dashboard data
+const dashboard = await api.analytics.dashboard();
+
+// Get sales data
+const sales = await api.analytics.sales({
+  date_from: "2024-01-01",
+  date_to: "2024-12-31",
+  group_by: "month",
+});
+```
+
+### Custom Requests
+
+For endpoints not covered by the typed methods:
+
+```tsx
+const api = useFluidApi();
+
+// Generic GET request
+const data = await api.get<MyType>("/custom/endpoint", { param: "value" });
+
+// Generic POST request
+const result = await api.post<MyType>("/custom/endpoint", { body: "data" });
+```
+
+## Providers
+
+### FluidProvider
+
+The main provider that sets up the SDK. It wraps:
+
+- `QueryClientProvider` (TanStack Query)
+- `FluidThemeProvider` (theme management)
+
+```tsx
+import { FluidProvider } from "@fluid-app/rep-sdk";
+import { QueryClient } from "@tanstack/react-query";
+
+// Optional: provide your own QueryClient
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 5 * 60 * 1000 },
+  },
+});
+
+function App() {
+  return (
+    <FluidProvider
+      config={{
+        baseUrl: "https://api.fluid.app/api",
+        getAuthToken: () => getToken(),
+      }}
+      queryClient={queryClient}
+      initialTheme={defaultTheme}
+    >
+      <YourApp />
+    </FluidProvider>
+  );
+}
+```
+
+### FluidThemeProvider
+
+Can be used standalone if you need theme management without the full SDK:
+
+```tsx
+import { FluidThemeProvider, useFluidTheme } from "@fluid-app/rep-sdk";
+
+function App() {
+  return (
+    <FluidThemeProvider initialTheme={myTheme}>
+      <ThemedContent />
+    </FluidThemeProvider>
+  );
+}
+```
+
+Theme CSS variables are applied to the document root (or a custom container) with the `--fluid-` prefix.
+
+## Types
+
+All types are exported for use in your application:
+
+```tsx
+import type {
+  // Core types
+  Profile,
+  Theme,
+  ThemeConfig,
+  Navigation,
+  NavigationItem,
+  ScreenDefinition,
+
+  // Permissions
+  UserPermissions,
+  Permissions,
+  PermissionAction,
+  ResourcePermissions,
+
+  // Rep
+  Rep,
+  UpdateRepData,
+
+  // API types
+  Product,
+  ProductListParams,
+  Order,
+  OrderListParams,
+  CreateOrderData,
+  DashboardData,
+  SalesData,
+  SalesParams,
+
+  // Client types
+  FluidSDKConfig,
+  FluidClient,
+  RequestOptions,
+} from "@fluid-app/rep-sdk";
+```
+
+## Query Keys
+
+Query keys are exported for cache invalidation and prefetching:
+
+```tsx
+import {
+  PROFILE_QUERY_KEY,
+  PERMISSIONS_QUERY_KEY,
+  CURRENT_REP_QUERY_KEY,
+} from "@fluid-app/rep-sdk";
+import { useQueryClient } from "@tanstack/react-query";
+
+function RefreshButton() {
+  const queryClient = useQueryClient();
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey: PROFILE_QUERY_KEY });
+  };
+
+  return <button onClick={handleRefresh}>Refresh Profile</button>;
+}
+```
+
+## Error Handling
+
+The SDK provides an `ApiError` class for structured error handling:
+
+```tsx
+import { ApiError, isApiError } from "@fluid-app/rep-sdk";
+
+try {
+  await api.orders.create(orderData);
+} catch (error) {
+  if (isApiError(error)) {
+    console.log("Status:", error.status);
+    console.log("Message:", error.message);
+    console.log("Data:", error.data); // Server error details
+  }
+}
+```
+
+## License
+
+Private - Fluid Commerce

package/dist/ContactsScreen-BYXF74BO.js

@@ -0,0 +1,4 @@
+export { ContactsScreen, contactsScreenPropertySchema } from './chunk-WH7WZXT6.js';
+import './chunk-LO2HDG6C.js';
+//# sourceMappingURL=ContactsScreen-BYXF74BO.js.map
+//# sourceMappingURL=ContactsScreen-BYXF74BO.js.map

package/dist/ContactsScreen-BYXF74BO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ContactsScreen-BYXF74BO.js"}

package/dist/ContactsScreen-XZOQJVFE.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkMEOOAMH2_cjs = require('./chunk-MEOOAMH2.cjs');
+require('./chunk-DEQ3PBVX.cjs');
+
+
+
+Object.defineProperty(exports, "ContactsScreen", {
+  enumerable: true,
+  get: function () { return chunkMEOOAMH2_cjs.ContactsScreen; }
+});
+Object.defineProperty(exports, "contactsScreenPropertySchema", {
+  enumerable: true,
+  get: function () { return chunkMEOOAMH2_cjs.contactsScreenPropertySchema; }
+});
+//# sourceMappingURL=ContactsScreen-XZOQJVFE.cjs.map
+//# sourceMappingURL=ContactsScreen-XZOQJVFE.cjs.map

package/dist/ContactsScreen-XZOQJVFE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ContactsScreen-XZOQJVFE.cjs"}

package/dist/CustomersScreen-53SXRDDK.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkMBUCXIUN_cjs = require('./chunk-MBUCXIUN.cjs');
+require('./chunk-DEQ3PBVX.cjs');
+
+
+
+Object.defineProperty(exports, "CustomersScreen", {
+  enumerable: true,
+  get: function () { return chunkMBUCXIUN_cjs.CustomersScreen; }
+});
+Object.defineProperty(exports, "customersScreenPropertySchema", {
+  enumerable: true,
+  get: function () { return chunkMBUCXIUN_cjs.customersScreenPropertySchema; }
+});
+//# sourceMappingURL=CustomersScreen-53SXRDDK.cjs.map
+//# sourceMappingURL=CustomersScreen-53SXRDDK.cjs.map

package/dist/CustomersScreen-53SXRDDK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"CustomersScreen-53SXRDDK.cjs"}

package/dist/CustomersScreen-VS6LGULO.js

@@ -0,0 +1,4 @@
+export { CustomersScreen, customersScreenPropertySchema } from './chunk-CXRJSGO6.js';
+import './chunk-LO2HDG6C.js';
+//# sourceMappingURL=CustomersScreen-VS6LGULO.js.map
+//# sourceMappingURL=CustomersScreen-VS6LGULO.js.map

package/dist/CustomersScreen-VS6LGULO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"CustomersScreen-VS6LGULO.js"}

package/dist/MessagingScreen-O42JEJMW.js

@@ -0,0 +1,4 @@
+export { MessagingScreen, messagingScreenPropertySchema } from './chunk-PJWPO4BJ.js';
+import './chunk-LO2HDG6C.js';
+//# sourceMappingURL=MessagingScreen-O42JEJMW.js.map
+//# sourceMappingURL=MessagingScreen-O42JEJMW.js.map

package/dist/MessagingScreen-O42JEJMW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"MessagingScreen-O42JEJMW.js"}

package/dist/MessagingScreen-UCVLYWZB.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkJZRNKSKT_cjs = require('./chunk-JZRNKSKT.cjs');
+require('./chunk-DEQ3PBVX.cjs');
+
+
+
+Object.defineProperty(exports, "MessagingScreen", {
+  enumerable: true,
+  get: function () { return chunkJZRNKSKT_cjs.MessagingScreen; }
+});
+Object.defineProperty(exports, "messagingScreenPropertySchema", {
+  enumerable: true,
+  get: function () { return chunkJZRNKSKT_cjs.messagingScreenPropertySchema; }
+});
+//# sourceMappingURL=MessagingScreen-UCVLYWZB.cjs.map
+//# sourceMappingURL=MessagingScreen-UCVLYWZB.cjs.map

package/dist/MessagingScreen-UCVLYWZB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"MessagingScreen-UCVLYWZB.cjs"}

package/dist/OrdersScreen-QQJFTTSS.js

@@ -0,0 +1,4 @@
+export { OrdersScreen, ordersScreenPropertySchema } from './chunk-PZIHCYDD.js';
+import './chunk-LO2HDG6C.js';
+//# sourceMappingURL=OrdersScreen-QQJFTTSS.js.map
+//# sourceMappingURL=OrdersScreen-QQJFTTSS.js.map

package/dist/OrdersScreen-QQJFTTSS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"OrdersScreen-QQJFTTSS.js"}

package/dist/OrdersScreen-WNT2WDLI.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkYII3IXF4_cjs = require('./chunk-YII3IXF4.cjs');
+require('./chunk-DEQ3PBVX.cjs');
+
+
+
+Object.defineProperty(exports, "OrdersScreen", {
+  enumerable: true,
+  get: function () { return chunkYII3IXF4_cjs.OrdersScreen; }
+});
+Object.defineProperty(exports, "ordersScreenPropertySchema", {
+  enumerable: true,
+  get: function () { return chunkYII3IXF4_cjs.ordersScreenPropertySchema; }
+});
+//# sourceMappingURL=OrdersScreen-WNT2WDLI.cjs.map
+//# sourceMappingURL=OrdersScreen-WNT2WDLI.cjs.map

package/dist/OrdersScreen-WNT2WDLI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"OrdersScreen-WNT2WDLI.cjs"}

package/dist/ProductsScreen-CTIAKS3Z.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkQUVJ3R4T_cjs = require('./chunk-QUVJ3R4T.cjs');
+require('./chunk-DEQ3PBVX.cjs');
+
+
+
+Object.defineProperty(exports, "ProductsScreen", {
+  enumerable: true,
+  get: function () { return chunkQUVJ3R4T_cjs.ProductsScreen; }
+});
+Object.defineProperty(exports, "productsScreenPropertySchema", {
+  enumerable: true,
+  get: function () { return chunkQUVJ3R4T_cjs.productsScreenPropertySchema; }
+});
+//# sourceMappingURL=ProductsScreen-CTIAKS3Z.cjs.map
+//# sourceMappingURL=ProductsScreen-CTIAKS3Z.cjs.map

package/dist/ProductsScreen-CTIAKS3Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ProductsScreen-CTIAKS3Z.cjs"}

package/dist/ProductsScreen-TRIT2FE3.js

@@ -0,0 +1,4 @@
+export { ProductsScreen, productsScreenPropertySchema } from './chunk-2AWTZV3T.js';
+import './chunk-LO2HDG6C.js';
+//# sourceMappingURL=ProductsScreen-TRIT2FE3.js.map
+//# sourceMappingURL=ProductsScreen-TRIT2FE3.js.map

package/dist/ProductsScreen-TRIT2FE3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ProductsScreen-TRIT2FE3.js"}

package/dist/chunk-2AWTZV3T.js

@@ -0,0 +1,16 @@
+import { CoreScreenPlaceholder } from './chunk-LO2HDG6C.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ProductsScreen(_props) {
+  return /* @__PURE__ */ jsx(CoreScreenPlaceholder, { name: "Products" });
+}
+var productsScreenPropertySchema = {
+  widgetType: "ProductsScreen",
+  displayName: "Products Screen",
+  tabsConfig: [{ id: "styling", label: "Styling" }],
+  fields: []
+};
+
+export { ProductsScreen, productsScreenPropertySchema };
+//# sourceMappingURL=chunk-2AWTZV3T.js.map
+//# sourceMappingURL=chunk-2AWTZV3T.js.map

package/dist/chunk-2AWTZV3T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/screens/ProductsScreen.tsx"],"names":[],"mappings":";;;AAmBO,SAAS,eAAe,MAAA,EAA6B;AAC1D,EAAA,uBAAO,GAAA,CAAC,qBAAA,EAAA,EAAsB,IAAA,EAAK,UAAA,EAAW,CAAA;AAChD;AAEO,IAAM,4BAAA,GAAqD;AAAA,EAChE,UAAA,EAAY,gBAAA;AAAA,EACZ,WAAA,EAAa,iBAAA;AAAA,EACb,YAAY,CAAC,EAAE,IAAI,SAAA,EAAW,KAAA,EAAO,WAAW,CAAA;AAAA,EAChD,QAAQ;AACV","file":"chunk-2AWTZV3T.js","sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  PaddingOptions,\n} from \"../types\";\nimport type { WidgetPropertySchema } from \"../registries/property-schema-types\";\nimport { CoreScreenPlaceholder } from \"./CoreScreenPlaceholder\";\n\ntype ProductsScreenProps = ComponentProps<\"div\"> & {\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function ProductsScreen(_props: ProductsScreenProps) {\n  return <CoreScreenPlaceholder name=\"Products\" />;\n}\n\nexport const productsScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ProductsScreen\",\n  displayName: \"Products Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"]}

package/dist/chunk-CXRJSGO6.js

@@ -0,0 +1,16 @@
+import { CoreScreenPlaceholder } from './chunk-LO2HDG6C.js';
+import { jsx } from 'react/jsx-runtime';
+
+function CustomersScreen(_props) {
+  return /* @__PURE__ */ jsx(CoreScreenPlaceholder, { name: "Customers" });
+}
+var customersScreenPropertySchema = {
+  widgetType: "CustomersScreen",
+  displayName: "Customers Screen",
+  tabsConfig: [{ id: "styling", label: "Styling" }],
+  fields: []
+};
+
+export { CustomersScreen, customersScreenPropertySchema };
+//# sourceMappingURL=chunk-CXRJSGO6.js.map
+//# sourceMappingURL=chunk-CXRJSGO6.js.map

package/dist/chunk-CXRJSGO6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/screens/CustomersScreen.tsx"],"names":[],"mappings":";;;AAmBO,SAAS,gBAAgB,MAAA,EAA8B;AAC5D,EAAA,uBAAO,GAAA,CAAC,qBAAA,EAAA,EAAsB,IAAA,EAAK,WAAA,EAAY,CAAA;AACjD;AAEO,IAAM,6BAAA,GAAsD;AAAA,EACjE,UAAA,EAAY,iBAAA;AAAA,EACZ,WAAA,EAAa,kBAAA;AAAA,EACb,YAAY,CAAC,EAAE,IAAI,SAAA,EAAW,KAAA,EAAO,WAAW,CAAA;AAAA,EAChD,QAAQ;AACV","file":"chunk-CXRJSGO6.js","sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  PaddingOptions,\n} from \"../types\";\nimport type { WidgetPropertySchema } from \"../registries/property-schema-types\";\nimport { CoreScreenPlaceholder } from \"./CoreScreenPlaceholder\";\n\ntype CustomersScreenProps = ComponentProps<\"div\"> & {\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CustomersScreen(_props: CustomersScreenProps) {\n  return <CoreScreenPlaceholder name=\"Customers\" />;\n}\n\nexport const customersScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"CustomersScreen\",\n  displayName: \"Customers Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"]}

package/dist/chunk-DEQ3PBVX.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+function CoreScreenPlaceholder({ name }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[400px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-sm rounded-lg border border-dashed border-gray-300 p-8 text-center dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-gray-500 dark:text-gray-400", children: "This screen is provided by Fluid Commerce" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-400 dark:text-gray-500", children: "Connect to the Fluid platform to enable this feature" })
+  ] }) });
+}
+
+exports.CoreScreenPlaceholder = CoreScreenPlaceholder;
+exports.__reExport = __reExport;
+//# sourceMappingURL=chunk-DEQ3PBVX.cjs.map
+//# sourceMappingURL=chunk-DEQ3PBVX.cjs.map

package/dist/chunk-DEQ3PBVX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/screens/CoreScreenPlaceholder.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;AAIO,SAAS,qBAAA,CAAsB,EAAE,IAAA,EAAK,EAA8B;AACzE,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,kDACb,QAAA,kBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+FAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,wDAAA,EACX,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,oBACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uCAAA,EAAwC,QAAA,EAAA,2CAAA,EAErD,CAAA;AAAA,oBACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+CAAA,EAAgD,QAAA,EAAA,sDAAA,EAE7D;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"chunk-DEQ3PBVX.cjs","sourcesContent":["/**\n * Internal placeholder component for core screens provided by Fluid Commerce.\n * This is NOT exported from the SDK — it's shared between core screen files.\n */\nexport function CoreScreenPlaceholder({ name }: { readonly name: string }) {\n  return (\n    <div className=\"flex min-h-[400px] items-center justify-center\">\n      <div className=\"max-w-sm rounded-lg border border-dashed border-gray-300 p-8 text-center dark:border-gray-700\">\n        <h2 className=\"text-xl font-semibold text-gray-900 dark:text-gray-100\">\n          {name}\n        </h2>\n        <p className=\"mt-2 text-gray-500 dark:text-gray-400\">\n          This screen is provided by Fluid Commerce\n        </p>\n        <p className=\"mt-1 text-sm text-gray-400 dark:text-gray-500\">\n          Connect to the Fluid platform to enable this feature\n        </p>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-JZRNKSKT.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var chunkDEQ3PBVX_cjs = require('./chunk-DEQ3PBVX.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function MessagingScreen(_props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkDEQ3PBVX_cjs.CoreScreenPlaceholder, { name: "Messaging" });
+}
+var messagingScreenPropertySchema = {
+  widgetType: "MessagingScreen",
+  displayName: "Messaging Screen",
+  tabsConfig: [{ id: "styling", label: "Styling" }],
+  fields: []
+};
+
+exports.MessagingScreen = MessagingScreen;
+exports.messagingScreenPropertySchema = messagingScreenPropertySchema;
+//# sourceMappingURL=chunk-JZRNKSKT.cjs.map
+//# sourceMappingURL=chunk-JZRNKSKT.cjs.map

package/dist/chunk-JZRNKSKT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/screens/MessagingScreen.tsx"],"names":["jsx","CoreScreenPlaceholder"],"mappings":";;;;;AAwBO,SAAS,gBAAgB,MAAA,EAA8B;AAC5D,EAAA,uBAAOA,cAAA,CAACC,uCAAA,EAAA,EAAsB,IAAA,EAAK,WAAA,EAAY,CAAA;AACjD;AAEO,IAAM,6BAAA,GAAsD;AAAA,EACjE,UAAA,EAAY,iBAAA;AAAA,EACZ,WAAA,EAAa,kBAAA;AAAA,EACb,YAAY,CAAC,EAAE,IAAI,SAAA,EAAW,KAAA,EAAO,WAAW,CAAA;AAAA,EAChD,QAAQ;AACV","file":"chunk-JZRNKSKT.cjs","sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  PaddingOptions,\n} from \"../types\";\nimport type { WidgetPropertySchema } from \"../registries/property-schema-types\";\nimport { CoreScreenPlaceholder } from \"./CoreScreenPlaceholder\";\n\ntype MessagingScreenProps = ComponentProps<\"div\"> & {\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Callbacks\n  onConversationSelect?: (conversationId: string) => void;\n  onSendMessage?: (conversationId: string, message: string) => void;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function MessagingScreen(_props: MessagingScreenProps) {\n  return <CoreScreenPlaceholder name=\"Messaging\" />;\n}\n\nexport const messagingScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"MessagingScreen\",\n  displayName: \"Messaging Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"]}