@tribe-nest/forge 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (255) hide show
  1. package/package.json +42 -0
  2. package/src/client/createForgeClient.ts +54 -0
  3. package/src/content/ForgeContentProvider.tsx +118 -0
  4. package/src/content/ForgeEditBridge.tsx +134 -0
  5. package/src/content/editFlag.ts +23 -0
  6. package/src/content/index.ts +28 -0
  7. package/src/content/resolve.ts +67 -0
  8. package/src/content/types.ts +97 -0
  9. package/src/content/useField.ts +64 -0
  10. package/src/contexts/AppAuthContext.tsx +185 -0
  11. package/src/contexts/AudioPlayerContext.tsx +389 -0
  12. package/src/contexts/CartContext.tsx +131 -0
  13. package/src/contexts/PublicAuthContext.tsx +333 -0
  14. package/src/contexts/useAppAdminGuard.ts +56 -0
  15. package/src/css.d.ts +5 -0
  16. package/src/data/collectionParams.ts +57 -0
  17. package/src/data/queries/useAccount.ts +71 -0
  18. package/src/data/queries/useAccountSettings.ts +82 -0
  19. package/src/data/queries/useAnalytics.ts +86 -0
  20. package/src/data/queries/useAuthActions.ts +28 -0
  21. package/src/data/queries/useBlog.ts +103 -0
  22. package/src/data/queries/useBlogComments.ts +96 -0
  23. package/src/data/queries/useBroadcasts.ts +31 -0
  24. package/src/data/queries/useCertificates.ts +58 -0
  25. package/src/data/queries/useChat.ts +267 -0
  26. package/src/data/queries/useCoachingAvailability.ts +69 -0
  27. package/src/data/queries/useCoachingProducts.ts +67 -0
  28. package/src/data/queries/useCohortPage.ts +17 -0
  29. package/src/data/queries/useCollections.ts +211 -0
  30. package/src/data/queries/useCommunity.ts +794 -0
  31. package/src/data/queries/useCoupons.ts +20 -0
  32. package/src/data/queries/useCourseAccess.ts +50 -0
  33. package/src/data/queries/useCourses.ts +91 -0
  34. package/src/data/queries/useCurrencies.ts +33 -0
  35. package/src/data/queries/useDocuments.ts +208 -0
  36. package/src/data/queries/useDonations.ts +29 -0
  37. package/src/data/queries/useEngagement.ts +115 -0
  38. package/src/data/queries/useEvents.ts +69 -0
  39. package/src/data/queries/useFinalize.ts +109 -0
  40. package/src/data/queries/useForms.ts +31 -0
  41. package/src/data/queries/useInvoice.ts +65 -0
  42. package/src/data/queries/useLeadMagnet.ts +96 -0
  43. package/src/data/queries/useMembership.ts +20 -0
  44. package/src/data/queries/useNotifications.ts +267 -0
  45. package/src/data/queries/useOffers.ts +56 -0
  46. package/src/data/queries/useOrders.ts +71 -0
  47. package/src/data/queries/usePWA.ts +101 -0
  48. package/src/data/queries/usePageActions.ts +36 -0
  49. package/src/data/queries/usePaymentFlow.ts +80 -0
  50. package/src/data/queries/usePaymentLink.ts +47 -0
  51. package/src/data/queries/usePodcast.ts +85 -0
  52. package/src/data/queries/usePostCollections.ts +48 -0
  53. package/src/data/queries/usePosts.ts +94 -0
  54. package/src/data/queries/useProducts.ts +108 -0
  55. package/src/data/queries/useReplay.ts +19 -0
  56. package/src/data/queries/useReviews.ts +122 -0
  57. package/src/data/queries/useShipping.ts +109 -0
  58. package/src/data/queries/useSubscriptions.ts +66 -0
  59. package/src/data/queries/useWebsite.ts +128 -0
  60. package/src/data/queries/useWebsiteAgent.ts +100 -0
  61. package/src/index.ts +98 -0
  62. package/src/provider/ForgeAppProvider.tsx +149 -0
  63. package/src/provider/ForgeProvider.tsx +91 -0
  64. package/src/provider/SiteConfigProvider.tsx +27 -0
  65. package/src/server/_tests/buildPwaHead.spec.ts +182 -0
  66. package/src/server/_tests/buildWebManifest.spec.ts +313 -0
  67. package/src/server/_tests/forgeServiceWorkerScript.spec.ts +251 -0
  68. package/src/server/index.ts +260 -0
  69. package/src/server/jobs.ts +104 -0
  70. package/src/server/pwa.ts +332 -0
  71. package/src/types/index.ts +74 -0
  72. package/src/types/models.ts +1313 -0
  73. package/src/ui/analytics/ForgeAnalytics.tsx +208 -0
  74. package/src/ui/analytics/PageMetaPixel.tsx +92 -0
  75. package/src/ui/content/Editable.tsx +90 -0
  76. package/src/ui/format/PriceDisplay.tsx +142 -0
  77. package/src/ui/format/useFormatCurrency.ts +92 -0
  78. package/src/ui/headless/agent/useAiAgent.ts +106 -0
  79. package/src/ui/headless/auth/useLoginFlow.ts +72 -0
  80. package/src/ui/headless/auth/useSignupForm.ts +85 -0
  81. package/src/ui/headless/broadcast/useBroadcastWatch.ts +59 -0
  82. package/src/ui/headless/chat/attachmentKind.ts +27 -0
  83. package/src/ui/headless/chat/useChatAttachmentUpload.ts +132 -0
  84. package/src/ui/headless/chat/useChatRoom.ts +223 -0
  85. package/src/ui/headless/chat/useMessageThread.ts +60 -0
  86. package/src/ui/headless/checkout/useCheckout.ts +438 -0
  87. package/src/ui/headless/coaching/useCoachingBooking.ts +223 -0
  88. package/src/ui/headless/community/index.ts +20 -0
  89. package/src/ui/headless/community/lexical.ts +131 -0
  90. package/src/ui/headless/community/replyTree.ts +51 -0
  91. package/src/ui/headless/community/richLexical.ts +314 -0
  92. package/src/ui/headless/community/useCommunityAttachmentUpload.ts +137 -0
  93. package/src/ui/headless/community/useCommunitySpaceFeed.ts +122 -0
  94. package/src/ui/headless/community/useCommunityThread.ts +95 -0
  95. package/src/ui/headless/community/useMentionComposer.ts +105 -0
  96. package/src/ui/headless/community/useRichMentionComposer.ts +193 -0
  97. package/src/ui/headless/consent/useCookieConsent.ts +81 -0
  98. package/src/ui/headless/course/useCourseCheckout.ts +99 -0
  99. package/src/ui/headless/dialog.tsx +14 -0
  100. package/src/ui/headless/document/index.ts +7 -0
  101. package/src/ui/headless/document/useContractSignature.ts +68 -0
  102. package/src/ui/headless/document/useDocumentSigningFlow.ts +92 -0
  103. package/src/ui/headless/document/useOtpCodeInput.ts +86 -0
  104. package/src/ui/headless/document/useSignaturePad.ts +180 -0
  105. package/src/ui/headless/donation/Donation.tsx +115 -0
  106. package/src/ui/headless/donation/DonationContext.tsx +223 -0
  107. package/src/ui/headless/donation/fees.ts +15 -0
  108. package/src/ui/headless/donation/index.ts +10 -0
  109. package/src/ui/headless/engagement/usePostEngagement.ts +119 -0
  110. package/src/ui/headless/event/useEventCheckout.ts +141 -0
  111. package/src/ui/headless/forms/useContactForm.ts +58 -0
  112. package/src/ui/headless/forms/useEmailListForm.ts +75 -0
  113. package/src/ui/headless/forms/useSectionedForm.ts +256 -0
  114. package/src/ui/headless/index.ts +60 -0
  115. package/src/ui/headless/invoice/useInvoicePayment.ts +48 -0
  116. package/src/ui/headless/memberHome/index.ts +7 -0
  117. package/src/ui/headless/memberHome/useMemberHomeNav.ts +82 -0
  118. package/src/ui/headless/membership/MembershipGate.tsx +39 -0
  119. package/src/ui/headless/membership/useMembershipCheckout.ts +121 -0
  120. package/src/ui/headless/offer/Offer.tsx +88 -0
  121. package/src/ui/headless/offer/OfferContext.tsx +162 -0
  122. package/src/ui/headless/offer/index.ts +8 -0
  123. package/src/ui/headless/paymentLink/usePaymentLinkPayment.ts +46 -0
  124. package/src/ui/headless/podcast/usePodcastPlayer.ts +96 -0
  125. package/src/ui/headless/posts/index.ts +13 -0
  126. package/src/ui/headless/posts/upsell.ts +41 -0
  127. package/src/ui/headless/posts/useMemberPostsFeed.ts +110 -0
  128. package/src/ui/headless/posts/usePostCollectionDetail.ts +56 -0
  129. package/src/ui/headless/posts/usePostCollectionsList.ts +90 -0
  130. package/src/ui/headless/posts/usePostItem.ts +81 -0
  131. package/src/ui/headless/reviews/index.ts +6 -0
  132. package/src/ui/headless/reviews/useHelpfulVote.ts +45 -0
  133. package/src/ui/headless/reviews/useReviewForm.ts +108 -0
  134. package/src/ui/headless/reviews/useReviewsList.ts +79 -0
  135. package/src/ui/headless/work/index.ts +25 -0
  136. package/src/ui/headless/work/useWorkPortal.ts +349 -0
  137. package/src/ui/index.ts +144 -0
  138. package/src/ui/payment/ForgePaymentProvider.tsx +45 -0
  139. package/src/ui/payment/ForgeStripePayment.tsx +171 -0
  140. package/src/ui/shell/TribeNestApp.tsx +121 -0
  141. package/src/ui/shell/shellGating.spec.ts +28 -0
  142. package/src/ui/shell/shellGating.ts +11 -0
  143. package/src/ui/styled/AccountDashboard.tsx +575 -0
  144. package/src/ui/styled/AiAgentWidget.tsx +152 -0
  145. package/src/ui/styled/AudioPlayer.tsx +123 -0
  146. package/src/ui/styled/BlogCategory.tsx +79 -0
  147. package/src/ui/styled/BlogComments.tsx +236 -0
  148. package/src/ui/styled/BlogList.tsx +101 -0
  149. package/src/ui/styled/BlogPost.tsx +160 -0
  150. package/src/ui/styled/BlogPostFooter.tsx +33 -0
  151. package/src/ui/styled/BotProtection.tsx +101 -0
  152. package/src/ui/styled/Button.tsx +88 -0
  153. package/src/ui/styled/Cart.tsx +276 -0
  154. package/src/ui/styled/ChatRoom.tsx +252 -0
  155. package/src/ui/styled/Checkout.tsx +988 -0
  156. package/src/ui/styled/CheckoutConfirmation.tsx +452 -0
  157. package/src/ui/styled/CoachingBooking.tsx +605 -0
  158. package/src/ui/styled/CoachingConfirmation.tsx +151 -0
  159. package/src/ui/styled/CoachingDetail.tsx +99 -0
  160. package/src/ui/styled/CohortPage.tsx +82 -0
  161. package/src/ui/styled/ConfirmSubscription.tsx +134 -0
  162. package/src/ui/styled/Confirmation.tsx +171 -0
  163. package/src/ui/styled/ContactForm.tsx +81 -0
  164. package/src/ui/styled/CookieConsent.tsx +239 -0
  165. package/src/ui/styled/CourseAccess.tsx +169 -0
  166. package/src/ui/styled/CourseCheckout.tsx +425 -0
  167. package/src/ui/styled/CourseConfirmation.tsx +191 -0
  168. package/src/ui/styled/CourseDetail.tsx +140 -0
  169. package/src/ui/styled/CoursesGrid.tsx +85 -0
  170. package/src/ui/styled/CurrencySwitcher.tsx +51 -0
  171. package/src/ui/styled/DonationButton.tsx +247 -0
  172. package/src/ui/styled/DonationPage.tsx +29 -0
  173. package/src/ui/styled/EmailListForm.tsx +88 -0
  174. package/src/ui/styled/EventConfirmation.tsx +228 -0
  175. package/src/ui/styled/EventCountdown.tsx +98 -0
  176. package/src/ui/styled/EventDetail.tsx +141 -0
  177. package/src/ui/styled/EventTickets.tsx +548 -0
  178. package/src/ui/styled/EventsList.tsx +83 -0
  179. package/src/ui/styled/ForgotPasswordForm.tsx +105 -0
  180. package/src/ui/styled/FormRenderer.tsx +249 -0
  181. package/src/ui/styled/InstallBanner.tsx +114 -0
  182. package/src/ui/styled/InvoiceConfirmation.tsx +50 -0
  183. package/src/ui/styled/InvoicePayment.tsx +141 -0
  184. package/src/ui/styled/LeadMagnet.tsx +93 -0
  185. package/src/ui/styled/Loading.tsx +56 -0
  186. package/src/ui/styled/LoginForm.tsx +134 -0
  187. package/src/ui/styled/Markdown.tsx +103 -0
  188. package/src/ui/styled/MembershipCheckout.tsx +197 -0
  189. package/src/ui/styled/MembershipTiers.tsx +115 -0
  190. package/src/ui/styled/OfferButton.tsx +181 -0
  191. package/src/ui/styled/PageActions.tsx +124 -0
  192. package/src/ui/styled/PaymentLinkConfirmation.tsx +50 -0
  193. package/src/ui/styled/PaymentLinkPayment.tsx +85 -0
  194. package/src/ui/styled/Paywall.tsx +54 -0
  195. package/src/ui/styled/PlayButton.tsx +48 -0
  196. package/src/ui/styled/PodcastEpisode.tsx +137 -0
  197. package/src/ui/styled/PodcastList.tsx +58 -0
  198. package/src/ui/styled/PodcastShow.tsx +164 -0
  199. package/src/ui/styled/PostsFeed.tsx +63 -0
  200. package/src/ui/styled/ProductDetail.tsx +616 -0
  201. package/src/ui/styled/ProductGrid.tsx +82 -0
  202. package/src/ui/styled/PushOptIn.tsx +65 -0
  203. package/src/ui/styled/PwaRegistration.tsx +58 -0
  204. package/src/ui/styled/ReactionBar.tsx +93 -0
  205. package/src/ui/styled/ReplayList.tsx +134 -0
  206. package/src/ui/styled/ResetPasswordForm.tsx +127 -0
  207. package/src/ui/styled/ReviewForm.tsx +292 -0
  208. package/src/ui/styled/ReviewsSection.tsx +260 -0
  209. package/src/ui/styled/SectionedFormRenderer.tsx +146 -0
  210. package/src/ui/styled/SignupForm.tsx +109 -0
  211. package/src/ui/styled/UserMenu.tsx +166 -0
  212. package/src/ui/styled/chat/ChatAttachments.tsx +172 -0
  213. package/src/ui/styled/chat/ChatComposer.tsx +153 -0
  214. package/src/ui/styled/chat/ChatThreadPanel.tsx +94 -0
  215. package/src/ui/styled/chat/MessageBubble.tsx +66 -0
  216. package/src/ui/styled/chat/NewDmDialog.tsx +78 -0
  217. package/src/ui/styled/community/CommunityComposer.tsx +358 -0
  218. package/src/ui/styled/community/CommunityFeed.tsx +483 -0
  219. package/src/ui/styled/community/CommunityLeaderboard.tsx +109 -0
  220. package/src/ui/styled/community/CommunityMediaGallery.tsx +116 -0
  221. package/src/ui/styled/community/CommunityMemberProfile.tsx +285 -0
  222. package/src/ui/styled/community/CommunityNotifications.tsx +222 -0
  223. package/src/ui/styled/community/CommunityPostCard.tsx +165 -0
  224. package/src/ui/styled/community/CommunityPostDetail.tsx +337 -0
  225. package/src/ui/styled/community/CommunityReactionBar.tsx +107 -0
  226. package/src/ui/styled/community/CommunityRichText.tsx +157 -0
  227. package/src/ui/styled/community/CommunitySpaces.tsx +174 -0
  228. package/src/ui/styled/community/MemberAvatar.tsx +74 -0
  229. package/src/ui/styled/community/index.ts +23 -0
  230. package/src/ui/styled/community/util.ts +15 -0
  231. package/src/ui/styled/members/MemberHomeLayout.tsx +98 -0
  232. package/src/ui/styled/members/MemberPostCard.tsx +392 -0
  233. package/src/ui/styled/members/MemberPostsFeed.tsx +219 -0
  234. package/src/ui/styled/members/PostCollectionDetail.tsx +227 -0
  235. package/src/ui/styled/members/PostCollectionsGrid.tsx +287 -0
  236. package/src/ui/styled/members/index.ts +7 -0
  237. package/src/ui/styled/rich-text.css +150 -0
  238. package/src/ui/styled/work/WorkInviteAccept.tsx +222 -0
  239. package/src/ui/styled/work/WorkPortalProjects.tsx +163 -0
  240. package/src/ui/styled/work/WorkProjectInvoices.tsx +113 -0
  241. package/src/ui/styled/work/WorkProjectReport.tsx +66 -0
  242. package/src/ui/styled/work/WorkReportBody.tsx +327 -0
  243. package/src/ui/styled/work/WorkTaskAttachments.tsx +67 -0
  244. package/src/ui/styled/work/WorkTaskComments.tsx +151 -0
  245. package/src/ui/styled/work/WorkTaskDetail.tsx +92 -0
  246. package/src/ui/styled/work/WorkTokenReport.tsx +49 -0
  247. package/src/ui/styled/work/index.ts +10 -0
  248. package/src/ui/theme/ForgeThemeProvider.tsx +121 -0
  249. package/src/ui/theme/contrast.ts +22 -0
  250. package/src/utils/analyticsBus.ts +31 -0
  251. package/src/utils/attribution.ts +68 -0
  252. package/src/utils/cookieConsent.ts +83 -0
  253. package/src/utils/landing.ts +153 -0
  254. package/src/utils/metaPixel.ts +122 -0
  255. package/src/utils/structuredData.ts +126 -0
package/src/ui/styled/Cart.tsx ADDED
@@ -0,0 +1,276 @@
1
+ import { useEffect } from "react";
2
+ import { createPortal } from "react-dom";
3
+ import { ShoppingBag, X, Trash2 } from "lucide-react";
4
+ import { useCart } from "../../contexts/CartContext";
5
+ import { useThemeTokens } from "../theme/ForgeThemeProvider";
6
+ import { readableTextOn } from "../theme/contrast";
7
+ import { useAmountFormatter } from "../format/useFormatCurrency";
8
+ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
9
+
10
+ export interface CartProps {
11
+ /** Custom cart icon (defaults to a shopping bag). */
12
+ icon?: React.ReactNode;
13
+ /** Where "Checkout" navigates. Default `/i/checkout`. */
14
+ checkoutPath?: string;
15
+ /** Build a product link for a cart item. Default `/i/store/{productId}`. */
16
+ productHref?: (productId: string) => string;
17
+ /** Format a numeric amount for display. */
18
+ formatAmount?: (amount: number) => string;
19
+ /** Extra class(es) on the trigger button. */
20
+ className?: string;
21
+ /** Inline style merged into the trigger button. */
22
+ style?: React.CSSProperties;
23
+ }
24
+
25
+ const KEYFRAMES = "@keyframes forge-cart-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}";
26
+
27
+ // The drawer is portaled to <body>, so it escapes any stacking/containing
28
+ // context an AI-authored site may introduce on an ancestor (transform, filter,
29
+ // contain, will-change…). These z-indexes sit far above the rest of the Forge
30
+ // scale (audio player 50, cookie consent 70, chat 1000) so no page markup —
31
+ // including a full-bleed hero overlay — can out-rank the cart.
32
+ const OVERLAY_Z = 2147483000;
33
+ const DRAWER_Z = 2147483001;
34
+
35
+ /**
36
+ * Drop-in cart: a themed cart icon (with an item-count badge) that opens a
37
+ * right-hand drawer listing the cart, totals, and a Checkout button. Built on
38
+ * the Forge `useCart` context (requires `CartProvider`, already in the site
39
+ * root). Pass your own `icon` or get the default shopping-bag. Drop it into a
40
+ * header: `<Cart />`.
41
+ */
42
+ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAmount, className, style }: CartProps) {
43
+ const t = useThemeTokens();
44
+ const fmt = useAmountFormatter(formatAmount);
45
+ // Inclusive stores show a muted "incl. tax" caption on the cart total; the
46
+ // exact tax figure only exists once checkout quotes it (display-only).
47
+ const pricesIncludeTax = usePricesIncludeTax();
48
+ const { cartItems, removeFromCart, isCartOpen, setCartOpen } = useCart();
49
+
50
+ const total = cartItems.reduce((sum, i) => sum + i.price * i.quantity, 0);
51
+ const count = cartItems.length;
52
+ const onPrimary = t.textPrimary || readableTextOn(t.primary);
53
+ const linkFor = (productId: string) => (productHref ? productHref(productId) : `/i/store/${productId}`);
54
+
55
+ // Lock body scroll while the drawer is open.
56
+ useEffect(() => {
57
+ if (typeof document === "undefined") return;
58
+ document.body.style.overflow = isCartOpen ? "hidden" : "";
59
+ return () => {
60
+ document.body.style.overflow = "";
61
+ };
62
+ }, [isCartOpen]);
63
+
64
+ const goCheckout = () => {
65
+ setCartOpen(false);
66
+ if (typeof window !== "undefined") window.location.href = checkoutPath;
67
+ };
68
+
69
+ return (
70
+ <>
71
+ <button
72
+ type="button"
73
+ onClick={() => setCartOpen((p) => !p)}
74
+ aria-label="Open cart"
75
+ className={className}
76
+ style={{
77
+ position: "relative",
78
+ background: "transparent",
79
+ border: "none",
80
+ cursor: "pointer",
81
+ color: t.text,
82
+ display: "inline-flex",
83
+ alignItems: "center",
84
+ padding: 4,
85
+ ...style,
86
+ }}
87
+ >
88
+ {icon ?? <ShoppingBag size={22} />}
89
+ {count > 0 && (
90
+ <span
91
+ style={{
92
+ position: "absolute",
93
+ top: -4,
94
+ right: -4,
95
+ minWidth: 16,
96
+ height: 16,
97
+ padding: "0 4px",
98
+ borderRadius: 999,
99
+ background: t.primary,
100
+ color: onPrimary,
101
+ fontSize: 10,
102
+ fontWeight: 700,
103
+ display: "inline-flex",
104
+ alignItems: "center",
105
+ justifyContent: "center",
106
+ lineHeight: 1,
107
+ }}
108
+ >
109
+ {count}
110
+ </span>
111
+ )}
112
+ </button>
113
+
114
+ {isCartOpen && typeof document !== "undefined" && createPortal(
115
+ <>
116
+ <style>{KEYFRAMES}</style>
117
+ <div
118
+ onClick={() => setCartOpen(false)}
119
+ aria-label="Close cart"
120
+ style={{ position: "fixed", inset: 0, zIndex: OVERLAY_Z, background: "rgba(0,0,0,0.3)" }}
121
+ />
122
+ <aside
123
+ style={{
124
+ position: "fixed",
125
+ top: 0,
126
+ right: 0,
127
+ height: "100%",
128
+ width: "100%",
129
+ maxWidth: 420,
130
+ zIndex: DRAWER_Z,
131
+ background: t.background,
132
+ color: t.text,
133
+ borderLeft: `2px solid ${t.primary}`,
134
+ boxShadow: "-8px 0 30px -20px rgba(0,0,0,0.5)",
135
+ display: "flex",
136
+ flexDirection: "column",
137
+ fontFamily: t.fontFamily,
138
+ animation: "forge-cart-slide .3s cubic-bezier(.4,0,.2,1)",
139
+ }}
140
+ >
141
+ <div
142
+ style={{
143
+ display: "flex",
144
+ alignItems: "center",
145
+ justifyContent: "space-between",
146
+ padding: 16,
147
+ borderBottom: `1px solid ${t.border}`,
148
+ }}
149
+ >
150
+ <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>My Cart</h2>
151
+ <button
152
+ type="button"
153
+ onClick={() => setCartOpen(false)}
154
+ aria-label="Close cart"
155
+ style={{ background: "transparent", border: "none", cursor: "pointer", color: t.text }}
156
+ >
157
+ <X size={22} />
158
+ </button>
159
+ </div>
160
+
161
+ <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>
162
+ {count === 0 ? (
163
+ <p style={{ textAlign: "center", opacity: 0.7 }}>Your cart is empty.</p>
164
+ ) : (
165
+ cartItems.map((item) => (
166
+ <div
167
+ key={item.productId + item.productVariantId + String(item.isGift) + (item.recipientEmail || "")}
168
+ style={{
169
+ display: "flex",
170
+ gap: 12,
171
+ alignItems: "flex-start",
172
+ borderBottom: `1px solid ${t.border}`,
173
+ paddingBottom: 16,
174
+ position: "relative",
175
+ }}
176
+ >
177
+ <img
178
+ src={item.coverImage || undefined}
179
+ alt={item.title}
180
+ style={{
181
+ width: 64,
182
+ height: 64,
183
+ objectFit: "cover",
184
+ borderRadius: t.cornerRadius,
185
+ background: `${t.primary}10`,
186
+ flexShrink: 0,
187
+ }}
188
+ />
189
+ <div style={{ flex: 1, minWidth: 0, paddingRight: 28 }}>
190
+ <a
191
+ href={linkFor(item.productId)}
192
+ style={{
193
+ fontWeight: 600,
194
+ color: t.text,
195
+ textDecoration: "none",
196
+ display: "block",
197
+ overflow: "hidden",
198
+ textOverflow: "ellipsis",
199
+ whiteSpace: "nowrap",
200
+ }}
201
+ >
202
+ {item.title}
203
+ </a>
204
+ <div style={{ fontSize: 14, opacity: 0.8 }}>{fmt(item.price)}</div>
205
+ {item.color && item.size && (
206
+ <div
207
+ style={{ fontSize: 12, marginTop: 4, display: "flex", alignItems: "center", gap: 8, color: t.primary }}
208
+ >
209
+ <span style={{ width: 14, height: 14, borderRadius: "50%", background: item.color, display: "inline-block" }} />
210
+ {item.size}
211
+ </div>
212
+ )}
213
+ {item.isGift && (
214
+ <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>
215
+ Gift for {item.recipientName} ({item.recipientEmail})
216
+ </div>
217
+ )}
218
+ <div style={{ fontSize: 12, marginTop: 4, opacity: 0.7 }}>Qty: {item.quantity}</div>
219
+ </div>
220
+ <button
221
+ type="button"
222
+ onClick={() => removeFromCart(item.productVariantId, item.isGift, item.recipientEmail)}
223
+ aria-label="Remove item"
224
+ style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
225
+ >
226
+ <Trash2 size={16} />
227
+ </button>
228
+ </div>
229
+ ))
230
+ )}
231
+ </div>
232
+
233
+ {count > 0 && (
234
+ <div
235
+ style={{
236
+ padding: 16,
237
+ borderTop: `1px solid ${t.border}`,
238
+ background: t.background,
239
+ }}
240
+ >
241
+ <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
242
+ <span style={{ fontSize: 18, fontWeight: 600 }}>Total:</span>
243
+ <span style={{ fontSize: 18, fontWeight: 800, color: t.primary, textAlign: "right" }}>
244
+ {fmt(total)}
245
+ {pricesIncludeTax && (
246
+ <span style={{ display: "block", fontSize: 11, fontWeight: 400, color: t.text, opacity: 0.65 }}>
247
+ incl. tax
248
+ </span>
249
+ )}
250
+ </span>
251
+ </div>
252
+ <button
253
+ type="button"
254
+ onClick={goCheckout}
255
+ style={{
256
+ width: "100%",
257
+ padding: "12px 16px",
258
+ borderRadius: t.cornerRadius,
259
+ border: "none",
260
+ fontWeight: 700,
261
+ cursor: "pointer",
262
+ background: t.primary,
263
+ color: onPrimary,
264
+ }}
265
+ >
266
+ Checkout
267
+ </button>
268
+ </div>
269
+ )}
270
+ </aside>
271
+ </>,
272
+ document.body,
273
+ )}
274
+ </>
275
+ );
276
+ }
package/src/ui/styled/ChatRoom.tsx ADDED
@@ -0,0 +1,252 @@
1
+ import { useEffect, useRef, useState } from "react";
2
+ import { Lock } from "lucide-react";
3
+ import type { ChatChannel, ChatMessage } from "../../data/queries/useChat";
4
+ import { useForgeTheme } from "../theme/ForgeThemeProvider";
5
+ import { readableTextOn } from "../theme/contrast";
6
+ import { Loading } from "./Loading";
7
+ import { useChatRoom } from "../headless/chat/useChatRoom";
8
+ import { MessageBubble } from "./chat/MessageBubble";
9
+ import { ChatComposer } from "./chat/ChatComposer";
10
+ import { ChatThreadPanel } from "./chat/ChatThreadPanel";
11
+ import { NewDmDialog } from "./chat/NewDmDialog";
12
+
13
+ export interface ChatRoomProps {}
14
+
15
+ const channelLabel = (c: ChatChannel): string => {
16
+ if (c.type === "dm") {
17
+ const p = c.otherParticipant;
18
+ if (p) return `${p.firstName ?? ""} ${p.lastName ?? ""}`.trim() || p.email;
19
+ return c.name ?? "Direct message";
20
+ }
21
+ return `# ${c.name ?? "channel"}`;
22
+ };
23
+
24
+ // Reference implementation of the community chat, built entirely on the
25
+ // `useChatRoom` primitive (channels + messages + realtime socket + read
26
+ // receipts + threads + member DMs). A creator can rebuild this UI from the same hook.
27
+ export function ChatRoom(_props: ChatRoomProps) {
28
+ const theme = useForgeTheme();
29
+ const room = useChatRoom();
30
+ const [showSidebar, setShowSidebar] = useState(true);
31
+ const [showNewDm, setShowNewDm] = useState(false);
32
+
33
+ const border = `1px solid ${theme.colors.text}1a`;
34
+
35
+ const unreadFor = (id: string) => room.unreadCounts.find((u) => u.channelId === id)?.unreadCount ?? 0;
36
+
37
+ const renderChannel = (c: ChatChannel, icon?: React.ReactNode) => {
38
+ const unread = unreadFor(c.id);
39
+ const active = room.selectedChannel?.id === c.id;
40
+ return (
41
+ <button
42
+ key={c.id}
43
+ onClick={() => {
44
+ room.selectChannel(c);
45
+ setShowSidebar(false);
46
+ }}
47
+ style={{
48
+ textAlign: "left",
49
+ padding: "10px 16px",
50
+ background: active ? `${theme.colors.primary}1a` : "transparent",
51
+ border: "none",
52
+ cursor: "pointer",
53
+ color: theme.colors.text,
54
+ display: "flex",
55
+ justifyContent: "space-between",
56
+ alignItems: "center",
57
+ gap: 8,
58
+ width: "100%",
59
+ }}
60
+ >
61
+ <span
62
+ style={{
63
+ display: "flex",
64
+ alignItems: "center",
65
+ gap: 6,
66
+ minWidth: 0,
67
+ fontWeight: active ? 700 : 500,
68
+ }}
69
+ >
70
+ {icon}
71
+ <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
72
+ {icon ? c.name ?? "channel" : channelLabel(c)}
73
+ </span>
74
+ </span>
75
+ {unread > 0 && (
76
+ <span
77
+ style={{
78
+ background: theme.colors.primary,
79
+ color: readableTextOn(theme.colors.primary),
80
+ borderRadius: 999,
81
+ fontSize: 12,
82
+ padding: "1px 7px",
83
+ }}
84
+ >
85
+ {unread}
86
+ </span>
87
+ )}
88
+ </button>
89
+ );
90
+ };
91
+
92
+ const renderGroup = (label: string, list: ChatChannel[], icon?: React.ReactNode) =>
93
+ list.length === 0 ? null : (
94
+ <div key={label} style={{ paddingBottom: 4 }}>
95
+ <div
96
+ style={{
97
+ fontSize: 11,
98
+ fontWeight: 600,
99
+ textTransform: "uppercase",
100
+ letterSpacing: 0.5,
101
+ opacity: 0.55,
102
+ padding: "12px 16px 4px",
103
+ }}
104
+ >
105
+ {label}
106
+ </div>
107
+ {list.map((c) => renderChannel(c, icon))}
108
+ </div>
109
+ );
110
+
111
+ if (room.channelsLoading) return <Loading fullPage />;
112
+
113
+ return (
114
+ <div style={{ display: "flex", height: "calc(100vh - 200px)", border, borderRadius: theme.cornerRadius, overflow: "hidden" }}>
115
+ {/* Channel list — full-width on mobile, fixed rail on desktop */}
116
+ <aside
117
+ className={`${showSidebar ? "flex" : "hidden"} md:flex w-full md:w-[260px] flex-col`}
118
+ style={{ borderRight: border, overflowY: "auto" }}
119
+ >
120
+ <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px", borderBottom: border }}>
121
+ <h2 style={{ fontWeight: 700, margin: 0 }}>Channels</h2>
122
+ <button
123
+ onClick={() => setShowNewDm(true)}
124
+ title="New message"
125
+ style={{ background: theme.colors.primary, color: readableTextOn(theme.colors.primary), border: "none", borderRadius: theme.cornerRadius, width: 28, height: 28, cursor: "pointer", fontSize: 18, lineHeight: 1 }}
126
+ >
127
+ +
128
+ </button>
129
+ </div>
130
+ {renderGroup(
131
+ "Public",
132
+ room.channels.filter((c) => c.type === "public"),
133
+ )}
134
+ {renderGroup(
135
+ "Private channels",
136
+ room.channels.filter((c) => c.type === "private"),
137
+ <Lock size={14} style={{ opacity: 0.7, flexShrink: 0 }} />,
138
+ )}
139
+ {renderGroup(
140
+ "Direct messages",
141
+ room.channels.filter((c) => c.type === "dm"),
142
+ )}
143
+ {room.channels.length === 0 && (
144
+ <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>No channels yet.</div>
145
+ )}
146
+ </aside>
147
+
148
+ {/* Message panel */}
149
+ <section className={`${showSidebar ? "hidden" : "flex"} md:flex flex-1 flex-col min-w-0`}>
150
+ {room.selectedChannel ? (
151
+ <MessagePanel room={room} onBack={() => setShowSidebar(true)} border={border} />
152
+ ) : (
153
+ <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", opacity: 0.5 }}>
154
+ Select a channel to start chatting
155
+ </div>
156
+ )}
157
+ </section>
158
+
159
+ {/* Thread panel (side panel on desktop, overlay on mobile) */}
160
+ {room.activeThreadParent && (
161
+ <ChatThreadPanel
162
+ parentMessage={room.activeThreadParent}
163
+ socket={room.socket}
164
+ currentAccountId={room.currentAccountId}
165
+ onClose={room.closeThread}
166
+ onMarkAsRead={room.markAsRead}
167
+ border={border}
168
+ />
169
+ )}
170
+
171
+ {showNewDm && (
172
+ <NewDmDialog
173
+ members={room.memberDirectory}
174
+ isStarting={room.isStartingDm}
175
+ onSelect={async (accountId) => {
176
+ await room.startMemberDm(accountId);
177
+ setShowNewDm(false);
178
+ setShowSidebar(false);
179
+ }}
180
+ onClose={() => setShowNewDm(false)}
181
+ />
182
+ )}
183
+ </div>
184
+ );
185
+ }
186
+
187
+ function MessagePanel({
188
+ room,
189
+ onBack,
190
+ border,
191
+ }: {
192
+ room: ReturnType<typeof useChatRoom>;
193
+ onBack: () => void;
194
+ border: string;
195
+ }) {
196
+ const theme = useForgeTheme();
197
+ const listRef = useRef<HTMLDivElement | null>(null);
198
+
199
+ // Mark visible messages as read when they change.
200
+ useEffect(() => {
201
+ const unreadIds = room.messages
202
+ .filter((m: ChatMessage) => m.senderAccountId !== room.currentAccountId)
203
+ .map((m) => m.id);
204
+ if (unreadIds.length) room.markAsRead(unreadIds);
205
+ // eslint-disable-next-line react-hooks/exhaustive-deps
206
+ }, [room.messages.length, room.selectedChannel?.id]);
207
+
208
+ const title = room.selectedChannel ? channelLabel(room.selectedChannel) : "channel";
209
+
210
+ return (
211
+ <>
212
+ <header style={{ padding: "12px 16px", borderBottom: border, display: "flex", alignItems: "center", gap: 12 }}>
213
+ <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", color: theme.colors.text }}>
214
+ ←
215
+ </button>
216
+ <strong>{title}</strong>
217
+ </header>
218
+
219
+ {room.pinnedMessages.length > 0 && (
220
+ <div style={{ padding: "8px 16px", borderBottom: border, fontSize: 13, opacity: 0.8 }}>
221
+ 📌 {room.pinnedMessages[0].content}
222
+ </div>
223
+ )}
224
+
225
+ <div ref={listRef} style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column-reverse", gap: 10 }}>
226
+ {room.messages.map((m: ChatMessage) => (
227
+ <MessageBubble
228
+ key={m.id}
229
+ message={m}
230
+ mine={m.senderAccountId === room.currentAccountId}
231
+ onOpenThread={room.openThread}
232
+ />
233
+ ))}
234
+ {room.hasMore && (
235
+ <button onClick={() => room.fetchNextPage()} style={{ alignSelf: "center", background: "none", border, borderRadius: 8, padding: "4px 10px", cursor: "pointer", color: theme.colors.text }}>
236
+ Load earlier
237
+ </button>
238
+ )}
239
+ </div>
240
+
241
+ {room.typingUsers.length > 0 && (
242
+ <div style={{ padding: "0 16px 6px", fontSize: 12, opacity: 0.6 }}>{room.typingUsers.join(", ")} typing…</div>
243
+ )}
244
+
245
+ <ChatComposer
246
+ onSend={(content, attachments) => room.sendMessage(content, attachments)}
247
+ onTyping={room.handleTyping}
248
+ border={border}
249
+ />
250
+ </>
251
+ );
252
+ }