@fluid-app/portal-sdk 0.1.13 → 0.1.15

package/dist/MessagingScreen-Bd-1_J9q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingScreen-Bd-1_J9q.cjs","names":["useFluidContext","useFluidAuthContext","useFluidContext","useFluidAuthContext","useFluidContext","MessagingApp"],"sources":["../src/hooks/use-fluid-api.ts","../src/messaging/use-messaging-auth.ts","../src/messaging/use-messaging-config.ts","../src/messaging/fluid-file-uploader.ts","../src/screens/MessagingScreen.tsx"],"sourcesContent":["import { useFluidContext } from \"../providers/FluidProvider\";\nimport type { FluidClient } from \"../client/fluid-client\";\n\n/**\n * Hook to access the Fluid API client\n *\n * @example\n * ```tsx\n * function ProductList() {\n *   const api = useFluidApi();\n *\n *   const { data: products } = useQuery({\n *     queryKey: [\"products\"],\n *     queryFn: () => api.products.list(),\n *   });\n *\n *   return <ul>{products?.map(p => <li key={p.id}>{p.name}</li>)}</ul>;\n * }\n * ```\n */\nexport function useFluidApi(): FluidClient {\n  const { client } = useFluidContext();\n  return client;\n}\n","/**\n * Bridge hook: maps portal SDK auth context to MessagingAuthContext.\n *\n * The messaging system identifies users by `recipient_id`, which is NOT in the\n * JWT payload or the /reps/me endpoint. It IS returned by GET /api/me.\n * This hook fetches that data and maps it into the shape MessagingApp expects.\n */\n\nimport { useQuery } from \"@tanstack/react-query\";\nimport type {\n  MessagingAuthContext,\n  MessagingCurrentUser,\n} from \"@fluid-app/messaging-core\";\nimport { useFluidAuthContext } from \"../providers/FluidAuthProvider\";\nimport { useFluidApi } from \"../hooks/use-fluid-api\";\n\nconst USERS_ME_QUERY_KEY = [\"fluid\", \"users\", \"me\"] as const;\n\nexport function useMessagingAuth(): MessagingAuthContext {\n  const auth = useFluidAuthContext();\n  const api = useFluidApi();\n\n  const {\n    data: userMe,\n    isLoading: isUserMeLoading,\n    isError,\n  } = useQuery({\n    queryKey: USERS_ME_QUERY_KEY,\n    queryFn: () => api.users.me(),\n    enabled: auth.isAuthenticated,\n    staleTime: Infinity,\n    retry: 1,\n  });\n\n  if (auth.isLoading || (auth.isAuthenticated && isUserMeLoading)) {\n    return {\n      recipientId: null,\n      companyId: null,\n      currentUser: null,\n      isLoading: true,\n    };\n  }\n\n  if (!auth.isAuthenticated || isError || !userMe) {\n    return {\n      recipientId: null,\n      companyId: null,\n      currentUser: null,\n      isLoading: false,\n    };\n  }\n\n  const currentUser: MessagingCurrentUser | null = userMe.recipient_id\n    ? {\n        id: userMe.id,\n        recipientId: userMe.recipient_id,\n        firstName: userMe.first_name ?? \"\",\n        lastName: userMe.last_name ?? \"\",\n        email: userMe.email,\n        ...(userMe.image_url != null && { imageUrl: userMe.image_url }),\n        ...(userMe.affiliate_id != null && {\n          affiliateId: userMe.affiliate_id,\n        }),\n      }\n    : null;\n\n  return {\n    recipientId: userMe.recipient_id,\n    companyId: userMe.company_id ?? null,\n    currentUser,\n    isLoading: false,\n  };\n}\n","/**\n * Hook that derives MessagingApiConfig from the portal SDK's FluidProvider context.\n *\n * Maps FluidSDKConfig fields to the shape expected by MessagingApp:\n * - baseUrl  -> from config.baseUrl\n * - getHeaders -> builds Authorization header from config.getAuthToken()\n * - onAuthError -> from config.onAuthError\n * - websocketUrl -> config.websocketUrl or derived from baseUrl\n * - token -> from auth context\n */\n\nimport { useCallback, useMemo } from \"react\";\nimport type { MessagingApiConfig } from \"@fluid-app/messaging-api-client\";\nimport { useFluidContext } from \"../providers/FluidProvider\";\nimport { useFluidAuthContext } from \"../providers/FluidAuthProvider\";\n\nexport interface MessagingConfig {\n  readonly apiConfig: MessagingApiConfig;\n  readonly websocketUrl: string;\n  readonly token: string | null;\n}\n\nfunction deriveWebsocketUrl(baseUrl: string): string {\n  // Strip trailing slashes and /api suffix, then append /cable\n  // Handles both \"https://api.fluid.app\" and \"https://api.fluid.app/api\"\n  const base = baseUrl.replace(/\\/+$/, \"\").replace(/\\/api$/, \"\");\n  return `${base}/cable`;\n}\n\nexport function useMessagingConfig(): MessagingConfig {\n  const { config } = useFluidContext();\n  const auth = useFluidAuthContext();\n\n  const getHeaders = useCallback(async (): Promise<Record<string, string>> => {\n    const headers: Record<string, string> = {\n      \"Content-Type\": \"application/json\",\n      ...config.defaultHeaders,\n    };\n\n    if (config.getAuthToken) {\n      const token = await config.getAuthToken();\n      if (token) {\n        headers.Authorization = `Bearer ${token}`;\n      }\n    }\n\n    return headers;\n  }, [config]);\n\n  const apiBaseUrl = useMemo(() => {\n    const base = config.baseUrl.replace(/\\/+$/, \"\");\n    return base.endsWith(\"/api\") ? base : `${base}/api`;\n  }, [config.baseUrl]);\n\n  const apiConfig = useMemo(\n    (): MessagingApiConfig => ({\n      baseUrl: apiBaseUrl,\n      getHeaders,\n      ...(config.onAuthError != null && { onAuthError: config.onAuthError }),\n    }),\n    [apiBaseUrl, config.onAuthError, getHeaders],\n  );\n\n  const websocketUrl = useMemo(\n    () => config.websocketUrl ?? deriveWebsocketUrl(config.baseUrl),\n    [config.websocketUrl, config.baseUrl],\n  );\n\n  return {\n    apiConfig,\n    websocketUrl,\n    token: auth.token,\n  };\n}\n","/**\n * Lightweight Filestack file uploader for the portal SDK.\n *\n * Uploads files to Filestack using the REST API (no filestack-js dependency).\n * Flow: upload to `https://www.filestackapi.com/api/store/S3?key=<apiKey>`\n * Uses XMLHttpRequest for upload progress tracking.\n */\n\nimport type {\n  FileUploader,\n  UploadCallbacks,\n  UploadResult,\n} from \"@fluid-app/messaging-core\";\nimport { getFileTypeFromMimetype } from \"@fluid-app/messaging-core\";\n\nconst FILESTACK_UPLOAD_URL = \"https://www.filestackapi.com/api/store/S3\";\n\nfunction getImageDimensions(\n  file: File,\n): Promise<{ width: number; height: number } | null> {\n  if (!file.type.startsWith(\"image/\")) return Promise.resolve(null);\n\n  return new Promise((resolve) => {\n    const img = new Image();\n    const url = URL.createObjectURL(file);\n\n    img.onload = () => {\n      URL.revokeObjectURL(url);\n      resolve({ width: img.naturalWidth, height: img.naturalHeight });\n    };\n    img.onerror = () => {\n      URL.revokeObjectURL(url);\n      resolve(null);\n    };\n\n    img.src = url;\n  });\n}\n\nfunction uploadToFilestack(\n  file: File,\n  apiKey: string,\n  callbacks: UploadCallbacks,\n): { abort: () => void } {\n  const xhr = new XMLHttpRequest();\n  let aborted = false;\n\n  // Extract dimensions first (for images), then upload\n  getImageDimensions(file)\n    .then((metadata) => {\n      if (aborted) return;\n\n      const url = `${FILESTACK_UPLOAD_URL}?key=${encodeURIComponent(apiKey)}`;\n\n      xhr.open(\"POST\", url);\n      xhr.setRequestHeader(\"Content-Type\", file.type);\n\n      xhr.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          callbacks.onProgress(progress);\n        }\n      };\n\n      xhr.onload = () => {\n        if (xhr.status >= 200 && xhr.status < 300) {\n          try {\n            const response = JSON.parse(xhr.responseText) as {\n              url: string;\n              size: number;\n              type: string;\n            };\n\n            const result: UploadResult = {\n              url: response.url,\n              size: file.size,\n              mimetype: file.type,\n              kind: getFileTypeFromMimetype(file.type),\n              metadata,\n            };\n            callbacks.onSuccess(result);\n          } catch {\n            callbacks.onError(new Error(\"Failed to parse upload response\"));\n          }\n        } else {\n          callbacks.onError(\n            new Error(`Upload failed with status ${xhr.status}`),\n          );\n        }\n      };\n\n      xhr.onerror = () => {\n        if (!aborted) {\n          callbacks.onError(new Error(\"Upload failed due to a network error\"));\n        }\n      };\n\n      xhr.onabort = () => {\n        // Silently handle abort — caller initiated it\n      };\n\n      xhr.send(file);\n    })\n    .catch((error) => {\n      if (!aborted) {\n        callbacks.onError(\n          error instanceof Error\n            ? error\n            : new Error(\"Upload preparation failed\"),\n        );\n      }\n    });\n\n  return {\n    abort: () => {\n      aborted = true;\n      xhr.abort();\n    },\n  };\n}\n\n/**\n * Creates a FileUploader that uploads to Filestack using the REST API.\n *\n * @param apiKey - Filestack API key. If falsy, returns a noop uploader\n *                 that rejects uploads with a helpful error message.\n */\nexport function createFluidFileUploader(\n  apiKey: string | undefined,\n): FileUploader {\n  if (!apiKey) {\n    return {\n      uploadFile: (_file: File, callbacks: UploadCallbacks) => {\n        callbacks.onError(\n          new Error(\n            \"File uploads are not configured. Set filestackApiKey in your SDK config to enable attachments.\",\n          ),\n        );\n        return { abort: () => {} };\n      },\n    };\n  }\n\n  return {\n    uploadFile: (file: File, callbacks: UploadCallbacks) =>\n      uploadToFilestack(file, apiKey, callbacks),\n  };\n}\n","import {\n  useCallback,\n  useMemo,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  PaddingOptions,\n} from \"../types\";\nimport type { WidgetPropertySchema } from \"../registries/property-schema-types\";\nimport { MessagingApp } from \"@fluid-app/messaging-ui/app\";\nimport type { TagOption } from \"@fluid-app/messaging-ui\";\nimport {\n  extractEmoji,\n  formatMessageChannelName,\n} from \"@fluid-app/messaging-ui\";\nimport {\n  listConnectedRecipients,\n  searchConversations,\n} from \"@fluid-app/messaging-api-client\";\nimport type {\n  Recipient,\n  NominalConversation,\n} from \"@fluid-app/messaging-api-client\";\nimport { useMessagingAuth } from \"../messaging/use-messaging-auth\";\nimport { useMessagingConfig } from \"../messaging/use-messaging-config\";\nimport { createFluidFileUploader } from \"../messaging/fluid-file-uploader\";\nimport { useFluidContext } from \"../providers/FluidProvider\";\n\ntype MessagingScreenProps = ComponentProps<\"div\"> & {\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Messaging overrides\n  onToast?: (message: string, type: \"success\" | \"error\") => void;\n  filestackApiKey?: string;\n  websocketUrl?: string;\n};\n\nfunction renderImage(props: {\n  src: string;\n  alt: string;\n  width: number;\n  height: number;\n  className?: string;\n}): ReactNode {\n  return (\n    <img\n      src={props.src}\n      alt={props.alt}\n      width={props.width}\n      height={props.height}\n      className={props.className}\n    />\n  );\n}\n\nfunction defaultToast(message: string, type: \"success\" | \"error\") {\n  if (type === \"error\") {\n    console.warn(\"[Messaging]\", message);\n  }\n}\n\nexport function MessagingScreen({\n  onToast,\n  filestackApiKey,\n  websocketUrl: websocketUrlOverride,\n  /* eslint-disable @typescript-eslint/no-unused-vars -- destructured to exclude from divProps spread */\n  background,\n  textColor,\n  accentColor,\n  padding,\n  borderRadius,\n  /* eslint-enable @typescript-eslint/no-unused-vars */\n  ...divProps\n}: MessagingScreenProps): React.JSX.Element {\n  const { config } = useFluidContext();\n  const { apiConfig, websocketUrl, token } = useMessagingConfig();\n  const messagingAuth = useMessagingAuth();\n\n  const effectiveApiKey = filestackApiKey ?? config.filestackApiKey;\n  const uploader = useMemo(\n    () => createFluidFileUploader(effectiveApiKey),\n    [effectiveApiKey],\n  );\n\n  const effectiveWsUrl = websocketUrlOverride ?? websocketUrl;\n  const effectiveToast = onToast ?? defaultToast;\n\n  const searchUsers = useCallback(\n    async (query: string): Promise<TagOption[]> => {\n      const result = await listConnectedRecipients(apiConfig, {\n        filterrific: { search_query: query },\n        per_page: 10,\n        page: 1,\n      });\n      // Without `kind`, the API returns Recipient[] (not WithContactRecipient[])\n      const recipients = (result?.[1]?.items ?? []) as Recipient[];\n      return recipients.map((user) => {\n        const hasName =\n          [user.first_name, user.last_name].filter(Boolean).length > 0;\n        const name = hasName\n          ? [user.first_name, user.last_name].filter(Boolean).join(\" \")\n          : `User ${user.id}`;\n        return {\n          id: String(user.id),\n          label: name,\n          imageType: \"user\" as const,\n          userData: {\n            first_name: user.first_name,\n            last_name: user.last_name,\n            image_url: user.avatar_url,\n            phone: user.phone || undefined,\n            email: user.email || undefined,\n          },\n          conversationName: name,\n        };\n      });\n    },\n    [apiConfig],\n  );\n\n  const searchChannels = useCallback(\n    async (query: string): Promise<TagOption[]> => {\n      const channels = ((await searchConversations(apiConfig, {\n        filterrific: { search_query: query },\n      })) ?? []) as NominalConversation[];\n      return channels.map((channel) => {\n        const { text: nameWithoutEmoji } = extractEmoji(channel.name);\n        return {\n          id: `channel-${channel.id}`,\n          label: formatMessageChannelName(nameWithoutEmoji),\n          imageType: \"channel\" as const,\n          userData: {\n            first_name: channel.name,\n            last_name: null,\n            image_url: channel.avatar_url,\n          },\n          conversationName: channel.name,\n        };\n      });\n    },\n    [apiConfig],\n  );\n\n  if (messagingAuth.isLoading) {\n    return (\n      <div\n        {...divProps}\n        className={`flex h-full items-center justify-center ${divProps.className ?? \"\"}`}\n      >\n        <div className=\"text-muted-foreground\">Loading messaging...</div>\n      </div>\n    );\n  }\n\n  if (!messagingAuth.recipientId) {\n    return (\n      <div\n        {...divProps}\n        className={`flex h-full items-center justify-center ${divProps.className ?? \"\"}`}\n      >\n        <div className=\"border-border max-w-sm rounded-lg border border-dashed p-8 text-center\">\n          <h2 className=\"text-foreground text-xl font-semibold\">Messaging</h2>\n          <p className=\"text-muted-foreground mt-2\">\n            Messaging is not available for your account\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div {...divProps} className={`h-full ${divProps.className ?? \"\"}`}>\n      <MessagingApp\n        config={apiConfig}\n        auth={messagingAuth}\n        websocketUrl={effectiveWsUrl}\n        token={token}\n        renderImage={renderImage}\n        showAdminFeatures={false}\n        onToast={effectiveToast}\n        messagesViewProps={{\n          uploader,\n          saveDrafts: true,\n          onToast: effectiveToast,\n        }}\n        newMessageViewProps={{\n          searchUsers,\n          searchChannels,\n        }}\n      />\n    </div>\n  );\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"],"mappings":"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"}

package/dist/MessagingScreen-D8W8V2TW.mjs

@@ -0,0 +1,2 @@
+import { n as messagingScreenPropertySchema } from "./MessagingScreen-DCS0mtbd.mjs";
+export { messagingScreenPropertySchema };

package/dist/MessagingScreen-DCS0mtbd.mjs

@@ -0,0 +1,324 @@
+import { a as useFluidAuthContext, n as useFluidContext } from "./FluidProvider-BafZw8PJ.mjs";
+import { useCallback, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getFileTypeFromMimetype } from "@fluid-app/messaging-core";
+import { MessagingApp } from "@fluid-app/messaging-ui/app";
+import { extractEmoji, formatMessageChannelName } from "@fluid-app/messaging-ui";
+import { listConnectedRecipients, searchConversations } from "@fluid-app/messaging-api-client";
+//#region src/hooks/use-fluid-api.ts
+/**
+* Hook to access the Fluid API client
+*
+* @example
+* ```tsx
+* function ProductList() {
+*   const api = useFluidApi();
+*
+*   const { data: products } = useQuery({
+*     queryKey: ["products"],
+*     queryFn: () => api.products.list(),
+*   });
+*
+*   return <ul>{products?.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
+* }
+* ```
+*/
+function useFluidApi() {
+	const { client } = useFluidContext();
+	return client;
+}
+//#endregion
+//#region src/messaging/use-messaging-auth.ts
+/**
+* Bridge hook: maps portal SDK auth context to MessagingAuthContext.
+*
+* The messaging system identifies users by `recipient_id`, which is NOT in the
+* JWT payload or the /reps/me endpoint. It IS returned by GET /api/me.
+* This hook fetches that data and maps it into the shape MessagingApp expects.
+*/
+const USERS_ME_QUERY_KEY = [
+	"fluid",
+	"users",
+	"me"
+];
+function useMessagingAuth() {
+	const auth = useFluidAuthContext();
+	const api = useFluidApi();
+	const { data: userMe, isLoading: isUserMeLoading, isError } = useQuery({
+		queryKey: USERS_ME_QUERY_KEY,
+		queryFn: () => api.users.me(),
+		enabled: auth.isAuthenticated,
+		staleTime: Infinity,
+		retry: 1
+	});
+	if (auth.isLoading || auth.isAuthenticated && isUserMeLoading) return {
+		recipientId: null,
+		companyId: null,
+		currentUser: null,
+		isLoading: true
+	};
+	if (!auth.isAuthenticated || isError || !userMe) return {
+		recipientId: null,
+		companyId: null,
+		currentUser: null,
+		isLoading: false
+	};
+	const currentUser = userMe.recipient_id ? {
+		id: userMe.id,
+		recipientId: userMe.recipient_id,
+		firstName: userMe.first_name ?? "",
+		lastName: userMe.last_name ?? "",
+		email: userMe.email,
+		...userMe.image_url != null && { imageUrl: userMe.image_url },
+		...userMe.affiliate_id != null && { affiliateId: userMe.affiliate_id }
+	} : null;
+	return {
+		recipientId: userMe.recipient_id,
+		companyId: userMe.company_id ?? null,
+		currentUser,
+		isLoading: false
+	};
+}
+//#endregion
+//#region src/messaging/use-messaging-config.ts
+/**
+* Hook that derives MessagingApiConfig from the portal SDK's FluidProvider context.
+*
+* Maps FluidSDKConfig fields to the shape expected by MessagingApp:
+* - baseUrl  -> from config.baseUrl
+* - getHeaders -> builds Authorization header from config.getAuthToken()
+* - onAuthError -> from config.onAuthError
+* - websocketUrl -> config.websocketUrl or derived from baseUrl
+* - token -> from auth context
+*/
+function deriveWebsocketUrl(baseUrl) {
+	return `${baseUrl.replace(/\/+$/, "").replace(/\/api$/, "")}/cable`;
+}
+function useMessagingConfig() {
+	const { config } = useFluidContext();
+	const auth = useFluidAuthContext();
+	const getHeaders = useCallback(async () => {
+		const headers = {
+			"Content-Type": "application/json",
+			...config.defaultHeaders
+		};
+		if (config.getAuthToken) {
+			const token = await config.getAuthToken();
+			if (token) headers.Authorization = `Bearer ${token}`;
+		}
+		return headers;
+	}, [config]);
+	const apiBaseUrl = useMemo(() => {
+		const base = config.baseUrl.replace(/\/+$/, "");
+		return base.endsWith("/api") ? base : `${base}/api`;
+	}, [config.baseUrl]);
+	return {
+		apiConfig: useMemo(() => ({
+			baseUrl: apiBaseUrl,
+			getHeaders,
+			...config.onAuthError != null && { onAuthError: config.onAuthError }
+		}), [
+			apiBaseUrl,
+			config.onAuthError,
+			getHeaders
+		]),
+		websocketUrl: useMemo(() => config.websocketUrl ?? deriveWebsocketUrl(config.baseUrl), [config.websocketUrl, config.baseUrl]),
+		token: auth.token
+	};
+}
+//#endregion
+//#region src/messaging/fluid-file-uploader.ts
+const FILESTACK_UPLOAD_URL = "https://www.filestackapi.com/api/store/S3";
+function getImageDimensions(file) {
+	if (!file.type.startsWith("image/")) return Promise.resolve(null);
+	return new Promise((resolve) => {
+		const img = new Image();
+		const url = URL.createObjectURL(file);
+		img.onload = () => {
+			URL.revokeObjectURL(url);
+			resolve({
+				width: img.naturalWidth,
+				height: img.naturalHeight
+			});
+		};
+		img.onerror = () => {
+			URL.revokeObjectURL(url);
+			resolve(null);
+		};
+		img.src = url;
+	});
+}
+function uploadToFilestack(file, apiKey, callbacks) {
+	const xhr = new XMLHttpRequest();
+	let aborted = false;
+	getImageDimensions(file).then((metadata) => {
+		if (aborted) return;
+		const url = `${FILESTACK_UPLOAD_URL}?key=${encodeURIComponent(apiKey)}`;
+		xhr.open("POST", url);
+		xhr.setRequestHeader("Content-Type", file.type);
+		xhr.upload.onprogress = (event) => {
+			if (event.lengthComputable) {
+				const progress = Math.round(event.loaded / event.total * 100);
+				callbacks.onProgress(progress);
+			}
+		};
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) try {
+				const result = {
+					url: JSON.parse(xhr.responseText).url,
+					size: file.size,
+					mimetype: file.type,
+					kind: getFileTypeFromMimetype(file.type),
+					metadata
+				};
+				callbacks.onSuccess(result);
+			} catch {
+				callbacks.onError(/* @__PURE__ */ new Error("Failed to parse upload response"));
+			}
+			else callbacks.onError(/* @__PURE__ */ new Error(`Upload failed with status ${xhr.status}`));
+		};
+		xhr.onerror = () => {
+			if (!aborted) callbacks.onError(/* @__PURE__ */ new Error("Upload failed due to a network error"));
+		};
+		xhr.onabort = () => {};
+		xhr.send(file);
+	}).catch((error) => {
+		if (!aborted) callbacks.onError(error instanceof Error ? error : /* @__PURE__ */ new Error("Upload preparation failed"));
+	});
+	return { abort: () => {
+		aborted = true;
+		xhr.abort();
+	} };
+}
+/**
+* Creates a FileUploader that uploads to Filestack using the REST API.
+*
+* @param apiKey - Filestack API key. If falsy, returns a noop uploader
+*                 that rejects uploads with a helpful error message.
+*/
+function createFluidFileUploader(apiKey) {
+	if (!apiKey) return { uploadFile: (_file, callbacks) => {
+		callbacks.onError(/* @__PURE__ */ new Error("File uploads are not configured. Set filestackApiKey in your SDK config to enable attachments."));
+		return { abort: () => {} };
+	} };
+	return { uploadFile: (file, callbacks) => uploadToFilestack(file, apiKey, callbacks) };
+}
+//#endregion
+//#region src/screens/MessagingScreen.tsx
+function renderImage(props) {
+	return /* @__PURE__ */ jsx("img", {
+		src: props.src,
+		alt: props.alt,
+		width: props.width,
+		height: props.height,
+		className: props.className
+	});
+}
+function defaultToast(message, type) {
+	if (type === "error") console.warn("[Messaging]", message);
+}
+function MessagingScreen({ onToast, filestackApiKey, websocketUrl: websocketUrlOverride, background, textColor, accentColor, padding, borderRadius, ...divProps }) {
+	const { config } = useFluidContext();
+	const { apiConfig, websocketUrl, token } = useMessagingConfig();
+	const messagingAuth = useMessagingAuth();
+	const effectiveApiKey = filestackApiKey ?? config.filestackApiKey;
+	const uploader = useMemo(() => createFluidFileUploader(effectiveApiKey), [effectiveApiKey]);
+	const effectiveWsUrl = websocketUrlOverride ?? websocketUrl;
+	const effectiveToast = onToast ?? defaultToast;
+	const searchUsers = useCallback(async (query) => {
+		return ((await listConnectedRecipients(apiConfig, {
+			filterrific: { search_query: query },
+			per_page: 10,
+			page: 1
+		}))?.[1]?.items ?? []).map((user) => {
+			const name = [user.first_name, user.last_name].filter(Boolean).length > 0 ? [user.first_name, user.last_name].filter(Boolean).join(" ") : `User ${user.id}`;
+			return {
+				id: String(user.id),
+				label: name,
+				imageType: "user",
+				userData: {
+					first_name: user.first_name,
+					last_name: user.last_name,
+					image_url: user.avatar_url,
+					phone: user.phone || void 0,
+					email: user.email || void 0
+				},
+				conversationName: name
+			};
+		});
+	}, [apiConfig]);
+	const searchChannels = useCallback(async (query) => {
+		return (await searchConversations(apiConfig, { filterrific: { search_query: query } }) ?? []).map((channel) => {
+			const { text: nameWithoutEmoji } = extractEmoji(channel.name);
+			return {
+				id: `channel-${channel.id}`,
+				label: formatMessageChannelName(nameWithoutEmoji),
+				imageType: "channel",
+				userData: {
+					first_name: channel.name,
+					last_name: null,
+					image_url: channel.avatar_url
+				},
+				conversationName: channel.name
+			};
+		});
+	}, [apiConfig]);
+	if (messagingAuth.isLoading) return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		className: `flex h-full items-center justify-center ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: "Loading messaging..."
+		})
+	});
+	if (!messagingAuth.recipientId) return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		className: `flex h-full items-center justify-center ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "border-border max-w-sm rounded-lg border border-dashed p-8 text-center",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-foreground text-xl font-semibold",
+				children: "Messaging"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground mt-2",
+				children: "Messaging is not available for your account"
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		className: `h-full ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ jsx(MessagingApp, {
+			config: apiConfig,
+			auth: messagingAuth,
+			websocketUrl: effectiveWsUrl,
+			token,
+			renderImage,
+			showAdminFeatures: false,
+			onToast: effectiveToast,
+			messagesViewProps: {
+				uploader,
+				saveDrafts: true,
+				onToast: effectiveToast
+			},
+			newMessageViewProps: {
+				searchUsers,
+				searchChannels
+			}
+		})
+	});
+}
+const messagingScreenPropertySchema = {
+	widgetType: "MessagingScreen",
+	displayName: "Messaging Screen",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: []
+};
+//#endregion
+export { useMessagingAuth as a, useMessagingConfig as i, messagingScreenPropertySchema as n, useFluidApi as o, createFluidFileUploader as r, MessagingScreen as t };
+
+//# sourceMappingURL=MessagingScreen-DCS0mtbd.mjs.map

package/dist/MessagingScreen-DCS0mtbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingScreen-DCS0mtbd.mjs","names":[],"sources":["../src/hooks/use-fluid-api.ts","../src/messaging/use-messaging-auth.ts","../src/messaging/use-messaging-config.ts","../src/messaging/fluid-file-uploader.ts","../src/screens/MessagingScreen.tsx"],"sourcesContent":["import { useFluidContext } from \"../providers/FluidProvider\";\nimport type { FluidClient } from \"../client/fluid-client\";\n\n/**\n * Hook to access the Fluid API client\n *\n * @example\n * ```tsx\n * function ProductList() {\n *   const api = useFluidApi();\n *\n *   const { data: products } = useQuery({\n *     queryKey: [\"products\"],\n *     queryFn: () => api.products.list(),\n *   });\n *\n *   return <ul>{products?.map(p => <li key={p.id}>{p.name}</li>)}</ul>;\n * }\n * ```\n */\nexport function useFluidApi(): FluidClient {\n  const { client } = useFluidContext();\n  return client;\n}\n","/**\n * Bridge hook: maps portal SDK auth context to MessagingAuthContext.\n *\n * The messaging system identifies users by `recipient_id`, which is NOT in the\n * JWT payload or the /reps/me endpoint. It IS returned by GET /api/me.\n * This hook fetches that data and maps it into the shape MessagingApp expects.\n */\n\nimport { useQuery } from \"@tanstack/react-query\";\nimport type {\n  MessagingAuthContext,\n  MessagingCurrentUser,\n} from \"@fluid-app/messaging-core\";\nimport { useFluidAuthContext } from \"../providers/FluidAuthProvider\";\nimport { useFluidApi } from \"../hooks/use-fluid-api\";\n\nconst USERS_ME_QUERY_KEY = [\"fluid\", \"users\", \"me\"] as const;\n\nexport function useMessagingAuth(): MessagingAuthContext {\n  const auth = useFluidAuthContext();\n  const api = useFluidApi();\n\n  const {\n    data: userMe,\n    isLoading: isUserMeLoading,\n    isError,\n  } = useQuery({\n    queryKey: USERS_ME_QUERY_KEY,\n    queryFn: () => api.users.me(),\n    enabled: auth.isAuthenticated,\n    staleTime: Infinity,\n    retry: 1,\n  });\n\n  if (auth.isLoading || (auth.isAuthenticated && isUserMeLoading)) {\n    return {\n      recipientId: null,\n      companyId: null,\n      currentUser: null,\n      isLoading: true,\n    };\n  }\n\n  if (!auth.isAuthenticated || isError || !userMe) {\n    return {\n      recipientId: null,\n      companyId: null,\n      currentUser: null,\n      isLoading: false,\n    };\n  }\n\n  const currentUser: MessagingCurrentUser | null = userMe.recipient_id\n    ? {\n        id: userMe.id,\n        recipientId: userMe.recipient_id,\n        firstName: userMe.first_name ?? \"\",\n        lastName: userMe.last_name ?? \"\",\n        email: userMe.email,\n        ...(userMe.image_url != null && { imageUrl: userMe.image_url }),\n        ...(userMe.affiliate_id != null && {\n          affiliateId: userMe.affiliate_id,\n        }),\n      }\n    : null;\n\n  return {\n    recipientId: userMe.recipient_id,\n    companyId: userMe.company_id ?? null,\n    currentUser,\n    isLoading: false,\n  };\n}\n","/**\n * Hook that derives MessagingApiConfig from the portal SDK's FluidProvider context.\n *\n * Maps FluidSDKConfig fields to the shape expected by MessagingApp:\n * - baseUrl  -> from config.baseUrl\n * - getHeaders -> builds Authorization header from config.getAuthToken()\n * - onAuthError -> from config.onAuthError\n * - websocketUrl -> config.websocketUrl or derived from baseUrl\n * - token -> from auth context\n */\n\nimport { useCallback, useMemo } from \"react\";\nimport type { MessagingApiConfig } from \"@fluid-app/messaging-api-client\";\nimport { useFluidContext } from \"../providers/FluidProvider\";\nimport { useFluidAuthContext } from \"../providers/FluidAuthProvider\";\n\nexport interface MessagingConfig {\n  readonly apiConfig: MessagingApiConfig;\n  readonly websocketUrl: string;\n  readonly token: string | null;\n}\n\nfunction deriveWebsocketUrl(baseUrl: string): string {\n  // Strip trailing slashes and /api suffix, then append /cable\n  // Handles both \"https://api.fluid.app\" and \"https://api.fluid.app/api\"\n  const base = baseUrl.replace(/\\/+$/, \"\").replace(/\\/api$/, \"\");\n  return `${base}/cable`;\n}\n\nexport function useMessagingConfig(): MessagingConfig {\n  const { config } = useFluidContext();\n  const auth = useFluidAuthContext();\n\n  const getHeaders = useCallback(async (): Promise<Record<string, string>> => {\n    const headers: Record<string, string> = {\n      \"Content-Type\": \"application/json\",\n      ...config.defaultHeaders,\n    };\n\n    if (config.getAuthToken) {\n      const token = await config.getAuthToken();\n      if (token) {\n        headers.Authorization = `Bearer ${token}`;\n      }\n    }\n\n    return headers;\n  }, [config]);\n\n  const apiBaseUrl = useMemo(() => {\n    const base = config.baseUrl.replace(/\\/+$/, \"\");\n    return base.endsWith(\"/api\") ? base : `${base}/api`;\n  }, [config.baseUrl]);\n\n  const apiConfig = useMemo(\n    (): MessagingApiConfig => ({\n      baseUrl: apiBaseUrl,\n      getHeaders,\n      ...(config.onAuthError != null && { onAuthError: config.onAuthError }),\n    }),\n    [apiBaseUrl, config.onAuthError, getHeaders],\n  );\n\n  const websocketUrl = useMemo(\n    () => config.websocketUrl ?? deriveWebsocketUrl(config.baseUrl),\n    [config.websocketUrl, config.baseUrl],\n  );\n\n  return {\n    apiConfig,\n    websocketUrl,\n    token: auth.token,\n  };\n}\n","/**\n * Lightweight Filestack file uploader for the portal SDK.\n *\n * Uploads files to Filestack using the REST API (no filestack-js dependency).\n * Flow: upload to `https://www.filestackapi.com/api/store/S3?key=<apiKey>`\n * Uses XMLHttpRequest for upload progress tracking.\n */\n\nimport type {\n  FileUploader,\n  UploadCallbacks,\n  UploadResult,\n} from \"@fluid-app/messaging-core\";\nimport { getFileTypeFromMimetype } from \"@fluid-app/messaging-core\";\n\nconst FILESTACK_UPLOAD_URL = \"https://www.filestackapi.com/api/store/S3\";\n\nfunction getImageDimensions(\n  file: File,\n): Promise<{ width: number; height: number } | null> {\n  if (!file.type.startsWith(\"image/\")) return Promise.resolve(null);\n\n  return new Promise((resolve) => {\n    const img = new Image();\n    const url = URL.createObjectURL(file);\n\n    img.onload = () => {\n      URL.revokeObjectURL(url);\n      resolve({ width: img.naturalWidth, height: img.naturalHeight });\n    };\n    img.onerror = () => {\n      URL.revokeObjectURL(url);\n      resolve(null);\n    };\n\n    img.src = url;\n  });\n}\n\nfunction uploadToFilestack(\n  file: File,\n  apiKey: string,\n  callbacks: UploadCallbacks,\n): { abort: () => void } {\n  const xhr = new XMLHttpRequest();\n  let aborted = false;\n\n  // Extract dimensions first (for images), then upload\n  getImageDimensions(file)\n    .then((metadata) => {\n      if (aborted) return;\n\n      const url = `${FILESTACK_UPLOAD_URL}?key=${encodeURIComponent(apiKey)}`;\n\n      xhr.open(\"POST\", url);\n      xhr.setRequestHeader(\"Content-Type\", file.type);\n\n      xhr.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          callbacks.onProgress(progress);\n        }\n      };\n\n      xhr.onload = () => {\n        if (xhr.status >= 200 && xhr.status < 300) {\n          try {\n            const response = JSON.parse(xhr.responseText) as {\n              url: string;\n              size: number;\n              type: string;\n            };\n\n            const result: UploadResult = {\n              url: response.url,\n              size: file.size,\n              mimetype: file.type,\n              kind: getFileTypeFromMimetype(file.type),\n              metadata,\n            };\n            callbacks.onSuccess(result);\n          } catch {\n            callbacks.onError(new Error(\"Failed to parse upload response\"));\n          }\n        } else {\n          callbacks.onError(\n            new Error(`Upload failed with status ${xhr.status}`),\n          );\n        }\n      };\n\n      xhr.onerror = () => {\n        if (!aborted) {\n          callbacks.onError(new Error(\"Upload failed due to a network error\"));\n        }\n      };\n\n      xhr.onabort = () => {\n        // Silently handle abort — caller initiated it\n      };\n\n      xhr.send(file);\n    })\n    .catch((error) => {\n      if (!aborted) {\n        callbacks.onError(\n          error instanceof Error\n            ? error\n            : new Error(\"Upload preparation failed\"),\n        );\n      }\n    });\n\n  return {\n    abort: () => {\n      aborted = true;\n      xhr.abort();\n    },\n  };\n}\n\n/**\n * Creates a FileUploader that uploads to Filestack using the REST API.\n *\n * @param apiKey - Filestack API key. If falsy, returns a noop uploader\n *                 that rejects uploads with a helpful error message.\n */\nexport function createFluidFileUploader(\n  apiKey: string | undefined,\n): FileUploader {\n  if (!apiKey) {\n    return {\n      uploadFile: (_file: File, callbacks: UploadCallbacks) => {\n        callbacks.onError(\n          new Error(\n            \"File uploads are not configured. Set filestackApiKey in your SDK config to enable attachments.\",\n          ),\n        );\n        return { abort: () => {} };\n      },\n    };\n  }\n\n  return {\n    uploadFile: (file: File, callbacks: UploadCallbacks) =>\n      uploadToFilestack(file, apiKey, callbacks),\n  };\n}\n","import {\n  useCallback,\n  useMemo,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  PaddingOptions,\n} from \"../types\";\nimport type { WidgetPropertySchema } from \"../registries/property-schema-types\";\nimport { MessagingApp } from \"@fluid-app/messaging-ui/app\";\nimport type { TagOption } from \"@fluid-app/messaging-ui\";\nimport {\n  extractEmoji,\n  formatMessageChannelName,\n} from \"@fluid-app/messaging-ui\";\nimport {\n  listConnectedRecipients,\n  searchConversations,\n} from \"@fluid-app/messaging-api-client\";\nimport type {\n  Recipient,\n  NominalConversation,\n} from \"@fluid-app/messaging-api-client\";\nimport { useMessagingAuth } from \"../messaging/use-messaging-auth\";\nimport { useMessagingConfig } from \"../messaging/use-messaging-config\";\nimport { createFluidFileUploader } from \"../messaging/fluid-file-uploader\";\nimport { useFluidContext } from \"../providers/FluidProvider\";\n\ntype MessagingScreenProps = ComponentProps<\"div\"> & {\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Messaging overrides\n  onToast?: (message: string, type: \"success\" | \"error\") => void;\n  filestackApiKey?: string;\n  websocketUrl?: string;\n};\n\nfunction renderImage(props: {\n  src: string;\n  alt: string;\n  width: number;\n  height: number;\n  className?: string;\n}): ReactNode {\n  return (\n    <img\n      src={props.src}\n      alt={props.alt}\n      width={props.width}\n      height={props.height}\n      className={props.className}\n    />\n  );\n}\n\nfunction defaultToast(message: string, type: \"success\" | \"error\") {\n  if (type === \"error\") {\n    console.warn(\"[Messaging]\", message);\n  }\n}\n\nexport function MessagingScreen({\n  onToast,\n  filestackApiKey,\n  websocketUrl: websocketUrlOverride,\n  /* eslint-disable @typescript-eslint/no-unused-vars -- destructured to exclude from divProps spread */\n  background,\n  textColor,\n  accentColor,\n  padding,\n  borderRadius,\n  /* eslint-enable @typescript-eslint/no-unused-vars */\n  ...divProps\n}: MessagingScreenProps): React.JSX.Element {\n  const { config } = useFluidContext();\n  const { apiConfig, websocketUrl, token } = useMessagingConfig();\n  const messagingAuth = useMessagingAuth();\n\n  const effectiveApiKey = filestackApiKey ?? config.filestackApiKey;\n  const uploader = useMemo(\n    () => createFluidFileUploader(effectiveApiKey),\n    [effectiveApiKey],\n  );\n\n  const effectiveWsUrl = websocketUrlOverride ?? websocketUrl;\n  const effectiveToast = onToast ?? defaultToast;\n\n  const searchUsers = useCallback(\n    async (query: string): Promise<TagOption[]> => {\n      const result = await listConnectedRecipients(apiConfig, {\n        filterrific: { search_query: query },\n        per_page: 10,\n        page: 1,\n      });\n      // Without `kind`, the API returns Recipient[] (not WithContactRecipient[])\n      const recipients = (result?.[1]?.items ?? []) as Recipient[];\n      return recipients.map((user) => {\n        const hasName =\n          [user.first_name, user.last_name].filter(Boolean).length > 0;\n        const name = hasName\n          ? [user.first_name, user.last_name].filter(Boolean).join(\" \")\n          : `User ${user.id}`;\n        return {\n          id: String(user.id),\n          label: name,\n          imageType: \"user\" as const,\n          userData: {\n            first_name: user.first_name,\n            last_name: user.last_name,\n            image_url: user.avatar_url,\n            phone: user.phone || undefined,\n            email: user.email || undefined,\n          },\n          conversationName: name,\n        };\n      });\n    },\n    [apiConfig],\n  );\n\n  const searchChannels = useCallback(\n    async (query: string): Promise<TagOption[]> => {\n      const channels = ((await searchConversations(apiConfig, {\n        filterrific: { search_query: query },\n      })) ?? []) as NominalConversation[];\n      return channels.map((channel) => {\n        const { text: nameWithoutEmoji } = extractEmoji(channel.name);\n        return {\n          id: `channel-${channel.id}`,\n          label: formatMessageChannelName(nameWithoutEmoji),\n          imageType: \"channel\" as const,\n          userData: {\n            first_name: channel.name,\n            last_name: null,\n            image_url: channel.avatar_url,\n          },\n          conversationName: channel.name,\n        };\n      });\n    },\n    [apiConfig],\n  );\n\n  if (messagingAuth.isLoading) {\n    return (\n      <div\n        {...divProps}\n        className={`flex h-full items-center justify-center ${divProps.className ?? \"\"}`}\n      >\n        <div className=\"text-muted-foreground\">Loading messaging...</div>\n      </div>\n    );\n  }\n\n  if (!messagingAuth.recipientId) {\n    return (\n      <div\n        {...divProps}\n        className={`flex h-full items-center justify-center ${divProps.className ?? \"\"}`}\n      >\n        <div className=\"border-border max-w-sm rounded-lg border border-dashed p-8 text-center\">\n          <h2 className=\"text-foreground text-xl font-semibold\">Messaging</h2>\n          <p className=\"text-muted-foreground mt-2\">\n            Messaging is not available for your account\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div {...divProps} className={`h-full ${divProps.className ?? \"\"}`}>\n      <MessagingApp\n        config={apiConfig}\n        auth={messagingAuth}\n        websocketUrl={effectiveWsUrl}\n        token={token}\n        renderImage={renderImage}\n        showAdminFeatures={false}\n        onToast={effectiveToast}\n        messagesViewProps={{\n          uploader,\n          saveDrafts: true,\n          onToast: effectiveToast,\n        }}\n        newMessageViewProps={{\n          searchUsers,\n          searchChannels,\n        }}\n      />\n    </div>\n  );\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"],"mappings":"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"}

package/dist/{OrdersScreen-DB1v051q.mjs → OrdersScreen-B6JCMBY5.mjs}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./chunk-D1SwGrFN.mjs";
-import { t as CoreScreenPlaceholder } from "./CoreScreenPlaceholder-D93ZYKt2.mjs";
+import { t as CoreScreenPlaceholder } from "./CoreScreenPlaceholder-DCJ1hFvJ.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/screens/OrdersScreen.tsx
 var OrdersScreen_exports = /* @__PURE__ */ __exportAll({
@@ -21,4 +21,4 @@ const ordersScreenPropertySchema = {
 //#endregion
 export { OrdersScreen_exports as n, ordersScreenPropertySchema as r, OrdersScreen as t };
 
-//# sourceMappingURL=OrdersScreen-DB1v051q.mjs.map
+//# sourceMappingURL=OrdersScreen-B6JCMBY5.mjs.map

package/dist/{OrdersScreen-DB1v051q.mjs.map → OrdersScreen-B6JCMBY5.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"OrdersScreen-DB1v051q.mjs","names":[],"sources":["../src/screens/OrdersScreen.tsx"],"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 OrdersScreenProps = 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 OrdersScreen(_props: OrdersScreenProps): React.JSX.Element {\n  return <CoreScreenPlaceholder name=\"Orders\" />;\n}\n\nexport const ordersScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"OrdersScreen\",\n  displayName: \"Orders Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":";;;;;;;;AAmBA,SAAgB,aAAa,QAA8C;AACzE,QAAO,oBAAC,uBAAD,EAAuB,MAAK,UAAW,CAAA;;AAGhD,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}
+{"version":3,"file":"OrdersScreen-B6JCMBY5.mjs","names":[],"sources":["../src/screens/OrdersScreen.tsx"],"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 OrdersScreenProps = 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 OrdersScreen(_props: OrdersScreenProps): React.JSX.Element {\n  return <CoreScreenPlaceholder name=\"Orders\" />;\n}\n\nexport const ordersScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"OrdersScreen\",\n  displayName: \"Orders Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":";;;;;;;;AAmBA,SAAgB,aAAa,QAA8C;AACzE,QAAO,oBAAC,uBAAD,EAAuB,MAAK,UAAW,CAAA;;AAGhD,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}

package/dist/{OrdersScreen-DbON-kBA.cjs → OrdersScreen-DBxpXgZ9.cjs}

@@ -1,8 +1,8 @@
-const require_MessagingScreen = require("./MessagingScreen-Ca22FObh.cjs");
-const require_CoreScreenPlaceholder = require("./CoreScreenPlaceholder-Bw8YOPwv.cjs");
+const require_FluidProvider = require("./FluidProvider-C6SCZDjX.cjs");
+const require_CoreScreenPlaceholder = require("./CoreScreenPlaceholder-C9lBkcyc.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/screens/OrdersScreen.tsx
-var OrdersScreen_exports = /* @__PURE__ */ require_MessagingScreen.__exportAll({
+var OrdersScreen_exports = /* @__PURE__ */ require_FluidProvider.__exportAll({
 	OrdersScreen: () => OrdersScreen,
 	ordersScreenPropertySchema: () => ordersScreenPropertySchema
 });
@@ -38,4 +38,4 @@ Object.defineProperty(exports, "ordersScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=OrdersScreen-DbON-kBA.cjs.map
+//# sourceMappingURL=OrdersScreen-DBxpXgZ9.cjs.map

package/dist/{OrdersScreen-DbON-kBA.cjs.map → OrdersScreen-DBxpXgZ9.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"OrdersScreen-DbON-kBA.cjs","names":["CoreScreenPlaceholder"],"sources":["../src/screens/OrdersScreen.tsx"],"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 OrdersScreenProps = 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 OrdersScreen(_props: OrdersScreenProps): React.JSX.Element {\n  return <CoreScreenPlaceholder name=\"Orders\" />;\n}\n\nexport const ordersScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"OrdersScreen\",\n  displayName: \"Orders Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":";;;;;;;;AAmBA,SAAgB,aAAa,QAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,uBAAD,EAAuB,MAAK,UAAW,CAAA;;AAGhD,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}
+{"version":3,"file":"OrdersScreen-DBxpXgZ9.cjs","names":["CoreScreenPlaceholder"],"sources":["../src/screens/OrdersScreen.tsx"],"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 OrdersScreenProps = 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 OrdersScreen(_props: OrdersScreenProps): React.JSX.Element {\n  return <CoreScreenPlaceholder name=\"Orders\" />;\n}\n\nexport const ordersScreenPropertySchema: WidgetPropertySchema = {\n  widgetType: \"OrdersScreen\",\n  displayName: \"Orders Screen\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":";;;;;;;;AAmBA,SAAgB,aAAa,QAA8C;AACzE,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,uBAAD,EAAuB,MAAK,UAAW,CAAA;;AAGhD,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}

package/dist/{ProductsScreen-CMDGGvE2.cjs → ProductsScreen-BK8cz_MN.cjs}

@@ -1,8 +1,8 @@
-const require_MessagingScreen = require("./MessagingScreen-Ca22FObh.cjs");
-const require_CoreScreenPlaceholder = require("./CoreScreenPlaceholder-Bw8YOPwv.cjs");
+const require_FluidProvider = require("./FluidProvider-C6SCZDjX.cjs");
+const require_CoreScreenPlaceholder = require("./CoreScreenPlaceholder-C9lBkcyc.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/screens/ProductsScreen.tsx
-var ProductsScreen_exports = /* @__PURE__ */ require_MessagingScreen.__exportAll({
+var ProductsScreen_exports = /* @__PURE__ */ require_FluidProvider.__exportAll({
 	ProductsScreen: () => ProductsScreen,
 	productsScreenPropertySchema: () => productsScreenPropertySchema
 });
@@ -38,4 +38,4 @@ Object.defineProperty(exports, "productsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ProductsScreen-CMDGGvE2.cjs.map
+//# sourceMappingURL=ProductsScreen-BK8cz_MN.cjs.map

package/dist/{ProductsScreen-CMDGGvE2.cjs.map → ProductsScreen-BK8cz_MN.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ProductsScreen-CMDGGvE2.cjs","names":["CoreScreenPlaceholder"],"sources":["../src/screens/ProductsScreen.tsx"],"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): React.JSX.Element {\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"],"mappings":";;;;;;;;AAmBA,SAAgB,eAAe,QAAgD;AAC7E,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,uBAAD,EAAuB,MAAK,YAAa,CAAA;;AAGlD,MAAa,+BAAqD;CAChE,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}
+{"version":3,"file":"ProductsScreen-BK8cz_MN.cjs","names":["CoreScreenPlaceholder"],"sources":["../src/screens/ProductsScreen.tsx"],"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): React.JSX.Element {\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"],"mappings":";;;;;;;;AAmBA,SAAgB,eAAe,QAAgD;AAC7E,QAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,uBAAD,EAAuB,MAAK,YAAa,CAAA;;AAGlD,MAAa,+BAAqD;CAChE,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}

package/dist/{ProductsScreen-nVDsY6kf.mjs → ProductsScreen-DafsauTY.mjs}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./chunk-D1SwGrFN.mjs";
-import { t as CoreScreenPlaceholder } from "./CoreScreenPlaceholder-D93ZYKt2.mjs";
+import { t as CoreScreenPlaceholder } from "./CoreScreenPlaceholder-DCJ1hFvJ.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/screens/ProductsScreen.tsx
 var ProductsScreen_exports = /* @__PURE__ */ __exportAll({
@@ -21,4 +21,4 @@ const productsScreenPropertySchema = {
 //#endregion
 export { ProductsScreen_exports as n, productsScreenPropertySchema as r, ProductsScreen as t };
 
-//# sourceMappingURL=ProductsScreen-nVDsY6kf.mjs.map
+//# sourceMappingURL=ProductsScreen-DafsauTY.mjs.map

package/dist/{ProductsScreen-nVDsY6kf.mjs.map → ProductsScreen-DafsauTY.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ProductsScreen-nVDsY6kf.mjs","names":[],"sources":["../src/screens/ProductsScreen.tsx"],"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): React.JSX.Element {\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"],"mappings":";;;;;;;;AAmBA,SAAgB,eAAe,QAAgD;AAC7E,QAAO,oBAAC,uBAAD,EAAuB,MAAK,YAAa,CAAA;;AAGlD,MAAa,+BAAqD;CAChE,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}
+{"version":3,"file":"ProductsScreen-DafsauTY.mjs","names":[],"sources":["../src/screens/ProductsScreen.tsx"],"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): React.JSX.Element {\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"],"mappings":";;;;;;;;AAmBA,SAAgB,eAAe,QAAgD;AAC7E,QAAO,oBAAC,uBAAD,EAAuB,MAAK,YAAa,CAAA;;AAGlD,MAAa,+BAAqD;CAChE,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,QAAQ,EAAE;CACX"}