@patientos/website-kit 0.2.7 → 0.2.9

package/dist/{chunk-IOC6QLB7.js → chunk-BHF7S6UQ.js}

@@ -75,7 +75,7 @@ function CartLineList({
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: line.quantity }),
+      /* @__PURE__ */ jsx("span", { className: "sk-cart__qty-value", "aria-live": "polite", children: line.quantity }),
       /* @__PURE__ */ jsx(
         "button",
         {

package/dist/{chunk-HYXTDUP2.js → chunk-DP2HJMVB.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk-THMT43MV.js";
 import {
   CartClient
-} from "./chunk-2CZFJOKK.js";
+} from "./chunk-U6FJ6XYX.js";
 import {
   CartButtonClient
-} from "./chunk-ZNH6TSYP.js";
+} from "./chunk-ORGTP5GB.js";
 import {
   CheckoutClient
 } from "./chunk-S3ZQQOQT.js";
 import {
   StoreClient
-} from "./chunk-673YEXAI.js";
+} from "./chunk-UTAMB2SK.js";
 
 // src/islands-registry.tsx
 var ISLANDS = {

package/dist/{chunk-ZNH6TSYP.js → chunk-ORGTP5GB.js}

@@ -5,7 +5,7 @@ import {
   UnsupportedCartLineList,
   quoteSourceQuantities,
   useCartQuote
-} from "./chunk-IOC6QLB7.js";
+} from "./chunk-BHF7S6UQ.js";
 import {
   createStoreClient
 } from "./chunk-7BUDUYXN.js";

package/dist/{chunk-2CZFJOKK.js → chunk-U6FJ6XYX.js}

@@ -5,7 +5,7 @@ import {
   UnsupportedCartLineList,
   quoteSourceQuantities,
   useCartQuote
-} from "./chunk-IOC6QLB7.js";
+} from "./chunk-BHF7S6UQ.js";
 import {
   createStoreClient
 } from "./chunk-7BUDUYXN.js";

package/dist/{chunk-673YEXAI.js → chunk-UTAMB2SK.js}

@@ -17,6 +17,29 @@ import {
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SKELETON_CARDS = 6;
+var ADD_BUTTON_ATTR = "data-sk-store-add";
+var STORE_PREHYDRATION_SCRIPT = `(function(){
+if(window.__skStoreArmed)return;window.__skStoreArmed=1;
+document.addEventListener('click',function(e){
+var t=e.target;if(!t||!t.closest)return;
+var b=t.closest('button[${ADD_BUTTON_ATTR}]');if(!b||b.disabled)return;
+var c=b.closest('.sk-store__card');var s=c?c.querySelector('select'):null;
+var v=(s&&s.value)||b.getAttribute('data-sk-store-variant');if(!v)return;
+(b.__skStoreQueue||(b.__skStoreQueue=[])).push({variantId:v,event:e});
+},true);
+})();`;
+function takeQueuedClicks(button) {
+  const queue = button?.__skStoreQueue;
+  if (!queue || queue.length === 0) return [];
+  button.__skStoreQueue = [];
+  return queue;
+}
+function dropQueuedClick(button, nativeEvent) {
+  const queue = button?.__skStoreQueue;
+  if (!queue) return;
+  const at = queue.findIndex((entry) => entry.event === nativeEvent);
+  if (at >= 0) queue.splice(at, 1);
+}
 function StoreClient({
   categoryHandle,
   productHandle,
@@ -70,6 +93,13 @@ function StoreClient({
   }
   const gridStyle = columns ? { "--sk-store-columns": columns } : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasSeed ? /* @__PURE__ */ jsx(
+      "script",
+      {
+        className: "sk-store__prehydration",
+        dangerouslySetInnerHTML: { __html: STORE_PREHYDRATION_SCRIPT }
+      }
+    ) : null,
     /* @__PURE__ */ jsxs("div", { className: "sk-store__header", children: [
       /* @__PURE__ */ jsx("h2", { className: "sk-store__heading", children: title ?? "Shop" }),
       hideCartLink ? null : /* @__PURE__ */ jsxs("a", { className: "sk-store__cart-link", href: "/cart", children: [
@@ -99,10 +129,26 @@ function StoreCard({ product }) {
   const [addFeedback, setAddFeedback] = React.useState(null);
   const variant = product.variants.find((v) => v.id === variantId) ?? product.variants[0];
   const image = product.thumbnailUrl ?? product.images[0]?.url ?? null;
-  async function onAdd() {
-    const result = await addToCart(variant.id, 1);
+  const addRef = React.useRef(null);
+  const add = React.useCallback(async (id) => {
+    const result = await addToCart(id, 1);
     setAddFeedback(result.status);
     window.setTimeout(() => setAddFeedback(null), 1600);
+  }, []);
+  const variants = product.variants;
+  React.useEffect(() => {
+    const queued = takeQueuedClicks(addRef.current);
+    if (queued.length === 0) return;
+    void (async () => {
+      for (const click of queued) {
+        const known = variants.some((v) => v.id === click.variantId);
+        await add(known ? click.variantId : variantId);
+      }
+    })();
+  }, []);
+  function onAdd(nativeEvent) {
+    dropQueuedClick(addRef.current, nativeEvent);
+    void add(variant.id);
   }
   return /* @__PURE__ */ jsxs("li", { className: "sk-store__card", children: [
     /* @__PURE__ */ jsxs("a", { className: "sk-store__card-link", href: `/store/${product.handle}`, children: [
@@ -151,7 +197,10 @@ function StoreCard({ product }) {
       {
         type: "button",
         className: "sk-store__add",
-        onClick: () => void onAdd(),
+        ref: addRef,
+        "data-sk-store-add": "",
+        "data-sk-store-variant": variant.id,
+        onClick: (event) => onAdd(event.nativeEvent),
         disabled: !variant.inStock,
         children: !variant.inStock ? "Sold out" : addFeedback === "added" ? "Added \u2713" : addFeedback === "line_limit" ? "Cart full \u2014 50 products max" : addFeedback === "quantity_limit" ? "Maximum 99 in cart" : addFeedback === "cart_storage_unavailable" ? "This browser can\u2019t safely update the cart" : "Add to cart"
       }
@@ -160,5 +209,6 @@ function StoreCard({ product }) {
 }
 
 export {
+  STORE_PREHYDRATION_SCRIPT,
   StoreClient
 };

package/dist/index.d.ts

@@ -217,6 +217,6 @@ interface PortalSession {
  */
 declare function usePortalSession(): PortalSession;
 
-declare const WEBSITE_KIT_VERSION = "0.2.7";
+declare const WEBSITE_KIT_VERSION = "0.2.9";
 
 export { Button, type ButtonProps, type ButtonVariant, Container, type ContainerProps, FAQ, type FAQProps, type FaqItem, Hero, type HeroProps, Hours, type HoursProps, type HoursRow, MapEmbed, type MapEmbedProps, PortalClient, PortalPrefill, PortalProvider, type PortalProviderProps, type PortalSession, type PortalSessionStatus, PublicClaim, Row, type RowProps, Section, type SectionProps, type Service, ServiceGrid, type ServiceGridProps, Stack, type StackProps, TeamGrid, type TeamGridProps, type TeamMember, ThemeProvider, type ThemeProviderProps, WEBSITE_KIT_VERSION, WebsiteShell, type WebsiteShellProps, type WebsiteTheme, WhoAmI, defaultTheme, resolveTheme, themeToCssVars, usePortalClient, usePortalSession };

package/dist/index.js

@@ -11,7 +11,7 @@ import {
 import {
   ISLANDS,
   mountIslands
-} from "./chunk-HYXTDUP2.js";
+} from "./chunk-DP2HJMVB.js";
 import {
   PortalAccount,
   PortalPanel,
@@ -36,9 +36,9 @@ import {
   mountIslandsWith,
   readIslandProps
 } from "./chunk-THMT43MV.js";
-import "./chunk-2CZFJOKK.js";
-import "./chunk-ZNH6TSYP.js";
-import "./chunk-IOC6QLB7.js";
+import "./chunk-U6FJ6XYX.js";
+import "./chunk-ORGTP5GB.js";
+import "./chunk-BHF7S6UQ.js";
 import "./chunk-S3ZQQOQT.js";
 import {
   BPOINT_SCRIPT_ORIGIN,
@@ -48,7 +48,7 @@ import {
   TURNSTILE_SCRIPT_ORIGIN,
   TURNSTILE_SCRIPT_URL
 } from "./chunk-ZOF22TJA.js";
-import "./chunk-673YEXAI.js";
+import "./chunk-UTAMB2SK.js";
 import {
   fetchStoreCatalog,
   normalizeCatalogResponse,
@@ -511,7 +511,7 @@ function Checkout({
 }
 
 // src/index.ts
-var WEBSITE_KIT_VERSION = "0.2.7";
+var WEBSITE_KIT_VERSION = "0.2.9";
 export {
   BPOINT_SCRIPT_ORIGIN,
   BPOINT_SCRIPT_URL,

package/dist/islands-impl/cart-button.js

@@ -1,8 +1,8 @@
 import {
   CartButtonClient,
   CartDrawer
-} from "../chunk-ZNH6TSYP.js";
-import "../chunk-IOC6QLB7.js";
+} from "../chunk-ORGTP5GB.js";
+import "../chunk-BHF7S6UQ.js";
 import "../chunk-7BUDUYXN.js";
 import "../chunk-4NF7SSIX.js";
 import "../chunk-FZ4WKWIE.js";

package/dist/islands-impl/cart.js

@@ -1,7 +1,7 @@
 import {
   CartClient
-} from "../chunk-2CZFJOKK.js";
-import "../chunk-IOC6QLB7.js";
+} from "../chunk-U6FJ6XYX.js";
+import "../chunk-BHF7S6UQ.js";
 import "../chunk-7BUDUYXN.js";
 import "../chunk-4NF7SSIX.js";
 import "../chunk-FZ4WKWIE.js";

package/dist/islands-impl/checkout.js

@@ -2,7 +2,7 @@ import {
   CheckoutClient
 } from "../chunk-S3ZQQOQT.js";
 import "../chunk-ZOF22TJA.js";
-import "../chunk-673YEXAI.js";
+import "../chunk-UTAMB2SK.js";
 import "../chunk-WQSJ46TP.js";
 import "../chunk-7BUDUYXN.js";
 import "../chunk-4NF7SSIX.js";

package/dist/islands-impl/store.d.ts

@@ -17,6 +17,14 @@ type StoreClientProps = StoreProps & {
      */
     initialCatalog?: StoreCatalog | null;
 };
+/**
+ * The inline script rendered into SERVER HTML beside a seeded grid.
+ *
+ * Deliberately tiny, dependency-free and idempotent (several store islands can share
+ * one page). It only records — it never writes the cart, because the cart writer is
+ * async, lock-serialised, and lives in the bundle that has not arrived yet.
+ */
+declare const STORE_PREHYDRATION_SCRIPT = "(function(){\nif(window.__skStoreArmed)return;window.__skStoreArmed=1;\ndocument.addEventListener('click',function(e){\nvar t=e.target;if(!t||!t.closest)return;\nvar b=t.closest('button[data-sk-store-add]');if(!b||b.disabled)return;\nvar c=b.closest('.sk-store__card');var s=c?c.querySelector('select'):null;\nvar v=(s&&s.value)||b.getAttribute('data-sk-store-variant');if(!v)return;\n(b.__skStoreQueue||(b.__skStoreQueue=[])).push({variantId:v,event:e});\n},true);\n})();";
 declare function StoreClient({ categoryHandle, productHandle, storeApiOrigin, title, columns, hideCartLink, initialCatalog, }: StoreClientProps): React.ReactElement;
 
-export { StoreClient, type StoreClientProps };
+export { STORE_PREHYDRATION_SCRIPT, StoreClient, type StoreClientProps };

package/dist/islands-impl/store.js

@@ -1,6 +1,7 @@
 import {
+  STORE_PREHYDRATION_SCRIPT,
   StoreClient
-} from "../chunk-673YEXAI.js";
+} from "../chunk-UTAMB2SK.js";
 import "../chunk-WQSJ46TP.js";
 import {
   formatMoney
@@ -9,6 +10,7 @@ import "../chunk-4NF7SSIX.js";
 import "../chunk-FZ4WKWIE.js";
 import "../chunk-MLKGABMK.js";
 export {
+  STORE_PREHYDRATION_SCRIPT,
   StoreClient,
   formatMoney
 };

package/dist/islands-impl.js

@@ -9,18 +9,18 @@ import "./chunk-QDO3SJWR.js";
 import "./chunk-THMT43MV.js";
 import {
   CartClient
-} from "./chunk-2CZFJOKK.js";
+} from "./chunk-U6FJ6XYX.js";
 import {
   CartButtonClient
-} from "./chunk-ZNH6TSYP.js";
-import "./chunk-IOC6QLB7.js";
+} from "./chunk-ORGTP5GB.js";
+import "./chunk-BHF7S6UQ.js";
 import {
   CheckoutClient
 } from "./chunk-S3ZQQOQT.js";
 import "./chunk-ZOF22TJA.js";
 import {
   StoreClient
-} from "./chunk-673YEXAI.js";
+} from "./chunk-UTAMB2SK.js";
 import "./chunk-WQSJ46TP.js";
 import "./chunk-7BUDUYXN.js";
 import "./chunk-4NF7SSIX.js";

package/dist/islands-registry.js

@@ -1,17 +1,17 @@
 import {
   ISLANDS,
   mountIslands
-} from "./chunk-HYXTDUP2.js";
+} from "./chunk-DP2HJMVB.js";
 import "./chunk-4GKSSM5N.js";
 import "./chunk-3T7UWKAH.js";
 import "./chunk-QDO3SJWR.js";
 import "./chunk-THMT43MV.js";
-import "./chunk-2CZFJOKK.js";
-import "./chunk-ZNH6TSYP.js";
-import "./chunk-IOC6QLB7.js";
+import "./chunk-U6FJ6XYX.js";
+import "./chunk-ORGTP5GB.js";
+import "./chunk-BHF7S6UQ.js";
 import "./chunk-S3ZQQOQT.js";
 import "./chunk-ZOF22TJA.js";
-import "./chunk-673YEXAI.js";
+import "./chunk-UTAMB2SK.js";
 import "./chunk-WQSJ46TP.js";
 import "./chunk-7BUDUYXN.js";
 import "./chunk-4NF7SSIX.js";

package/dist/website-kit.css

@@ -2891,19 +2891,59 @@ select.sk-identity__input[data-empty] {
   list-style: none;
   margin: 0;
   padding: 0;
+  /* The drawer is ~380px inside a wide viewport, so a VIEWPORT media query can never
+     tell us the row is cramped (PAT-948). Size the row off its own container instead. */
+  container-type: inline-size;
+  container-name: sk-cart-lines;
 }
 .sk-cart__line {
   display: grid;
-  grid-template-columns: 1fr auto auto auto;
+  /* Five children, so name five tracks. They used to run in a FOUR-column grid, which
+     wrapped Remove onto its own row where it stretched the full 1fr title column and
+     centred its own label — the reason it floated mid-row (PAT-948). */
+  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
+  grid-template-areas: 'title unit qty total remove';
   align-items: center;
   gap: calc(var(--sk-space, 0.5rem) * 2);
   padding: calc(var(--sk-space, 0.5rem) * 2) 0;
   border-bottom: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
 }
+.sk-cart__line-title {
+  grid-area: title;
+}
+.sk-cart__line-unit {
+  grid-area: unit;
+}
+.sk-cart__qty {
+  grid-area: qty;
+}
+.sk-cart__line-total {
+  grid-area: total;
+}
+.sk-cart__remove {
+  grid-area: remove;
+}
+/* Narrow CONTAINER (the drawer, and a phone): two columns, three rows. */
+@container sk-cart-lines (max-width: 34rem) {
+  .sk-cart__line {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'title title'
+      'unit total'
+      'qty remove';
+    row-gap: calc(var(--sk-space, 0.5rem) * 1);
+  }
+}
 .sk-cart__line-title {
   color: inherit;
   font-weight: 600;
   text-decoration: none;
+  /* One line, clipped — a product name is not worth reflowing the row it sits in.
+     min-width:0 is what lets the 1fr track actually shrink inside a grid. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .sk-cart__line-unit {
   font-size: 0.875rem;
@@ -2913,6 +2953,14 @@ select.sk-identity__input[data-empty] {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--sk-space, 0.5rem) * 1);
+  justify-self: start;
+}
+/* The quantity reserves room for two digits and uses tabular figures, so stepping
+   1 -> 2 -> 10 never shifts the − and + buttons under the shopper's cursor. */
+.sk-cart__qty-value {
+  min-width: 2ch;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
 }
 .sk-cart__qty button {
   min-width: 2rem;
@@ -2928,6 +2976,10 @@ select.sk-identity__input[data-empty] {
 .sk-cart__line-total {
   font-variant-numeric: tabular-nums;
   font-weight: 600;
+  /* Reserve the widest realistic total so $70.00 and $599.00 hold the same column
+     and the stepper beside them does not slide between lines. */
+  min-width: 6ch;
+  text-align: right;
 }
 .sk-cart__remove {
   border: 0;
@@ -2938,6 +2990,11 @@ select.sk-identity__input[data-empty] {
   opacity: 0.75;
   cursor: pointer;
   text-decoration: underline;
+  /* A grid item stretches by default, so this button used to fill its track and
+     centre its own label. Shrink it to its text and pin it to the row's end. */
+  justify-self: end;
+  padding: 0;
+  width: max-content;
 }
 .sk-cart__totals {
   margin: calc(var(--sk-space, 0.5rem) * 3) 0 0;
@@ -2993,11 +3050,8 @@ select.sk-identity__input[data-empty] {
   font-weight: 600;
   text-decoration: none;
 }
-@media (max-width: 600px) {
-  .sk-cart__line {
-    grid-template-columns: 1fr auto;
-  }
-}
+/* The old viewport `max-width: 600px` rule lived here. It could not see the drawer,
+   which is ~380px inside a wide window; the @container rule above replaces it. */
 
 
 /* ── checkout (PAT-766) ──────────────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patientos/website-kit",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "PatientOS clinic website components and patient-facing interactive islands.",
   "type": "module",
   "sideEffects": [