@patientos/website-kit 0.2.6 → 0.2.8

package/dist/website-kit.css

@@ -3583,3 +3583,196 @@ select.sk-identity__input[data-empty] {
   color: #b3261e;
   font-size: var(--sk-font-size-sm);
 }
+
+/* ── PAT-944: saved delivery addresses + fulfilment notices ──────────────────
+   Appended at the END on purpose (a second agent owns the store blocks in this
+   file's earlier sections). Scoped to the checkout island only. */
+.sk-checkout__addresses {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sk-space, 0.5rem) * 0.75);
+}
+.sk-checkout__addresses-label {
+  font-size: var(--sk-font-size-sm);
+  opacity: 0.8;
+}
+.sk-checkout__addresses label {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--sk-space, 0.5rem) * 0.75);
+  overflow-wrap: anywhere;
+}
+.sk-checkout__address-actions {
+  display: flex;
+  gap: calc(var(--sk-space, 0.5rem) * 1.5);
+}
+.sk-checkout__link-button {
+  align-self: flex-start;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--sk-primary, inherit);
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.sk-checkout__link-button[disabled] {
+  opacity: 0.55;
+  cursor: default;
+}
+.sk-checkout__notice {
+  margin: 0;
+  font-size: var(--sk-font-size-sm);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   PAT-944 — store skeleton + the persistent header cart (badge + drawer)
+   ══════════════════════════════════════════════════════════════════════════════ */
+
+/* ── store: the loading skeleton ───────────────────────────────────────────────
+   A fixed-height grid of card-shaped placeholders. The old "Loading the shop…"
+   line collapsed to one text row and then expanded into a grid — a full-page jump
+   on every load. These cards are the same box the real ones occupy. */
+.sk-store__placeholder--sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.sk-store__card--skeleton {
+  pointer-events: none;
+}
+.sk-store__skeleton-line,
+.sk-store__skeleton-button {
+  display: block;
+  border-radius: var(--sk-radius, 0.625rem);
+  background: color-mix(in srgb, var(--sk-muted, #5b6b7a) 16%, transparent);
+}
+.sk-store__skeleton-line {
+  height: 0.875rem;
+}
+.sk-store__skeleton-line--short {
+  width: 45%;
+}
+.sk-store__skeleton-button {
+  margin-top: auto;
+  height: 2.5rem;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .sk-store__card--skeleton .sk-store__image,
+  .sk-store__skeleton-line,
+  .sk-store__skeleton-button {
+    animation: sk-skeleton-pulse 1.4s ease-in-out infinite;
+  }
+}
+@keyframes sk-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+/* ── the header cart button ──────────────────────────────────────────────────── */
+.sk-cart-button {
+  display: inline-flex;
+}
+.sk-cart-button__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--sk-space, 0.5rem) * 1);
+  padding: calc(var(--sk-space, 0.5rem) * 0.75) calc(var(--sk-space, 0.5rem) * 1.5);
+  border: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 30%, transparent);
+  border-radius: var(--sk-radius, 0.625rem);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+.sk-cart-button__trigger:hover {
+  background: color-mix(in srgb, var(--sk-muted, #5b6b7a) 10%, transparent);
+}
+/* The badge is ABSENT at zero — the component never renders "0" — so this only ever
+   paints once the client effect has read the shopper's own stored cart. */
+.sk-cart-button__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 0.3125rem;
+  border-radius: 999px;
+  background: var(--sk-brand, #1f6feb);
+  color: var(--sk-brand-foreground, #fff);
+  font-size: 0.75rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* ── the cart drawer ──────────────────────────────────────────────────────────
+   Rendered only while open, so a closed drawer costs no markup and — the point of
+   the whole design — no network. */
+.sk-cart-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  justify-content: flex-end;
+}
+.sk-cart-drawer__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.4);
+}
+.sk-cart-drawer__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(26rem, 100%);
+  max-height: 100%;
+  background: var(--sk-background, #fff);
+  color: var(--sk-foreground, inherit);
+  box-shadow: -12px 0 32px rgb(0 0 0 / 0.18);
+}
+.sk-cart-drawer__head,
+.sk-cart-drawer__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sk-space, 0.5rem) * 2);
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+  border-bottom: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 20%, transparent);
+}
+.sk-cart-drawer__foot {
+  border-bottom: 0;
+  border-top: 1px solid color-mix(in srgb, var(--sk-muted, #5b6b7a) 20%, transparent);
+  margin-top: auto;
+}
+.sk-cart-drawer__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: calc(var(--sk-space, 0.5rem) * 2);
+}
+.sk-cart-drawer__close {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+@media (max-width: 30rem) {
+  .sk-cart-drawer__panel {
+    width: 100%;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patientos/website-kit",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "PatientOS clinic website components and patient-facing interactive islands.",
   "type": "module",
   "sideEffects": [
@@ -45,6 +45,36 @@
       "types": "./dist/islands.d.ts",
       "default": "./dist/islands.js"
     },
+    "./islands-impl/store": {
+      "patientos-source": "./src/store-block.client.tsx",
+      "types": "./dist/islands-impl/store.d.ts",
+      "default": "./dist/islands-impl/store.js"
+    },
+    "./islands-impl/cart": {
+      "patientos-source": "./src/cart-block.client.tsx",
+      "types": "./dist/islands-impl/cart.d.ts",
+      "default": "./dist/islands-impl/cart.js"
+    },
+    "./islands-impl/cart-button": {
+      "patientos-source": "./src/cart-button.client.tsx",
+      "types": "./dist/islands-impl/cart-button.d.ts",
+      "default": "./dist/islands-impl/cart-button.js"
+    },
+    "./islands-impl/checkout": {
+      "patientos-source": "./src/checkout-block.client.tsx",
+      "types": "./dist/islands-impl/checkout.d.ts",
+      "default": "./dist/islands-impl/checkout.js"
+    },
+    "./cart-storage": {
+      "patientos-source": "./src/cart-storage.ts",
+      "types": "./dist/cart-storage.d.ts",
+      "default": "./dist/cart-storage.js"
+    },
+    "./store-catalog": {
+      "patientos-source": "./src/store-catalog.ts",
+      "types": "./dist/store-catalog.d.ts",
+      "default": "./dist/store-catalog.js"
+    },
     "./islands-registry": {
       "patientos-source": "./src/islands-registry.tsx",
       "types": "./dist/islands-registry.d.ts",

package/dist/checkout-block-BdpPIuQ5.d.ts

@@ -1,136 +0,0 @@
-import * as React from 'react';
-
-/** A service as the funnel offers it. */
-interface FunnelServiceOption {
-    key: string;
-    label: string;
-}
-/** How the runtime half reaches the API — the snapshot's `publicApi`, serialised. */
-interface FunnelPublicApi {
-    publishableKey: string;
-    apiBase: string;
-    turnstileSiteKey?: string;
-    portalUrl?: string;
-    portalOrigin?: string;
-    portalApiOrigin?: string;
-}
-/** JSON-safe island configuration. Crosses the build→runtime boundary — see `./islands`. */
-type CertificateFunnelProps = {
-    /** Start on ONE service, skipping the picker. */
-    serviceKey?: string;
-    /** Heading above the funnel. */
-    heading?: string;
-    publicApi?: FunnelPublicApi;
-    services?: FunnelServiceOption[];
-    clinicName?: string;
-    clinicPhone?: string;
-};
-/** Marker-only props: what a clinic page actually writes. */
-type CertificateFunnelMarkerProps = {
-    /**
-     * Offer only these services, in this order. Omitted ⇒ every certificate service the
-     * clinic has published.
-     */
-    serviceKeys?: string[];
-    /** Start on ONE service, skipping the picker. */
-    serviceKey?: string;
-    /** Per-service copy overriding the configured label, keyed by service key. */
-    serviceCopy?: Record<string, string>;
-    heading?: string;
-    className?: string;
-};
-declare function CertificateFunnel({ serviceKeys, serviceKey, serviceCopy, heading, className, }: CertificateFunnelMarkerProps): React.ReactElement;
-
-/** An appointment type as the block offers it. */
-interface BookingTypeOption {
-    id: string;
-    label: string;
-    durationMinutes: number;
-    modality: 'in_person' | 'telehealth';
-}
-/** JSON-safe island configuration. Crosses the build→runtime boundary — see `./islands`. */
-type BookingBlockProps = {
-    /** Pre-select ONE appointment type, skipping the picker. */
-    appointmentTypeId?: string;
-    /** Pre-select a practitioner (availability is then filtered to them). */
-    practitionerId?: string;
-    heading?: string;
-    publicApi?: FunnelPublicApi;
-    appointmentTypes?: BookingTypeOption[];
-    clinicName?: string;
-    clinicPhone?: string;
-};
-/** Marker-only props: what a clinic page actually writes. */
-type BookingBlockMarkerProps = {
-    appointmentTypeId?: string;
-    practitionerId?: string;
-    /** Offer only these appointment types, by id, in this order. */
-    appointmentTypeIds?: string[];
-    heading?: string;
-    className?: string;
-};
-declare function BookingBlock({ appointmentTypeId, practitionerId, appointmentTypeIds, heading, className, }: BookingBlockMarkerProps): React.ReactElement;
-
-/** JSON-safe island configuration. Crosses the build→runtime boundary — see `./islands`. */
-type StoreProps = {
-    /** Show one category only. Omitted ⇒ the whole published catalogue. */
-    categoryHandle?: string;
-    /** Show exactly one product by its stable handle. Takes precedence over category. */
-    productHandle?: string;
-    /** PatientOS patient/API origin. Omitted keeps the original same-origin contract. */
-    storeApiOrigin?: string;
-    /** Heading rendered above the grid. */
-    title?: string;
-    /** Grid columns at the widest breakpoint. */
-    columns?: number;
-};
-/** Marker-only props: the island config plus presentation the page controls. */
-type StoreMarkerProps = StoreProps & {
-    className?: string;
-};
-/**
- * BUILD-TIME marker. Emits the mount point plus a static no-JS fallback — the catalogue
- * itself is fetched at runtime (prices and stock must not be baked into a cached static
- * artifact), so the fallback is a prompt, not a product list.
- */
-declare function Store({ categoryHandle, productHandle, storeApiOrigin, title, columns, className, }: StoreMarkerProps): React.ReactElement;
-
-/** JSON-safe island configuration. Crosses the build→runtime boundary — see `./islands`. */
-type CartProps = {
-    /** PatientOS patient/API origin. Omitted keeps the original same-origin contract. */
-    storeApiOrigin?: string;
-};
-/** Marker-only props: runtime config plus presentation the page controls. */
-type CartMarkerProps = CartProps & {
-    className?: string;
-};
-/**
- * BUILD-TIME marker. Emits the mount point plus a static no-JS fallback.
- *
- * The fallback shows NO line items — the static artifact is served to every visitor and
- * is edge-cacheable, so it must never carry a patient's cart.
- */
-declare function Cart({ storeApiOrigin, className }: CartMarkerProps): React.ReactElement;
-
-/** JSON-safe island configuration. Crosses the build→runtime boundary — see `./islands`. */
-type CheckoutProps = {
-    /** PatientOS patient/API origin. Omitted keeps the original same-origin contract. */
-    storeApiOrigin?: string;
-    /** Shopper-facing order history on the hosting site. */
-    ordersHref?: string;
-    /** Same-origin order confirmation route on the hosting clinic site. */
-    completionHref?: string;
-};
-/** Marker-only props: runtime config plus presentation the page controls. */
-type CheckoutMarkerProps = CheckoutProps & {
-    className?: string;
-};
-/**
- * BUILD-TIME marker. Emits the mount point plus a static no-JS fallback.
- *
- * The fallback carries no order, no amount and no payment field: this document is a
- * static artifact served to every visitor.
- */
-declare function Checkout({ storeApiOrigin, ordersHref, completionHref, className, }: CheckoutMarkerProps): React.ReactElement;
-
-export { BookingBlock as B, Cart as C, type FunnelPublicApi as F, Store as S, type BookingBlockMarkerProps as a, type BookingBlockProps as b, type BookingTypeOption as c, type CartMarkerProps as d, type CartProps as e, CertificateFunnel as f, type CertificateFunnelMarkerProps as g, type CertificateFunnelProps as h, Checkout as i, type CheckoutMarkerProps as j, type CheckoutProps as k, type FunnelServiceOption as l, type StoreMarkerProps as m, type StoreProps as n };