@patientos/website-kit 0.2.8 → 0.2.10

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

@@ -5,7 +5,7 @@ import {
   UnsupportedCartLineList,
   quoteSourceQuantities,
   useCartQuote
-} from "./chunk-IOC6QLB7.js";
+} from "./chunk-LW2LLAL4.js";
 import {
   createStoreClient
 } from "./chunk-7BUDUYXN.js";
@@ -24,7 +24,8 @@ function CartClient({ storeApiOrigin }) {
   );
   const [cart, setCart] = React.useState(() => readCart());
   const [mutationUnavailable, setMutationUnavailable] = React.useState(false);
-  const { quote, quoteSourceCart, failed } = useCartQuote(client, cart);
+  const { quote, quoteSourceCart, failed, pending } = useCartQuote(client, cart);
+  const liveQuantities = React.useMemo(() => quoteSourceQuantities(cart), [cart]);
   async function runMutation(mutation) {
     const result = await mutation;
     setMutationUnavailable(result.status === "cart_storage_unavailable");
@@ -61,6 +62,8 @@ function CartClient({ storeApiOrigin }) {
         {
           lines: quote.lines,
           sourceQuantities: quoteSourceQuantities(quoteSourceCart),
+          liveQuantities,
+          pending,
           onMutate: (m) => void runMutation(m)
         }
       ),

package/dist/{chunk-HTVKKLWI.js → chunk-FW2X2SUZ.js}

@@ -3,16 +3,16 @@ import {
   CertificateFunnelClient,
   PortalAccountClient,
   PortalPanelClient
-} from "./chunk-4GKSSM5N.js";
+} from "./chunk-SYXA5WP7.js";
 import {
   mountIslandsWith
 } from "./chunk-THMT43MV.js";
 import {
   CartClient
-} from "./chunk-2CZFJOKK.js";
+} from "./chunk-55W3KKJD.js";
 import {
   CartButtonClient
-} from "./chunk-ZNH6TSYP.js";
+} from "./chunk-Q5DIBKWX.js";
 import {
   CheckoutClient
 } from "./chunk-S3ZQQOQT.js";

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

@@ -50,9 +50,11 @@ function UnsupportedCartLineList({
 function CartLineList({
   lines,
   sourceQuantities,
-  onMutate
+  onMutate,
+  liveQuantities,
+  pending
 }) {
-  return /* @__PURE__ */ jsx("ul", { className: "sk-cart__lines", children: lines.map((line) => /* @__PURE__ */ jsxs("li", { className: "sk-cart__line", children: [
+  return /* @__PURE__ */ jsx("ul", { className: "sk-cart__lines", "aria-busy": pending || void 0, children: lines.map((line) => /* @__PURE__ */ jsxs("li", { className: "sk-cart__line", children: [
     /* @__PURE__ */ jsx("a", { className: "sk-cart__line-title", href: `/store/${line.productHandle}`, children: line.title }),
     /* @__PURE__ */ jsxs("span", { className: "sk-cart__line-unit", children: [
       formatMoney(line.unitPrice),
@@ -75,7 +77,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: (pending ? liveQuantities?.get(line.variantId) : void 0) ?? line.quantity }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -125,22 +127,38 @@ function useCartQuote(client, cart, enabled = true) {
   const [state, setState] = React.useState({
     quote: null,
     quoteSourceCart: null,
-    failed: false
+    failed: false,
+    pending: false
   });
   React.useEffect(() => {
     if (!enabled || cart.lines.length === 0) {
-      setState({ quote: null, quoteSourceCart: null, failed: false });
+      setState({
+        quote: null,
+        quoteSourceCart: null,
+        failed: false,
+        pending: false
+      });
       return;
     }
     let alive = true;
-    setState({ quote: null, quoteSourceCart: null, failed: false });
+    setState((previous) => ({ ...previous, failed: false, pending: true }));
     void client.post("/api/store/quote", { lines: cartToWireLines(cart) }).then((result) => {
       if (!alive) return;
       if (!result.ok) {
-        setState({ quote: null, quoteSourceCart: null, failed: true });
+        setState({
+          quote: null,
+          quoteSourceCart: null,
+          failed: true,
+          pending: false
+        });
         return;
       }
-      setState({ quote: result.data, quoteSourceCart: cart, failed: false });
+      setState({
+        quote: result.data,
+        quoteSourceCart: cart,
+        failed: false,
+        pending: false
+      });
     });
     return () => {
       alive = false;

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

@@ -5,7 +5,7 @@ import {
   UnsupportedCartLineList,
   quoteSourceQuantities,
   useCartQuote
-} from "./chunk-IOC6QLB7.js";
+} from "./chunk-LW2LLAL4.js";
 import {
   createStoreClient
 } from "./chunk-7BUDUYXN.js";
@@ -87,7 +87,12 @@ function CartDrawer({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  const { quote, quoteSourceCart, failed } = useCartQuote(client, cart, open);
+  const { quote, quoteSourceCart, failed, pending } = useCartQuote(
+    client,
+    cart,
+    open
+  );
+  const liveQuantities = React.useMemo(() => quoteSourceQuantities(cart), [cart]);
   async function runMutation(mutation) {
     const result = await mutation;
     setMutationUnavailable(result.status === "cart_storage_unavailable");
@@ -144,6 +149,8 @@ function CartDrawer({
                 {
                   lines: quote.lines,
                   sourceQuantities: quoteSourceQuantities(quoteSourceCart),
+                  liveQuantities,
+                  pending,
                   onMutate: (m) => void runMutation(m)
                 }
               ),

package/dist/{chunk-4GKSSM5N.js → chunk-SYXA5WP7.js}

@@ -11062,6 +11062,23 @@ function PortalConsultPanel({
   ] });
 }
 
+// src/portal-account-cache.ts
+var snapshots = /* @__PURE__ */ new Map();
+function rememberPortalAccount(surface, state) {
+  if (state.kind === "signed-in") {
+    snapshots.set(surface, state);
+    return;
+  }
+  if (state.kind === "loading" || state.kind === "link-sent") return;
+  clearPortalAccountCache();
+}
+function recallPortalAccount(surface) {
+  return snapshots.get(surface) ?? null;
+}
+function clearPortalAccountCache() {
+  snapshots.clear();
+}
+
 // src/portal-account.client.tsx
 import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var APPOINTMENTS_URL = "/portal/api/appointments";
@@ -11220,21 +11237,36 @@ function PortalAccountSurfaceClient({
   const portalClient = usePortalClient();
   const fetchImpl = React21.useMemo(() => portalFetchForClient(portalClient), [portalClient]);
   const [state, setState] = React21.useState(
-    // `readPortalSignedInHint` is in the initialiser (not an effect) on purpose: the
+    // STALE-WHILE-REVALIDATE (PAT-949). Three ways to start, in falling order of how
+    // much we already know:
+    //   1. the caller drove it (tests, a future SSR seed);
+    //   2. this document already resolved this surface — render that body NOW and
+    //      revalidate behind it, so returning to a surface is not a redraw. In-memory
+    //      only; see `./portal-account-cache` for the PHI rules;
+    //   3. genuinely cold — a skeleton, shaped like the rows about to land.
+    // `readPortalSignedInHint` stays in the initialiser (not an effect) on purpose: the
     // whole point is that the FIRST paint already knows, so there is no placeholder
     // swap. It reads one boolean out of sessionStorage — no PHI, no network.
-    () => initialState ?? { kind: "loading", hinted: readPortalSignedInHint() }
+    () => initialState ?? recallPortalAccount(surface) ?? { kind: "loading", hinted: readPortalSignedInHint() }
   );
   const [signingOut, setSigningOut] = React21.useState(false);
-  const commit = React21.useCallback((next) => {
-    writePortalSignedInHint(next.kind === "signed-in" || next.kind === "not-available");
-    setState(next);
-  }, []);
+  const [revalidating, setRevalidating] = React21.useState(false);
+  const commit = React21.useCallback(
+    (next) => {
+      writePortalSignedInHint(next.kind === "signed-in" || next.kind === "not-available");
+      rememberPortalAccount(surface, next);
+      setState(next);
+    },
+    [surface]
+  );
   React21.useEffect(() => {
     if (initialState) return;
     let live = true;
+    setRevalidating(true);
     void loadPortalAccount(surface, fetchImpl).then((next) => {
-      if (live) commit(next);
+      if (!live) return;
+      setRevalidating(false);
+      commit(next);
     });
     return () => {
       live = false;
@@ -11246,6 +11278,7 @@ function PortalAccountSurfaceClient({
   async function onSignOut() {
     if (signingOut) return;
     setSigningOut(true);
+    clearPortalAccountCache();
     await signOutOfPortal(fetchImpl);
     const next = await loadPortalAccount(surface, fetchImpl);
     setSigningOut(false);
@@ -11253,91 +11286,119 @@ function PortalAccountSurfaceClient({
   }
   function replaceData(data) {
     const refetched = refetchedGivenName(data);
-    setState(
-      (prev) => prev.kind === "signed-in" ? { ...prev, data, givenName: refetched === void 0 ? prev.givenName : refetched } : prev
-    );
+    setState((prev) => {
+      if (prev.kind !== "signed-in") return prev;
+      const next = {
+        ...prev,
+        data,
+        givenName: refetched === void 0 ? prev.givenName : refetched
+      };
+      rememberPortalAccount(surface, next);
+      return next;
+    });
   }
-  return /* @__PURE__ */ jsxs23("section", { className: "sk-portal-account__body", "aria-busy": state.kind === "loading", children: [
-    /* @__PURE__ */ jsx26("h2", { className: "sk-portal-account__heading", children: heading2 }),
-    state.kind === "loading" && !state.hinted ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder", children: "Checking your sign-in\u2026" }) : null,
-    state.kind === "loading" && state.hinted ? /* @__PURE__ */ jsx26(PortalAccountSkeleton, {}) : null,
-    state.kind === "link-out" ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder", children: /* @__PURE__ */ jsx26("a", { className: "sk-portal-link", href: base2, children: "Sign in to your patient portal" }) }) : null,
-    state.kind === "signed-out" ? /* @__PURE__ */ jsx26(
-      PortalSignInRamp,
-      {
-        idSuffix: `account-${surface}`,
-        submit: (email) => portalClient.requestMagicLink(email).then((ok) => ({ ok })),
-        onResult: ({ ok, email }) => setState(ok ? { kind: "link-sent", email } : { kind: "link-out" })
-      }
-    ) : null,
-    state.kind === "link-sent" ? /* @__PURE__ */ jsx26(PortalLinkSentNotice, { email: state.email }) : null,
-    state.kind === "not-available" || state.kind === "signed-in" ? /* @__PURE__ */ jsxs23("div", { className: "sk-portal-account__header", children: [
-      /* @__PURE__ */ jsxs23("span", { className: "sk-portal-account__who", children: [
-        "Signed in as ",
-        state.givenName ?? "you"
-      ] }),
-      /* @__PURE__ */ jsx26(
-        "button",
-        {
-          type: "button",
-          className: "sk-portal-button sk-portal-button--ghost",
-          onClick: () => void onSignOut(),
-          disabled: signingOut,
-          children: signingOut ? "Signing out\u2026" : "Sign out"
-        }
-      )
-    ] }) : null,
-    state.kind === "not-available" ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__note", role: "note", children: "This isn't available online at this clinic." }) : null,
-    state.kind === "signed-in" && surface === "appointments" ? /* @__PURE__ */ jsx26(
-      PortalAccountAppointments,
-      {
-        data: state.data,
-        base: base2,
-        bookHref: book,
-        fetchImpl,
-        onReloaded: replaceData
-      }
-    ) : null,
-    state.kind === "signed-in" && surface === "addresses" ? /* @__PURE__ */ jsx26(
-      PortalAccountAddresses,
-      {
-        data: state.data,
-        client: portalClient,
-        fetchImpl,
-        onReloaded: replaceData
-      }
-    ) : null,
-    state.kind === "signed-in" && surface === "documents" ? /* @__PURE__ */ jsx26(
-      PortalAccountDocuments,
-      {
-        data: state.data,
-        fetchImpl,
-        openUrl
-      }
-    ) : null,
-    state.kind === "signed-in" && surface === "orders" ? /* @__PURE__ */ jsx26(
-      PortalAccountOrders,
-      {
-        data: state.data,
-        fetchImpl,
-        openUrl
-      }
-    ) : null,
-    state.kind === "signed-in" && surface === "profile" ? /* @__PURE__ */ jsx26(
-      PortalAccountProfile,
-      {
-        data: state.data,
-        fetchImpl,
-        onSaved: replaceData
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs23(
+    "section",
+    {
+      className: "sk-portal-account__body",
+      "aria-busy": state.kind === "loading" || revalidating,
+      children: [
+        /* @__PURE__ */ jsx26("h2", { className: "sk-portal-account__heading", children: heading2 }),
+        state.kind === "loading" && !state.hinted ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder", role: "status", children: "Checking your sign-in\u2026" }) : null,
+        state.kind === "loading" && state.hinted ? /* @__PURE__ */ jsx26(PortalAccountSkeleton, { surface }) : null,
+        state.kind === "link-out" ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder", children: /* @__PURE__ */ jsx26("a", { className: "sk-portal-link", href: base2, children: "Sign in to your patient portal" }) }) : null,
+        state.kind === "signed-out" ? /* @__PURE__ */ jsx26(
+          PortalSignInRamp,
+          {
+            idSuffix: `account-${surface}`,
+            submit: (email) => portalClient.requestMagicLink(email).then((ok) => ({ ok })),
+            onResult: ({ ok, email }) => setState(ok ? { kind: "link-sent", email } : { kind: "link-out" })
+          }
+        ) : null,
+        state.kind === "link-sent" ? /* @__PURE__ */ jsx26(PortalLinkSentNotice, { email: state.email }) : null,
+        state.kind === "not-available" || state.kind === "signed-in" ? /* @__PURE__ */ jsxs23("div", { className: "sk-portal-account__header", children: [
+          /* @__PURE__ */ jsxs23("span", { className: "sk-portal-account__who", children: [
+            "Signed in as ",
+            state.givenName ?? "you"
+          ] }),
+          /* @__PURE__ */ jsx26(
+            "button",
+            {
+              type: "button",
+              className: "sk-portal-button sk-portal-button--ghost",
+              onClick: () => void onSignOut(),
+              disabled: signingOut,
+              children: signingOut ? "Signing out\u2026" : "Sign out"
+            }
+          )
+        ] }) : null,
+        state.kind === "not-available" ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__note", role: "note", children: "This isn't available online at this clinic." }) : null,
+        state.kind === "signed-in" && surface === "appointments" ? /* @__PURE__ */ jsx26(
+          PortalAccountAppointments,
+          {
+            data: state.data,
+            base: base2,
+            bookHref: book,
+            fetchImpl,
+            onReloaded: replaceData
+          }
+        ) : null,
+        state.kind === "signed-in" && surface === "addresses" ? /* @__PURE__ */ jsx26(
+          PortalAccountAddresses,
+          {
+            data: state.data,
+            client: portalClient,
+            fetchImpl,
+            onReloaded: replaceData
+          }
+        ) : null,
+        state.kind === "signed-in" && surface === "documents" ? /* @__PURE__ */ jsx26(
+          PortalAccountDocuments,
+          {
+            data: state.data,
+            fetchImpl,
+            openUrl
+          }
+        ) : null,
+        state.kind === "signed-in" && surface === "orders" ? /* @__PURE__ */ jsx26(
+          PortalAccountOrders,
+          {
+            data: state.data,
+            fetchImpl,
+            openUrl
+          }
+        ) : null,
+        state.kind === "signed-in" && surface === "profile" ? /* @__PURE__ */ jsx26(
+          PortalAccountProfile,
+          {
+            data: state.data,
+            fetchImpl,
+            onSaved: replaceData
+          }
+        ) : null
+      ]
+    }
+  );
 }
-function PortalAccountSkeleton() {
-  return /* @__PURE__ */ jsxs23("div", { className: "sk-portal-account__skeleton", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-row" }),
-    /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-row" }),
-    /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-row" })
+var SKELETON_ROWS = 3;
+function PortalAccountSkeleton({
+  surface
+}) {
+  const grouped = surface === "appointments";
+  return /* @__PURE__ */ jsxs23(Fragment11, { children: [
+    /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder sk-portal-account__placeholder--sr", role: "status", children: "Loading your account\u2026" }),
+    /* @__PURE__ */ jsxs23("div", { className: "sk-portal-account__skeleton", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "sk-portal-account__header sk-portal-account__header--skeleton", children: [
+        /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-line sk-portal-account__skeleton-line--who" }),
+        /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-line sk-portal-account__skeleton-line--button" })
+      ] }),
+      grouped ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__group-title sk-portal-account__group-title--skeleton", children: /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-line sk-portal-account__skeleton-line--group" }) }) : null,
+      /* @__PURE__ */ jsx26("ul", { className: "sk-portal-account__list", children: Array.from({ length: SKELETON_ROWS }, (_, index) => /* @__PURE__ */ jsxs23("li", { className: "sk-portal-account__item sk-portal-account__item--skeleton", children: [
+        /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-line sk-portal-account__skeleton-line--title" }),
+        /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-line sk-portal-account__skeleton-line--meta" }),
+        grouped ? /* @__PURE__ */ jsx26("span", { className: "sk-portal-account__skeleton-line sk-portal-account__skeleton-line--meta" }) : null
+      ] }, index)) })
+    ] })
   ] });
 }
 function StatusBadge({ status }) {
@@ -11598,8 +11659,11 @@ function PortalAccountOrders({
   initialUi
 }) {
   const [expandedId, setExpandedId] = React21.useState(initialUi?.expandedId ?? null);
-  const [detail, setDetail] = React21.useState(initialUi?.detail ?? null);
-  const [loading, setLoading] = React21.useState(false);
+  const [details, setDetails] = React21.useState(
+    () => initialUi?.detail && initialUi.expandedId ? { [initialUi.expandedId]: initialUi.detail } : {}
+  );
+  const [loadingId, setLoadingId] = React21.useState(null);
+  const [failedIds, setFailedIds] = React21.useState([]);
   const [error2, setError] = React21.useState(initialUi?.error ?? null);
   async function toggle(id) {
     if (expandedId === id) {
@@ -11607,12 +11671,13 @@ function PortalAccountOrders({
       return;
     }
     setExpandedId(id);
-    setDetail(null);
     setError(null);
-    setLoading(true);
+    if (details[id]) return;
+    setLoadingId(id);
     const next = await loadPortalOrderDetail(id, fetchImpl);
-    setLoading(false);
-    setDetail(next);
+    setLoadingId((current) => current === id ? null : current);
+    if (next) setDetails((prev) => ({ ...prev, [id]: next }));
+    else setFailedIds((prev) => prev.includes(id) ? prev : [...prev, id]);
   }
   async function receipt(id) {
     setError(null);
@@ -11626,6 +11691,9 @@ function PortalAccountOrders({
     /* @__PURE__ */ jsx26(ErrorNote, { message: error2 }),
     /* @__PURE__ */ jsx26("ul", { className: "sk-portal-account__list", children: data.items.map((order) => {
       const open = expandedId === order.id;
+      const detail = details[order.id] ?? null;
+      const loading = loadingId === order.id && !detail;
+      const failed = !detail && failedIds.includes(order.id);
       return /* @__PURE__ */ jsxs23("li", { className: "sk-portal-account__item", children: [
         /* @__PURE__ */ jsxs23(
           "button",
@@ -11645,7 +11713,7 @@ function PortalAccountOrders({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsx26("div", { className: "sk-portal-account__detail", children: loading ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder", role: "status", children: "Loading this order\u2026" }) : !detail ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__note", role: "note", children: "We couldn't load this order just now." }) : /* @__PURE__ */ jsxs23(Fragment11, { children: [
+        open ? /* @__PURE__ */ jsx26("div", { className: "sk-portal-account__detail", "aria-busy": loading, children: loading ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__placeholder", role: "status", children: "Loading this order\u2026" }) : failed || !detail ? /* @__PURE__ */ jsx26("p", { className: "sk-portal-account__note", role: "note", children: "We couldn't load this order just now." }) : /* @__PURE__ */ jsxs23(Fragment11, { children: [
           /* @__PURE__ */ jsx26("ul", { className: "sk-portal-account__lines", children: (detail.lines ?? []).map((line) => /* @__PURE__ */ jsxs23("li", { className: "sk-portal-account__line", children: [
             /* @__PURE__ */ jsxs23("span", { children: [
               line.title ?? "\u2014",

package/dist/index.d.ts

@@ -217,6 +217,6 @@ interface PortalSession {
  */
 declare function usePortalSession(): PortalSession;
 
-declare const WEBSITE_KIT_VERSION = "0.2.8";
+declare const WEBSITE_KIT_VERSION = "0.2.10";
 
 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-HTVKKLWI.js";
+} from "./chunk-FW2X2SUZ.js";
 import {
   PortalAccount,
   PortalPanel,
@@ -23,7 +23,7 @@ import {
   getThemeTokens,
   usePortalClient,
   usePortalSession
-} from "./chunk-4GKSSM5N.js";
+} from "./chunk-SYXA5WP7.js";
 import "./chunk-3T7UWKAH.js";
 import {
   evaluateShowWhen,
@@ -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-55W3KKJD.js";
+import "./chunk-Q5DIBKWX.js";
+import "./chunk-LW2LLAL4.js";
 import "./chunk-S3ZQQOQT.js";
 import {
   BPOINT_SCRIPT_ORIGIN,
@@ -511,7 +511,7 @@ function Checkout({
 }
 
 // src/index.ts
-var WEBSITE_KIT_VERSION = "0.2.8";
+var WEBSITE_KIT_VERSION = "0.2.10";
 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-Q5DIBKWX.js";
+import "../chunk-LW2LLAL4.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-55W3KKJD.js";
+import "../chunk-LW2LLAL4.js";
 import "../chunk-7BUDUYXN.js";
 import "../chunk-4NF7SSIX.js";
 import "../chunk-FZ4WKWIE.js";

package/dist/islands-impl.js

@@ -3,17 +3,17 @@ import {
   CertificateFunnelClient,
   PortalAccountClient,
   PortalPanelClient
-} from "./chunk-4GKSSM5N.js";
+} from "./chunk-SYXA5WP7.js";
 import "./chunk-3T7UWKAH.js";
 import "./chunk-QDO3SJWR.js";
 import "./chunk-THMT43MV.js";
 import {
   CartClient
-} from "./chunk-2CZFJOKK.js";
+} from "./chunk-55W3KKJD.js";
 import {
   CartButtonClient
-} from "./chunk-ZNH6TSYP.js";
-import "./chunk-IOC6QLB7.js";
+} from "./chunk-Q5DIBKWX.js";
+import "./chunk-LW2LLAL4.js";
 import {
   CheckoutClient
 } from "./chunk-S3ZQQOQT.js";

package/dist/islands-registry.js

@@ -1,14 +1,14 @@
 import {
   ISLANDS,
   mountIslands
-} from "./chunk-HTVKKLWI.js";
-import "./chunk-4GKSSM5N.js";
+} from "./chunk-FW2X2SUZ.js";
+import "./chunk-SYXA5WP7.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-55W3KKJD.js";
+import "./chunk-Q5DIBKWX.js";
+import "./chunk-LW2LLAL4.js";
 import "./chunk-S3ZQQOQT.js";
 import "./chunk-ZOF22TJA.js";
 import "./chunk-UTAMB2SK.js";

package/dist/website-kit.css

@@ -2414,16 +2414,78 @@ select.sk-identity__input[data-empty] {
  * to earn its keep, and it buys nothing here — this is on screen for a few hundred ms.
  * This is NOT the no-JS fallback below; that one is real content and must stay real. */
 .sk-portal-account__skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sk-space, 0.5rem);
-  margin-bottom: calc(var(--sk-space, 0.5rem) * 2);
+  display: block;
+  margin-bottom: 0;
 }
 
-.sk-portal-account__skeleton-row {
-  height: 2.75rem;
+/* PAT-949 — the skeleton borrows `__header` and `__item` for its boxes (see the
+ * component), so the only thing defined here is the INK inside them and the two
+ * differences a placeholder needs: it cannot be clicked, and its header carries no
+ * text to give it height, so it gets the height back explicitly. */
+.sk-portal-account__header--skeleton {
+  min-height: 2.25rem;
+}
+
+.sk-portal-account__item--skeleton {
+  pointer-events: none;
+}
+
+.sk-portal-account__skeleton-line {
+  display: block;
+  height: 0.875rem;
   border-radius: var(--sk-radius, 0.625rem);
-  background: color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 7%, transparent);
+  background: color-mix(in srgb, var(--sk-neutral-foreground, #1b2733) 12%, transparent);
+}
+
+/* Widths chosen to sit under the real strings they stand in for: "Signed in as Jane",
+ * a "Sign out" ghost button, an item title and its date · clinician · amount line. */
+.sk-portal-account__skeleton-line--who {
+  width: 10rem;
+}
+
+.sk-portal-account__skeleton-line--button {
+  width: 5.5rem;
+  height: 2rem;
+}
+
+.sk-portal-account__skeleton-line--title {
+  width: 60%;
+}
+
+.sk-portal-account__skeleton-line--meta {
+  width: 40%;
+  height: 0.75rem;
+}
+
+/* Stands in for a group heading ("UPCOMING"), so the list does not slide up under one
+ * when the real body lands. */
+.sk-portal-account__group-title--skeleton {
+  display: block;
+}
+
+.sk-portal-account__skeleton-line--group {
+  width: 6rem;
+  height: 0.75rem;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sk-portal-account__skeleton-line {
+    animation: sk-skeleton-pulse 1.4s ease-in-out infinite;
+  }
+}
+
+/* The screen-reader-only status line the skeleton announces itself with — the bars
+ * themselves are `aria-hidden`. Same recipe as the store block's (PAT-944). */
+.sk-portal-account__placeholder--sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 
 /* The build-time no-JS fallback: REAL visible content, never a hidden skeleton. */
@@ -2887,23 +2949,75 @@ select.sk-identity__input[data-empty] {
   border-radius: var(--sk-radius, 0.625rem);
   font-size: 0.9375rem;
 }
+.sk-cart__lines[aria-busy='true'] {
+  /* A re-quote is in flight over prices that are still correct enough to read. Dim the
+     money a touch rather than tearing the list down — the teardown is what read as the
+     cart reloading (PAT-949). Steppers stay live: the cart write already succeeded. */
+  opacity: 0.7;
+  transition: opacity 120ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sk-cart__lines[aria-busy='true'] {
+    transition: none;
+  }
+}
 .sk-cart__lines {
   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 +3027,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 +3050,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 +3064,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 +3124,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.8",
+  "version": "0.2.10",
   "description": "PatientOS clinic website components and patient-facing interactive islands.",
   "type": "module",
   "sideEffects": [