@mylikita/booking-widget 0.1.0

package/dist/mylikita-booking-widget.min.js

@@ -0,0 +1,142 @@
+/*! @mylikita/booking-widget v0.1.0 | MIT */
+var MyLikitaBookingWidget=(()=>{var Y=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ge=Object.prototype.hasOwnProperty;var we=(i,e)=>{for(var t in e)Y(i,t,{get:e[t],enumerable:!0})},ye=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of fe(e))!ge.call(i,a)&&a!==t&&Y(i,a,{get:()=>e[a],enumerable:!(r=pe(e,a))||r.enumerable});return i};var _e=i=>ye(Y({},"__esModule",{value:!0}),i);var Ee={};we(Ee,{DEFAULT_THEME:()=>W,STATUS_COPY:()=>C,TERMINAL_STATUSES:()=>ie,createBooking:()=>S,createBookingWidget:()=>oe,fetchProviders:()=>E,fetchStatus:()=>T,newExternalRef:()=>P,pollStatus:()=>N,resolveTheme:()=>$,statusCopy:()=>A});async function S({relayUrl:i,websiteKey:e,payload:t,signal:r}){let a=await fetch(`${H(i)}/v1/bookings`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify(t),signal:r}),o=await F(a);if(a.status===409)return{ok:!0,duplicate:!0,booking_ref:o?.booking_ref,error:o?.message};if(!a.ok)throw O(a.status,o,"create");return{ok:!0,duplicate:!1,booking_ref:o?.booking_ref,status:o?.status||"pending_confirmation"}}async function E({relayUrl:i,websiteKey:e,signal:t}){let r=await fetch(`${H(i)}/v1/providers`,{headers:{Authorization:`Bearer ${e}`},signal:t}),a=await F(r);if(!r.ok)throw O(r.status,a,"providers");return(Array.isArray(a?.providers)?a.providers:[]).map(d=>({external_id:d.external_id,name:d.name||d.external_id,specialty:d.specialty||null,module:d.module||"general"}))}async function T({relayUrl:i,websiteKey:e,bookingRef:t,signal:r}){let a=await fetch(`${H(i)}/v1/bookings/${encodeURIComponent(t)}`,{headers:{Authorization:`Bearer ${e}`},signal:r}),o=await F(a);if(!a.ok)throw O(a.status,o,"status");return{booking_ref:o?.booking_ref,status:o?.status||"pending_confirmation",appt_ref:o?.appt_ref||null}}async function N(i,{intervalMs:e=5e3,maxTries:t=12,signal:r}={}){for(let a=0;a<t;a++){if(r?.aborted)return{status:"aborted",resolved:!1,data:null};let o=await i();if(o.status!=="pending_confirmation")return{status:o.status,resolved:!0,data:o};a<t-1&&await be(e,r)}return{status:"pending_confirmation",resolved:!1,data:null}}function P(){return`BK-${Date.now()}-${Math.random().toString(36).slice(2,6)}`}function H(i){return String(i||"").replace(/\/+$/,"")}function O(i,e,t){let r=new Error(e?.message||e?.error||`Relay ${t} failed (HTTP ${i})`);return r.code=e?.error||"http_error",r.status=i,r}async function F(i){try{return await i.json()}catch{return null}}function be(i,e){return new Promise(t=>{if(e?.aborted)return t();let r=()=>{clearTimeout(a),t()},a=setTimeout(()=>{e?.removeEventListener("abort",r),t()},i);e?.addEventListener("abort",r,{once:!0})})}var C={pending_confirmation:{title:"Request received",message:"We've received your booking request \u2014 we'll confirm shortly.",kind:"info"},confirmed:{title:"Appointment confirmed",message:"Your appointment is confirmed. See you at the clinic!",kind:"success"},cancelled:{title:"Appointment cancelled",message:"This appointment was cancelled. Please contact the clinic if this was unexpected.",kind:"danger"},rescheduled:{title:"Appointment rescheduled",message:"This appointment was moved \u2014 the new time was sent to you.",kind:"info"},no_show:{title:"Missed appointment",message:"This appointment was marked as missed.",kind:"danger"},expired:{title:"Request expired",message:"This booking request expired \u2014 please call the clinic to book.",kind:"danger"},poll_error:{title:"Something went wrong",message:"We could not check your booking right now. Please try again shortly.",kind:"danger"}};function A(i){return C[i]||C.pending_confirmation}var ie=["confirmed","cancelled","rescheduled","no_show","expired"];var W={primary:"#0d6efd",primaryDark:"#0b5ed7",primaryText:"#ffffff",bg:"#ffffff",text:"#1e293b",muted:"#64748b",border:"#e2e8f0",danger:"#dc3545",success:"#15803d",radius:10,font:"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"};function $(i={}){let e={...W,...i||{}};return{"--mlw-primary":e.primary,"--mlw-primary-dark":e.primaryDark,"--mlw-primary-text":e.primaryText,"--mlw-bg":e.bg,"--mlw-text":e.text,"--mlw-muted":e.muted,"--mlw-border":e.border,"--mlw-danger":e.danger,"--mlw-success":e.success,"--mlw-radius":`${e.radius}px`,"--mlw-font":e.font}}var re=`
+.mylikita-widget {
+  --mlw-primary: #0d6efd;
+  --mlw-primary-dark: #0b5ed7;
+  --mlw-primary-text: #ffffff;
+  --mlw-bg: #ffffff;
+  --mlw-text: #1e293b;
+  --mlw-muted: #64748b;
+  --mlw-border: #e2e8f0;
+  --mlw-danger: #dc3545;
+  --mlw-success: #15803d;
+  --mlw-radius: 10px;
+  --mlw-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  font-family: var(--mlw-font);
+  color: var(--mlw-text);
+  background: var(--mlw-bg);
+  border: 1px solid var(--mlw-border);
+  border-radius: calc(var(--mlw-radius) + 2px);
+  padding: 22px;
+  max-width: 480px;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+.mylikita-widget *,
+.mylikita-widget *::before,
+.mylikita-widget *::after { box-sizing: border-box; }
+
+.mylikita-widget__title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  color: var(--mlw-text);
+}
+.mylikita-widget__subtitle {
+  font-size: 13px;
+  color: var(--mlw-muted);
+  margin: 0 0 16px;
+}
+
+.mylikita-widget__field { margin-bottom: 12px; }
+.mylikita-widget__label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mlw-text);
+  margin-bottom: 5px;
+}
+.mylikita-widget__label .req { color: var(--mlw-danger); }
+.mylikita-widget__input,
+.mylikita-widget__select,
+.mylikita-widget__textarea {
+  width: 100%;
+  font: inherit;
+  font-size: 14px;
+  color: var(--mlw-text);
+  background: var(--mlw-bg);
+  border: 1px solid var(--mlw-border);
+  border-radius: var(--mlw-radius);
+  padding: 9px 11px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.mylikita-widget__input:focus,
+.mylikita-widget__select:focus,
+.mylikita-widget__textarea:focus {
+  border-color: var(--mlw-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mlw-primary) 22%, transparent);
+}
+.mylikita-widget__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 420px) { .mylikita-widget__row { grid-template-columns: 1fr; } }
+
+.mylikita-widget__error {
+  display: none;
+  font-size: 13px;
+  color: var(--mlw-danger);
+  background: color-mix(in srgb, var(--mlw-danger) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--mlw-danger) 35%, transparent);
+  border-radius: var(--mlw-radius);
+  padding: 9px 12px;
+  margin-bottom: 12px;
+}
+.mylikita-widget__error.visible { display: block; }
+
+.mylikita-widget__submit {
+  width: 100%;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mlw-primary-text);
+  background: var(--mlw-primary);
+  border: none;
+  border-radius: var(--mlw-radius);
+  padding: 11px 16px;
+  cursor: pointer;
+  transition: background .15s ease, transform .05s ease;
+}
+.mylikita-widget__submit:hover { background: var(--mlw-primary-dark); }
+.mylikita-widget__submit:active { transform: translateY(1px); }
+.mylikita-widget__submit:disabled { opacity: .6; cursor: wait; }
+
+.mylikita-widget__hint { font-size: 12px; color: var(--mlw-muted); margin: 8px 0 0; }
+
+/* status view */
+.mylikita-widget__status { text-align: center; padding: 8px 4px; }
+.mylikita-widget__status-icon {
+  width: 46px; height: 46px;
+  border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 22px; margin-bottom: 10px;
+}
+.mylikita-widget__status-icon.info { background: color-mix(in srgb, var(--mlw-primary) 12%, transparent); }
+.mylikita-widget__status-icon.success { background: color-mix(in srgb, var(--mlw-success) 14%, transparent); }
+.mylikita-widget__status-icon.danger { background: color-mix(in srgb, var(--mlw-danger) 12%, transparent); }
+.mylikita-widget__status-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
+.mylikita-widget__status-message { font-size: 13px; color: var(--mlw-muted); margin: 0 0 14px; }
+.mylikita-widget__status-ref { font-size: 12px; color: var(--mlw-muted); margin: 0 0 14px; }
+
+.mylikita-widget__spinner {
+  width: 18px; height: 18px;
+  display: inline-block;
+  border: 2px solid color-mix(in srgb, var(--mlw-primary-text) 40%, transparent);
+  border-top-color: var(--mlw-primary-text);
+  border-radius: 50%;
+  animation: mylikita-widget-spin .7s linear infinite;
+  vertical-align: -3px;
+  margin-right: 7px;
+}
+@keyframes mylikita-widget-spin { to { transform: rotate(360deg); } }
+
+.mylikita-widget__link-btn {
+  background: none;
+  border: 1px solid var(--mlw-border);
+  border-radius: var(--mlw-radius);
+  color: var(--mlw-text);
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+.mylikita-widget__link-btn:hover { border-color: var(--mlw-primary); color: var(--mlw-primary); }
+`;var xe={title:"Book an appointment",subtitle:"Request a slot and we will confirm shortly.",name:"Full name",phone:"Phone number",email:"Email address",provider:"Preferred doctor (optional)",noPreference:"No preference",service:"Service (optional)",datetime:"Preferred date & time",visitType:"Appointment type",visitPhysical:"In person",visitTelemedicine:"Video call",visitHome:"Home visit",notes:"Notes (optional)",submit:"Request appointment",submitting:"Submitting\u2026",bookAnother:"Book another appointment",requiredPhoneOrEmail:"Please provide a phone number or an email address.",requiredName:"Please enter your name.",requiredDatetime:"Please choose a date and time.",networkError:"Could not reach the booking service. Please try again.",rateLimited:"Too many requests \u2014 please wait a moment and try again."},ae="mylikita-widget-styles";function oe(i,e={}){if(!i)throw new Error("createBookingWidget: a container element is required");let t={relayUrl:e.relayUrl,websiteKey:e.websiteKey,facilityId:e.facilityId,providers:e.providers||[],services:e.services||[],loadProviders:e.loadProviders===!0&&!(e.providers&&e.providers.length),pollIntervalMs:e.pollIntervalMs??5e3,maxTries:e.maxTries??12,text:{...xe,...e.text||{}},theme:e.theme||{},onStatus:typeof e.onStatus=="function"?e.onStatus:null,onError:typeof e.onError=="function"?e.onError:null,onBooking:typeof e.onBooking=="function"?e.onBooking:null,externalRef:typeof e.externalRef=="function"?e.externalRef:P};if(!t.relayUrl||!t.websiteKey||!t.facilityId)throw new Error("createBookingWidget: relayUrl, websiteKey and facilityId are required");ke();let r=t.text,a=i;a.classList.add("mylikita-widget"),Se(a,t.theme);let o=!0,d=!1,u=null,f=Math.random().toString(36).slice(2,8),I=`mylikita_ref_${t.facilityId}_${f}`,y=l("form",{className:"mylikita-widget__form"}),B=l("h3",{className:"mylikita-widget__title",text:r.title}),U=l("p",{className:"mylikita-widget__subtitle",text:r.subtitle}),L=l("div",{className:"mylikita-widget__error",attrs:{role:"alert"}}),q=_("name",r.name,{required:!0}),V=l("div",{className:"mylikita-widget__row"}),z=_("phone",r.phone,{type:"tel",inputmode:"tel"}),R=_("email",r.email,{type:"email"});V.append(z.wrap,R.wrap);let g=j("provider",r.provider,[{value:"",label:r.noPreference},...t.providers.map(n=>({value:n.external_id,label:n.label||n.name||n.external_id}))]);function se(n){let s=g.input.value;g.input.replaceChildren();let c=document.createElement("option");c.value="",c.textContent=r.noPreference,g.input.append(c);for(let m of n||[]){let p=document.createElement("option");p.value=m.external_id,p.textContent=m.label||m.name||m.external_id,g.input.append(p)}s&&(g.input.value=s)}let J=t.services.length?j("service",r.service,[{value:"",label:"\u2014"},...t.services.map(n=>({value:n,label:n}))]):_("service",r.service),v=_("datetime",r.datetime,{type:"datetime-local",required:!0});v.input.min=ne(new Date);let G=j("visitType",r.visitType,[{value:"physical",label:r.visitPhysical},{value:"telemedicine",label:r.visitTelemedicine},{value:"home_visit",label:r.visitHome}]),X=_("notes",r.notes,{type:"textarea",maxlength:500}),w=l("button",{className:"mylikita-widget__submit",type:"submit",text:r.submit}),Q=l("div");Q.append(w);let M=l("p",{className:"mylikita-widget__hint"});y.append(L,q.wrap,V,g.wrap,J.wrap,v.wrap,G.wrap,X.wrap,Q,M);let b=l("div",{className:"mylikita-widget__status",attrs:{"aria-live":"polite"},hidden:!0});y.addEventListener("submit",n=>{n.preventDefault(),!d&&le()});async function le(){d=!0,D(null),w.disabled=!0,w.textContent=r.submitting;let n={facility_id:t.facilityId,patient_name:q.input.value.trim(),patient_phone:z.input.value.trim(),patient_email:R.input.value.trim(),provider_external_id:g.input.value||void 0,service_name:J.input.value.trim()||void 0,appt_datetime:v.input.value,visit_type:G.input.value||"physical",duration_mins:t.durationMins||void 0,notes:X.input.value.trim()||void 0};if(!n.patient_name)return k(r.requiredName);if(!n.patient_phone&&!n.patient_email)return k(r.requiredPhoneOrEmail);if(!n.appt_datetime||Number.isNaN(Date.parse(n.appt_datetime)))return k(r.requiredDatetime);let s=he(I);if(!s){s=t.externalRef();try{sessionStorage.setItem(I,s)}catch{}}n.external_ref=s,u=new AbortController;let c=null;try{let m=await S({relayUrl:t.relayUrl,websiteKey:t.websiteKey,payload:n,signal:u.signal});c=m.booking_ref,m.duplicate?(M.textContent="",Z("pending_confirmation",c,"We found an existing booking request for this slot \u2014 checking it\u2026")):(t.onBooking&&x(t.onBooking,m,n),Z("pending_confirmation",c,null)),de(c)}catch(m){if(!o||m?.name==="AbortError")return;let p=m.status===429?r.rateLimited:m.message||r.networkError;t.onError&&x(t.onError,m),k(p)}}async function de(n){let s;try{s=await N(()=>T({relayUrl:t.relayUrl,websiteKey:t.websiteKey,bookingRef:n,signal:u.signal}),{intervalMs:t.pollIntervalMs,maxTries:t.maxTries,signal:u.signal})}catch(c){if(!o||c?.name==="AbortError")return;t.onError&&x(t.onError,c),h("poll_error",n,c.message||r.networkError),d=!1;return}if(!(!o||s.status==="aborted")){if(t.onStatus&&s.data&&x(t.onStatus,s.data),s.resolved){try{sessionStorage.removeItem(I)}catch{}h(s.status,n)}else h("pending_confirmation",n);d=!1}}function Z(n,s,c){y.hidden=!0,B.hidden=!0,U.hidden=!0,b.hidden=!1,h(n,s,c)}function h(n,s,c){let m=A(n),p=l("div",{className:`mylikita-widget__status-icon ${m.kind}`});p.textContent=ve(m.kind);let me=l("p",{className:"mylikita-widget__status-title",text:m.title}),ce=l("p",{className:"mylikita-widget__status-message",text:c||m.message}),ue=l("p",{className:"mylikita-widget__status-ref",text:s?`Booking ref: ${s}`:""}),te=l("button",{className:"mylikita-widget__link-btn",type:"button",text:r.bookAnother});te.addEventListener("click",()=>ee()),b.replaceChildren(p,me,ce,ue,te)}function k(n){d=!1,w.disabled=!1,w.textContent=r.submit,D(n)}function D(n){L.textContent=n||"",L.classList.toggle("visible",!!n)}function ee(){try{sessionStorage.removeItem(`mylikita_ref_${t.facilityId}`)}catch{}y.reset(),D(null),b.replaceChildren(),b.hidden=!0,y.hidden=!1,B.hidden=!1,U.hidden=!1,M.textContent="",d=!1,w.disabled=!1,w.textContent=r.submit,v.input.min=ne(new Date)}a.replaceChildren(B,U,y,b);let K=null;if(t.loadProviders){let n=new AbortController;(async()=>{try{let s=await E({relayUrl:t.relayUrl,websiteKey:t.websiteKey,signal:n.signal});o&&!n.signal.aborted&&se(s)}catch(s){if(!o||s?.name==="AbortError")return;t.onError&&x(t.onError,s)}})(),K=()=>n.abort()}return{destroy(){o=!1,u&&u.abort(),K&&K(),a.replaceChildren(),a.classList.remove("mylikita-widget")},reset:ee,getForm(){return{name:q.input.value,phone:z.input.value,email:R.input.value}}}}function _(i,e,{type:t="text",required:r=!1,maxlength:a,inputmode:o}={}){let d=l("div",{className:"mylikita-widget__field"}),u=l("label",{className:"mylikita-widget__label",attrs:{for:`mlw-${i}`}});u.append(document.createTextNode(e)),r&&u.append(l("span",{className:"req",text:" *"}));let f;return t==="textarea"?f=l("textarea",{className:"mylikita-widget__textarea",attrs:{id:`mlw-${i}`,rows:3,maxlength:a||""}}):f=l("input",{className:"mylikita-widget__input",attrs:{id:`mlw-${i}`,type:t,inputmode:o||""}}),r&&f.setAttribute("required",""),d.append(u,f),{wrap:d,input:f}}function j(i,e,t){let r=l("div",{className:"mylikita-widget__field"}),a=l("label",{className:"mylikita-widget__label",attrs:{for:`mlw-${i}`}});a.textContent=e;let o=l("select",{className:"mylikita-widget__select",attrs:{id:`mlw-${i}`}});for(let d of t){let u=l("option",{text:d.label});u.value=d.value,o.append(u)}return r.append(a,o),{wrap:r,input:o}}function l(i,{className:e,text:t,attrs:r={}}={}){let a=document.createElement(i);e&&(a.className=e),t!==void 0&&(a.textContent=t);for(let[o,d]of Object.entries(r))d===void 0||d===""||a.setAttribute(o,d);return a}function ve(i){return i==="success"?"\u2713":i==="danger"?"!":"\u2026"}function he(i){try{return sessionStorage.getItem(i)||null}catch{return null}}function x(i,...e){try{i(...e)}catch{}}function ne(i){let e=t=>String(t).padStart(2,"0");return`${i.getFullYear()}-${e(i.getMonth()+1)}-${e(i.getDate())}T${e(i.getHours())}:${e(i.getMinutes())}`}function ke(){if(document.getElementById(ae))return;let i=document.createElement("style");i.id=ae,i.textContent=re,document.head.appendChild(i)}function Se(i,e){for(let[t,r]of Object.entries($(e)))i.style.setProperty(t,r)}return _e(Ee);})();

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@mylikita/booking-widget",
+  "version": "0.1.0",
+  "description": "Drop-in appointment booking widget for MyLikita hospital websites. Submits bookings through the MyLikita relay (POST /v1/bookings) and polls status (GET /v1/bookings/:ref). Themeable via CSS variables.",
+  "type": "module",
+  "main": "dist/mylikita-booking-widget.cjs",
+  "module": "dist/mylikita-booking-widget.esm.js",
+  "browser": "dist/mylikita-booking-widget.js",
+  "unpkg": "dist/mylikita-booking-widget.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/mylikita-booking-widget.esm.js",
+      "require": "./dist/mylikita-booking-widget.cjs",
+      "default": "./dist/mylikita-booking-widget.esm.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "build:demo": "node build-demo.mjs",
+    "test": "node test/widget.test.js",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "keywords": [
+    "mylikita",
+    "appointment",
+    "booking",
+    "widget",
+    "hospital",
+    "relay",
+    "healthcare"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  }
+}

package/src/client.js

@@ -0,0 +1,128 @@
+/**
+ * Relay API client (pure — no DOM). Implements the exact v1 contract from
+ * WEBSITE_BOOKING_API.md:
+ *
+ *   POST /v1/bookings          → { booking_ref, status } | 400/401/403/409/429/500
+ *   GET  /v1/bookings/:ref     → { booking_ref, status, appt_ref? }
+ *   GET  /v1/providers         → { facility_id, providers: [{external_id, name, ...}] }
+ *
+ * Auth is `Authorization: Bearer <website_key>` on every request. The
+ * website_key is a public client id by design (never a secret).
+ */
+
+/**
+ * Create a booking. Returns `{ ok: true, booking_ref, status }` on success.
+ * A 409 `duplicate_booking` is NOT an error — the patient double-submitted or
+ * refreshed — it resolves with `{ ok: true, duplicate: true, booking_ref }`
+ * and the caller treats it as success (per the contract §4) so the widget can
+ * poll the existing booking. Other failures throw an Error with `.code` and
+ * `.status`.
+ */
+export async function createBooking({ relayUrl, websiteKey, payload, signal }) {
+  const res = await fetch(`${trimUrl(relayUrl)}/v1/bookings`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${websiteKey}`,
+    },
+    body: JSON.stringify(payload),
+    signal,
+  });
+  const body = await readJson(res);
+
+  if (res.status === 409) {
+    return { ok: true, duplicate: true, booking_ref: body?.booking_ref, error: body?.message };
+  }
+  if (!res.ok) {
+    throw apiError(res.status, body, 'create');
+  }
+  return { ok: true, duplicate: false, booking_ref: body?.booking_ref, status: body?.status || 'pending_confirmation' };
+}
+
+/**
+ * Fetch the facility's mapped provider list (Phase C2/C3) — the doctors the
+ * hospital has published for the website's dropdown. The hospital pushes this
+ * registry to the relay on its sync cycle; the website only ever sees mapped,
+ * active providers (names + slugs, no PHI). Returns a normalized array
+ * `[{ external_id, name, specialty, module }]`; an empty list is valid (the
+ * widget falls back to "No preference").
+ */
+export async function fetchProviders({ relayUrl, websiteKey, signal }) {
+  const res = await fetch(`${trimUrl(relayUrl)}/v1/providers`, {
+    headers: { Authorization: `Bearer ${websiteKey}` },
+    signal,
+  });
+  const body = await readJson(res);
+  if (!res.ok) throw apiError(res.status, body, 'providers');
+  const list = Array.isArray(body?.providers) ? body.providers : [];
+  return list.map((p) => ({
+    external_id: p.external_id,
+    name: p.name || p.external_id,
+    specialty: p.specialty || null,
+    module: p.module || 'general',
+  }));
+}
+
+/** Fetch a booking's current status. */
+export async function fetchStatus({ relayUrl, websiteKey, bookingRef, signal }) {
+  const res = await fetch(`${trimUrl(relayUrl)}/v1/bookings/${encodeURIComponent(bookingRef)}`, {
+    headers: { Authorization: `Bearer ${websiteKey}` },
+    signal,
+  });
+  const body = await readJson(res);
+  if (!res.ok) throw apiError(res.status, body, 'status');
+  return { booking_ref: body?.booking_ref, status: body?.status || 'pending_confirmation', appt_ref: body?.appt_ref || null };
+}
+
+/**
+ * Bounded status poll. Calls `client()` (a thunk returning a status object)
+ * every `intervalMs` until the status leaves `pending_confirmation` or
+ * `maxTries` attempts run out.
+ *
+ * Cancellation: pass an `AbortSignal`. Aborting resolves early with
+ * `{ status: 'aborted', resolved: false }` — the caller should treat that as
+ * "stop, the widget was destroyed", not as an error.
+ *
+ * @returns {Promise<{status:string, resolved:boolean, data:object}>}
+ */
+export async function pollStatus(client, { intervalMs = 5000, maxTries = 12, signal } = {}) {
+  for (let i = 0; i < maxTries; i++) {
+    if (signal?.aborted) return { status: 'aborted', resolved: false, data: null };
+    const data = await client();
+    if (data.status !== 'pending_confirmation') {
+      return { status: data.status, resolved: true, data };
+    }
+    if (i < maxTries - 1) await sleep(intervalMs, signal);
+  }
+  return { status: 'pending_confirmation', resolved: false, data: null };
+}
+
+export function newExternalRef() {
+  return `BK-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+}
+
+// ── internals ───────────────────────────────────────────────────────────────
+
+function trimUrl(url) {
+  return String(url || '').replace(/\/+$/, '');
+}
+
+function apiError(status, body, phase) {
+  const err = new Error(body?.message || body?.error || `Relay ${phase} failed (HTTP ${status})`);
+  err.code = body?.error || 'http_error';
+  err.status = status;
+  return err;
+}
+
+async function readJson(res) {
+  try { return await res.json(); } catch (_) { return null; }
+}
+
+function sleep(ms, signal) {
+  return new Promise((resolve) => {
+    if (signal?.aborted) return resolve();
+    const onAbort = () => { clearTimeout(t); resolve(); };
+    const t = setTimeout(() => { signal?.removeEventListener('abort', onAbort); resolve(); }, ms);
+    signal?.addEventListener('abort', onAbort, { once: true });
+  });
+}

package/src/index.js

@@ -0,0 +1,30 @@
+/**
+ * @mylikita/booking-widget
+ *
+ * Drop-in appointment booking for MyLikita hospital websites. Mounts a
+ * self-contained booking form into any element; submissions go through the
+ * MyLikita relay (POST /v1/bookings) and the widget polls the booking until
+ * the hospital confirms, cancels, reschedules, no-shows or the request
+ * expires (GET /v1/bookings/:ref).
+ *
+ * Usage:
+ *
+ *   <div id="booking"></div>
+ *   <script src="mylikita-booking-widget.min.js"></script>
+ *   <script>
+ *     MyLikitaBookingWidget.createBookingWidget(document.getElementById('booking'), {
+ *       relayUrl: 'https://api.mylikita.clinic',
+ *       websiteKey: 'wk_...',       // public client id — not a secret
+ *       facilityId: 'F1',
+ *       providers: [{ external_id: 'dr-khalil', label: 'Dr. Khalil' }],
+ *       theme: { primary: '#0d6efd' },
+ *     });
+ *   </script>
+ *
+ * See README.md for the full option reference and theming guide.
+ */
+
+export { createBookingWidget } from './widget.js';
+export { createBooking, fetchStatus, pollStatus, newExternalRef, fetchProviders } from './client.js';
+export { STATUS_COPY, statusCopy, TERMINAL_STATUSES } from './state.js';
+export { DEFAULT_THEME, resolveTheme } from './theme.js';

package/src/state.js

@@ -0,0 +1,49 @@
+/**
+ * Patient-facing copy for each booking status, mirroring the "Patient-facing
+ * hint" column of WEBSITE_BOOKING_API.md §3. `kind` drives the badge colour.
+ */
+
+export const STATUS_COPY = {
+  pending_confirmation: {
+    title: 'Request received',
+    message: "We've received your booking request — we'll confirm shortly.",
+    kind: 'info',
+  },
+  confirmed: {
+    title: 'Appointment confirmed',
+    message: 'Your appointment is confirmed. See you at the clinic!',
+    kind: 'success',
+  },
+  cancelled: {
+    title: 'Appointment cancelled',
+    message: 'This appointment was cancelled. Please contact the clinic if this was unexpected.',
+    kind: 'danger',
+  },
+  rescheduled: {
+    title: 'Appointment rescheduled',
+    message: 'This appointment was moved — the new time was sent to you.',
+    kind: 'info',
+  },
+  no_show: {
+    title: 'Missed appointment',
+    message: 'This appointment was marked as missed.',
+    kind: 'danger',
+  },
+  expired: {
+    title: 'Request expired',
+    message: 'This booking request expired — please call the clinic to book.',
+    kind: 'danger',
+  },
+  // Widget-internal: the poll itself failed (network, rotated key, etc.).
+  poll_error: {
+    title: 'Something went wrong',
+    message: 'We could not check your booking right now. Please try again shortly.',
+    kind: 'danger',
+  },
+};
+
+export function statusCopy(status) {
+  return STATUS_COPY[status] || STATUS_COPY.pending_confirmation;
+}
+
+export const TERMINAL_STATUSES = ['confirmed', 'cancelled', 'rescheduled', 'no_show', 'expired'];

package/src/styles.js

@@ -0,0 +1,147 @@
+/**
+ * Widget styles, injected once per document as a <style id="mylikita-widget-styles">.
+ * Everything is scoped under `.mylikita-widget` and driven by CSS custom
+ * properties (see theme.js) so host pages can restyle without fighting
+ * specificity wars.
+ */
+export const STYLES = `
+.mylikita-widget {
+  --mlw-primary: #0d6efd;
+  --mlw-primary-dark: #0b5ed7;
+  --mlw-primary-text: #ffffff;
+  --mlw-bg: #ffffff;
+  --mlw-text: #1e293b;
+  --mlw-muted: #64748b;
+  --mlw-border: #e2e8f0;
+  --mlw-danger: #dc3545;
+  --mlw-success: #15803d;
+  --mlw-radius: 10px;
+  --mlw-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  font-family: var(--mlw-font);
+  color: var(--mlw-text);
+  background: var(--mlw-bg);
+  border: 1px solid var(--mlw-border);
+  border-radius: calc(var(--mlw-radius) + 2px);
+  padding: 22px;
+  max-width: 480px;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+.mylikita-widget *,
+.mylikita-widget *::before,
+.mylikita-widget *::after { box-sizing: border-box; }
+
+.mylikita-widget__title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  color: var(--mlw-text);
+}
+.mylikita-widget__subtitle {
+  font-size: 13px;
+  color: var(--mlw-muted);
+  margin: 0 0 16px;
+}
+
+.mylikita-widget__field { margin-bottom: 12px; }
+.mylikita-widget__label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mlw-text);
+  margin-bottom: 5px;
+}
+.mylikita-widget__label .req { color: var(--mlw-danger); }
+.mylikita-widget__input,
+.mylikita-widget__select,
+.mylikita-widget__textarea {
+  width: 100%;
+  font: inherit;
+  font-size: 14px;
+  color: var(--mlw-text);
+  background: var(--mlw-bg);
+  border: 1px solid var(--mlw-border);
+  border-radius: var(--mlw-radius);
+  padding: 9px 11px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.mylikita-widget__input:focus,
+.mylikita-widget__select:focus,
+.mylikita-widget__textarea:focus {
+  border-color: var(--mlw-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mlw-primary) 22%, transparent);
+}
+.mylikita-widget__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 420px) { .mylikita-widget__row { grid-template-columns: 1fr; } }
+
+.mylikita-widget__error {
+  display: none;
+  font-size: 13px;
+  color: var(--mlw-danger);
+  background: color-mix(in srgb, var(--mlw-danger) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--mlw-danger) 35%, transparent);
+  border-radius: var(--mlw-radius);
+  padding: 9px 12px;
+  margin-bottom: 12px;
+}
+.mylikita-widget__error.visible { display: block; }
+
+.mylikita-widget__submit {
+  width: 100%;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mlw-primary-text);
+  background: var(--mlw-primary);
+  border: none;
+  border-radius: var(--mlw-radius);
+  padding: 11px 16px;
+  cursor: pointer;
+  transition: background .15s ease, transform .05s ease;
+}
+.mylikita-widget__submit:hover { background: var(--mlw-primary-dark); }
+.mylikita-widget__submit:active { transform: translateY(1px); }
+.mylikita-widget__submit:disabled { opacity: .6; cursor: wait; }
+
+.mylikita-widget__hint { font-size: 12px; color: var(--mlw-muted); margin: 8px 0 0; }
+
+/* status view */
+.mylikita-widget__status { text-align: center; padding: 8px 4px; }
+.mylikita-widget__status-icon {
+  width: 46px; height: 46px;
+  border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 22px; margin-bottom: 10px;
+}
+.mylikita-widget__status-icon.info { background: color-mix(in srgb, var(--mlw-primary) 12%, transparent); }
+.mylikita-widget__status-icon.success { background: color-mix(in srgb, var(--mlw-success) 14%, transparent); }
+.mylikita-widget__status-icon.danger { background: color-mix(in srgb, var(--mlw-danger) 12%, transparent); }
+.mylikita-widget__status-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
+.mylikita-widget__status-message { font-size: 13px; color: var(--mlw-muted); margin: 0 0 14px; }
+.mylikita-widget__status-ref { font-size: 12px; color: var(--mlw-muted); margin: 0 0 14px; }
+
+.mylikita-widget__spinner {
+  width: 18px; height: 18px;
+  display: inline-block;
+  border: 2px solid color-mix(in srgb, var(--mlw-primary-text) 40%, transparent);
+  border-top-color: var(--mlw-primary-text);
+  border-radius: 50%;
+  animation: mylikita-widget-spin .7s linear infinite;
+  vertical-align: -3px;
+  margin-right: 7px;
+}
+@keyframes mylikita-widget-spin { to { transform: rotate(360deg); } }
+
+.mylikita-widget__link-btn {
+  background: none;
+  border: 1px solid var(--mlw-border);
+  border-radius: var(--mlw-radius);
+  color: var(--mlw-text);
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+.mylikita-widget__link-btn:hover { border-color: var(--mlw-primary); color: var(--mlw-primary); }
+`;

package/src/theme.js

@@ -0,0 +1,47 @@
+/**
+ * Theme hooks.
+ *
+ * The widget renders inside a `.mylikita-widget` container and every colour,
+ * radius and font is a CSS custom property on that container. Agencies can
+ * theme it two ways:
+ *
+ *   1. Programmatically: pass `theme: { primary: '#e91e63', ... }` to
+ *      createBookingWidget() — the widget sets the CSS vars itself.
+ *   2. Pure CSS: any stylesheet can set the vars on `.mylikita-widget` and
+ *      they win (the widget only writes vars for values you passed).
+ */
+
+export const DEFAULT_THEME = {
+  primary: '#0d6efd',
+  primaryDark: '#0b5ed7',
+  primaryText: '#ffffff',
+  bg: '#ffffff',
+  text: '#1e293b',
+  muted: '#64748b',
+  border: '#e2e8f0',
+  danger: '#dc3545',
+  success: '#15803d',
+  radius: 10,
+  font: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+};
+
+/**
+ * Map a (partial) theme object to CSS custom properties, merged over the
+ * defaults. Unknown keys are ignored; `radius` is a number → `${n}px`.
+ */
+export function resolveTheme(theme = {}) {
+  const t = { ...DEFAULT_THEME, ...(theme || {}) };
+  return {
+    '--mlw-primary': t.primary,
+    '--mlw-primary-dark': t.primaryDark,
+    '--mlw-primary-text': t.primaryText,
+    '--mlw-bg': t.bg,
+    '--mlw-text': t.text,
+    '--mlw-muted': t.muted,
+    '--mlw-border': t.border,
+    '--mlw-danger': t.danger,
+    '--mlw-success': t.success,
+    '--mlw-radius': `${t.radius}px`,
+    '--mlw-font': t.font,
+  };
+}