@patientos/website-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,484 @@
+import {
+  ISLANDS,
+  mountIslands
+} from "./chunk-Q4URDZAK.js";
+import {
+  PortalAccount,
+  PortalPanel,
+  getAppointmentTypes,
+  getClinic,
+  getPublicApi,
+  getServices,
+  getThemeTokens
+} from "./chunk-TOPPLOH2.js";
+import {
+  BPOINT_SCRIPT_ORIGIN,
+  BPOINT_SCRIPT_URL,
+  CONSULT_CHUNK_PATH,
+  THIRD_PARTY_SCRIPT_ORIGINS,
+  TURNSTILE_SCRIPT_ORIGIN,
+  TURNSTILE_SCRIPT_URL
+} from "./chunk-ZOF22TJA.js";
+import {
+  evaluateShowWhen,
+  visibleQuestions
+} from "./chunk-QDO3SJWR.js";
+import {
+  ISLAND_ATTR,
+  ISLAND_PROPS_ATTR,
+  Island,
+  mountIslandsWith,
+  readIslandProps
+} from "./chunk-THMT43MV.js";
+import "./chunk-G3U6EXJM.js";
+import {
+  contrastRatio,
+  deriveForeground,
+  derivePrimaryPair,
+  parseHexColor,
+  relativeLuminance
+} from "./chunk-LCHW6XF4.js";
+import {
+  patientSurfaceTheme
+} from "./chunk-JTZ6GYA7.js";
+import "./chunk-MLKGABMK.js";
+
+// src/tokens.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultTheme = {
+  // palette
+  brand: "#1f6feb",
+  brandForeground: "#ffffff",
+  neutral: "#f4f6f8",
+  neutralForeground: "#1b2733",
+  accent: "#0fb39a",
+  background: "#ffffff",
+  foreground: "#1b2733",
+  muted: "#5b6b7a",
+  // type scale
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontFamilyHeading: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontSizeBase: "1rem",
+  fontSizeSm: "0.875rem",
+  fontSizeLg: "1.25rem",
+  fontSizeH2: "2rem",
+  fontSizeH1: "3rem",
+  // geometry
+  spacingUnit: "0.5rem",
+  radius: "0.625rem"
+};
+function themeToCssVars(theme) {
+  return {
+    "--sk-brand": theme.brand,
+    "--sk-brand-foreground": theme.brandForeground,
+    "--sk-neutral": theme.neutral,
+    "--sk-neutral-foreground": theme.neutralForeground,
+    "--sk-accent": theme.accent,
+    "--sk-background": theme.background,
+    "--sk-foreground": theme.foreground,
+    "--sk-muted": theme.muted,
+    "--sk-font": theme.fontFamily,
+    "--sk-font-heading": theme.fontFamilyHeading,
+    "--sk-font-size-base": theme.fontSizeBase,
+    "--sk-font-size-sm": theme.fontSizeSm,
+    "--sk-font-size-lg": theme.fontSizeLg,
+    "--sk-font-size-h2": theme.fontSizeH2,
+    "--sk-font-size-h1": theme.fontSizeH1,
+    "--sk-space": theme.spacingUnit,
+    "--sk-radius": theme.radius
+  };
+}
+function resolveTheme(theme) {
+  const merged = theme ? { ...defaultTheme, ...theme } : defaultTheme;
+  return { ...merged, brandForeground: deriveForeground(merged.brand) };
+}
+function ThemeProvider({
+  theme,
+  children,
+  className,
+  ...rest
+}) {
+  const resolved = resolveTheme(theme);
+  const style = themeToCssVars(resolved);
+  return /* @__PURE__ */ jsx("div", { "data-sk-theme": "", "data-sk-root": "", className, style, ...rest, children });
+}
+
+// src/layout.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Container({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: cx("sk-container", className), ...rest, children });
+}
+function Row({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: cx("sk-row", className), ...rest, children });
+}
+function Stack({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: cx("sk-stack", className), ...rest, children });
+}
+function WebsiteShell({
+  theme,
+  title,
+  children
+}) {
+  const resolved = resolveTheme(theme);
+  const vars = themeToCssVars(resolved);
+  const rootCss = ":root{" + Object.entries(vars).map(([k, v]) => `${k}:${v};`).join("") + "}";
+  return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
+    /* @__PURE__ */ jsxs("head", { children: [
+      /* @__PURE__ */ jsx2("meta", { charSet: "utf-8" }),
+      /* @__PURE__ */ jsx2("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
+      title ? /* @__PURE__ */ jsx2("title", { children: title }) : null,
+      /* @__PURE__ */ jsx2("link", { rel: "stylesheet", href: "/website-kit.css" }),
+      /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: guardStyleCss(rootCss) } }),
+      /* @__PURE__ */ jsx2("script", { type: "module", src: "/main.js" })
+    ] }),
+    /* @__PURE__ */ jsx2("body", { children: /* @__PURE__ */ jsx2("div", { "data-sk-theme": "", "data-sk-root": "", children }) })
+  ] });
+}
+function guardStyleCss(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+
+// src/components.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function cx2(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Button({
+  href,
+  variant = "solid",
+  className,
+  children,
+  target,
+  rel,
+  ...rest
+}) {
+  const cls = cx2("sk-button", `sk-button--${variant}`, className);
+  if (href) {
+    return /* @__PURE__ */ jsx3(
+      "a",
+      {
+        className: cls,
+        href,
+        target,
+        rel,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3("button", { className: cls, ...rest, children });
+}
+function Hero({
+  heading,
+  subheading,
+  image,
+  cta,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedStyle = image ? { ...style, ["--sk-hero-image"]: `url("${image}")` } : style ?? {};
+  return /* @__PURE__ */ jsx3(
+    "section",
+    {
+      className: cx2("sk-hero", image && "sk-hero--image", className),
+      style: mergedStyle,
+      ...rest,
+      children: /* @__PURE__ */ jsxs2("div", { className: "sk-hero__inner", children: [
+        /* @__PURE__ */ jsx3("h1", { className: "sk-hero__heading", children: heading }),
+        subheading ? /* @__PURE__ */ jsx3("p", { className: "sk-hero__subheading", children: subheading }) : null,
+        cta ? /* @__PURE__ */ jsx3("div", { className: "sk-hero__cta", children: cta }) : null
+      ] })
+    }
+  );
+}
+function Section({
+  title,
+  intro,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3("section", { className: cx2("sk-section", className), ...rest, children: /* @__PURE__ */ jsxs2("div", { className: "sk-section__inner", children: [
+    title ? /* @__PURE__ */ jsx3("h2", { className: "sk-section__title", children: title }) : null,
+    intro ? /* @__PURE__ */ jsx3("p", { className: "sk-section__intro", children: intro }) : null,
+    children
+  ] }) });
+}
+function ServiceGrid({
+  services,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3("ul", { className: cx2("sk-service-grid", className), ...rest, children: services.map((s, i) => /* @__PURE__ */ jsxs2("li", { className: "sk-service-grid__item", children: [
+    s.icon ? /* @__PURE__ */ jsx3("img", { className: "sk-service-grid__icon", src: s.icon, alt: "", "aria-hidden": "true" }) : null,
+    /* @__PURE__ */ jsx3("h3", { className: "sk-service-grid__title", children: s.title }),
+    /* @__PURE__ */ jsx3("p", { className: "sk-service-grid__desc", children: s.description })
+  ] }, `${s.title}-${i}`)) });
+}
+function TeamGrid({
+  members,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3("ul", { className: cx2("sk-team-grid", className), ...rest, children: members.map((m, i) => /* @__PURE__ */ jsxs2("li", { className: "sk-team-grid__item", children: [
+    m.photo ? /* @__PURE__ */ jsx3(
+      "img",
+      {
+        className: "sk-team-grid__photo",
+        src: m.photo,
+        alt: `Photo of ${m.name}`
+      }
+    ) : /* @__PURE__ */ jsx3("div", { className: "sk-team-grid__photo sk-team-grid__photo--placeholder", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3("p", { className: "sk-team-grid__name", children: m.name }),
+    /* @__PURE__ */ jsx3("p", { className: "sk-team-grid__role", children: m.role })
+  ] }, `${m.name}-${i}`)) });
+}
+function Hours({ rows, className, ...rest }) {
+  return /* @__PURE__ */ jsx3("dl", { className: cx2("sk-hours", className), ...rest, children: rows.map((r, i) => /* @__PURE__ */ jsxs2("div", { className: "sk-hours__row", children: [
+    /* @__PURE__ */ jsx3("dt", { className: "sk-hours__day", children: r.day }),
+    /* @__PURE__ */ jsx3("dd", { className: "sk-hours__time", children: r.hours })
+  ] }, `${r.day}-${i}`)) });
+}
+function MapEmbed({
+  src,
+  address,
+  height = "320px",
+  title = "Map",
+  className,
+  style,
+  ...rest
+}) {
+  const resolvedSrc = src ?? (address ? `https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed` : void 0);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cx2("sk-map", className),
+      style: { ...style, ["--sk-map-height"]: height },
+      ...rest,
+      children: resolvedSrc ? /* @__PURE__ */ jsx3(
+        "iframe",
+        {
+          className: "sk-map__frame",
+          src: resolvedSrc,
+          title,
+          loading: "lazy",
+          referrerPolicy: "no-referrer-when-downgrade"
+        }
+      ) : null
+    }
+  );
+}
+function FAQ({ items, className, ...rest }) {
+  return /* @__PURE__ */ jsx3("div", { className: cx2("sk-faq", className), ...rest, children: items.map((it, i) => /* @__PURE__ */ jsxs2("details", { className: "sk-faq__item", children: [
+    /* @__PURE__ */ jsx3("summary", { className: "sk-faq__q", children: it.q }),
+    /* @__PURE__ */ jsx3("div", { className: "sk-faq__a", children: it.a })
+  ] }, `${it.q}-${i}`)) });
+}
+
+// src/certificate-funnel.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function CertificateFunnel({
+  serviceKeys,
+  serviceKey,
+  serviceCopy,
+  heading,
+  className
+}) {
+  const publicApi = getPublicApi();
+  const clinic = getClinic();
+  const theme = patientSurfaceTheme(getThemeTokens());
+  const snapshotServices = getServices().filter((s) => !!s.key).map((s) => ({ key: s.key, label: serviceCopy?.[s.key] ?? s.label }));
+  const services = serviceKeys ? serviceKeys.map((k) => snapshotServices.find((s) => s.key === k)).filter((s) => !!s) : snapshotServices;
+  const offered = serviceKey ? services.filter((s) => s.key === serviceKey) : services;
+  const title = heading ?? "Medical certificates";
+  return /* @__PURE__ */ jsxs3(
+    Island,
+    {
+      name: "certificate-funnel",
+      props: {
+        serviceKey,
+        heading: title,
+        publicApi,
+        services: offered,
+        clinicName: clinic.name,
+        clinicPhone: clinic.phone
+      },
+      className: ["sk-certificate-funnel", className].filter(Boolean).join(" "),
+      style: themeStyle(theme),
+      children: [
+        /* @__PURE__ */ jsx4("h2", { className: "sk-certificate-funnel__heading", children: title }),
+        offered.length > 0 && /* @__PURE__ */ jsx4("ul", { className: "sk-certificate-funnel__services", children: offered.map((s) => /* @__PURE__ */ jsx4("li", { children: s.label }, s.key)) }),
+        /* @__PURE__ */ jsxs3("p", { className: "sk-certificate-funnel__placeholder", children: [
+          "Request one online.",
+          " ",
+          clinic.phone ? `Book by phone: ${clinic.phone}` : "Or call the clinic to book."
+        ] })
+      ]
+    }
+  );
+}
+function themeStyle(theme) {
+  const style = {};
+  if (theme.primary) {
+    const { bg, fg } = derivePrimaryPair(theme.primary);
+    style["--sk-island-primary"] = bg;
+    style["--sk-island-primary-fg"] = fg;
+  }
+  if (theme.accent) style["--sk-island-accent"] = theme.accent;
+  if (theme.radius) style["--sk-island-radius"] = theme.radius;
+  if (theme.fontFamily) style["--sk-island-font"] = theme.fontFamily;
+  return style;
+}
+
+// src/booking-block.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function BookingBlock({
+  appointmentTypeId,
+  practitionerId,
+  appointmentTypeIds,
+  heading,
+  className
+}) {
+  const publicApi = getPublicApi();
+  const clinic = getClinic();
+  const theme = patientSurfaceTheme(getThemeTokens());
+  const all = getAppointmentTypes().filter((t) => !!t.id).map((t) => ({
+    id: t.id,
+    label: t.label,
+    durationMinutes: t.durationMinutes,
+    modality: t.modality
+  }));
+  const filtered = appointmentTypeIds ? appointmentTypeIds.map((id) => all.find((t) => t.id === id)).filter((t) => !!t) : all;
+  const offered = appointmentTypeId ? filtered.filter((t) => t.id === appointmentTypeId) : filtered;
+  const title = heading ?? "Book an appointment";
+  return /* @__PURE__ */ jsxs4(
+    Island,
+    {
+      name: "booking",
+      props: {
+        appointmentTypeId,
+        practitionerId,
+        heading: title,
+        publicApi,
+        appointmentTypes: offered,
+        clinicName: clinic.name,
+        clinicPhone: clinic.phone
+      },
+      className: ["sk-booking", className].filter(Boolean).join(" "),
+      style: themeStyle(theme),
+      children: [
+        /* @__PURE__ */ jsx5("h2", { className: "sk-booking__heading", children: title }),
+        offered.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "sk-booking__types", children: offered.map((t) => /* @__PURE__ */ jsxs4("li", { children: [
+          t.label,
+          t.durationMinutes ? ` \xB7 ${t.durationMinutes} min` : ""
+        ] }, t.id)) }),
+        /* @__PURE__ */ jsx5("p", { className: "sk-booking__placeholder", children: clinic.phone ? `Book online, or call the clinic on ${clinic.phone}.` : "Book online, or call the clinic." })
+      ]
+    }
+  );
+}
+
+// src/store-block.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Store({
+  categoryHandle,
+  title,
+  columns,
+  className
+}) {
+  return /* @__PURE__ */ jsxs5(
+    Island,
+    {
+      name: "store",
+      props: { categoryHandle, title, columns },
+      className: ["sk-store", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx6("h2", { className: "sk-store__heading", children: title ?? "Shop" }),
+        /* @__PURE__ */ jsx6("p", { className: "sk-store__placeholder", children: "Our online shop needs JavaScript. Please contact the clinic to order." })
+      ]
+    }
+  );
+}
+
+// src/cart-block.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Cart({ className }) {
+  return /* @__PURE__ */ jsxs6(Island, { name: "cart", className: ["sk-cart", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx7("h2", { className: "sk-cart__heading", children: "Your cart" }),
+    /* @__PURE__ */ jsx7("p", { className: "sk-cart__placeholder", children: "Your cart needs JavaScript to load." })
+  ] });
+}
+
+// src/checkout-block.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function Checkout({ className }) {
+  return /* @__PURE__ */ jsxs7(Island, { name: "checkout", className: ["sk-checkout", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx8("h2", { className: "sk-checkout__heading", children: "Checkout" }),
+    /* @__PURE__ */ jsx8("p", { className: "sk-checkout__placeholder", children: "Checkout needs JavaScript to load." })
+  ] });
+}
+
+// src/index.ts
+var WEBSITE_KIT_VERSION = "0.1.0";
+export {
+  BPOINT_SCRIPT_ORIGIN,
+  BPOINT_SCRIPT_URL,
+  BookingBlock,
+  Button,
+  CONSULT_CHUNK_PATH,
+  Cart,
+  CertificateFunnel,
+  Checkout,
+  Container,
+  FAQ,
+  Hero,
+  Hours,
+  ISLANDS,
+  ISLAND_ATTR,
+  ISLAND_PROPS_ATTR,
+  Island,
+  MapEmbed,
+  PortalAccount,
+  PortalPanel,
+  Row,
+  Section,
+  ServiceGrid,
+  Stack,
+  Store,
+  THIRD_PARTY_SCRIPT_ORIGINS,
+  TURNSTILE_SCRIPT_ORIGIN,
+  TURNSTILE_SCRIPT_URL,
+  TeamGrid,
+  ThemeProvider,
+  WEBSITE_KIT_VERSION,
+  WebsiteShell,
+  contrastRatio,
+  defaultTheme,
+  deriveForeground,
+  evaluateShowWhen,
+  mountIslands,
+  mountIslandsWith,
+  parseHexColor,
+  patientSurfaceTheme,
+  readIslandProps,
+  relativeLuminance,
+  resolveTheme,
+  themeToCssVars,
+  visibleQuestions
+};

package/dist/islands-impl.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { b as BookingBlockProps, h as CertificateFunnelProps, n as StoreProps, e as CartProps, k as CheckoutProps } from './checkout-block-CrO7OxI9.js';
+import { f as PortalPanelProps } from './portal-account-EhOtLV5u.js';
+import { F as FetchLike } from './portal-account.client-CTget1-3.js';
+export { P as PortalAccountClient } from './portal-account.client-CTget1-3.js';
+
+declare function BookingBlockClient(props: BookingBlockProps): React.ReactElement;
+
+declare function CertificateFunnelClient(props: CertificateFunnelProps): React.ReactElement;
+
+type SummaryItem = {
+    id: string;
+    title?: string | null;
+    status?: string | null;
+    /** appointments */
+    start?: string | null;
+    /** documents */
+    date?: string | null;
+    /** orders */
+    placedAt?: string | null;
+    total?: string | null;
+    currency?: string | null;
+    locationName?: string | null;
+    practitionerName?: string | null;
+};
+/**
+ * Everything the panel can be showing. A discriminated union, derived once by
+ * `loadPortalPanel`, so the render is a pure function of state — and so the whole
+ * behaviour is testable without a DOM.
+ */
+type PortalPanelState = {
+    kind: 'loading';
+}
+/** No patient session on this host — show the inline magic-link ramp. */
+ | {
+    kind: 'signed-out';
+}
+/** A link was requested; we never say whether the address matched an account. */
+ | {
+    kind: 'link-sent';
+    email: string;
+} | {
+    kind: 'signed-in';
+    givenName: string | null;
+    items: SummaryItem[];
+}
+/**
+ * The panel cannot answer here: no portal on this host (404), the surface is off, or
+ * the network failed. Degrades to a plain link out — never an error dump.
+ */
+ | {
+    kind: 'link-out';
+};
+type PortalPanelClientProps = PortalPanelProps & {
+    /** Test seam: the initial state, so the view is renderable without effects. */
+    initialState?: PortalPanelState;
+    /** Test seam: the fetch used for whoami/summary/magic-link. Defaults to global. */
+    fetchImpl?: FetchLike;
+};
+declare function PortalPanelClient({ surface, portalUrl, initialState, fetchImpl, }: PortalPanelClientProps): React.ReactElement;
+
+declare function StoreClient({ categoryHandle, title, columns }: StoreProps): React.ReactElement;
+
+declare function CartClient(_props: CartProps): React.ReactElement;
+
+declare function CheckoutClient(_props: CheckoutProps): React.ReactElement;
+
+export { BookingBlockClient, CartClient, CertificateFunnelClient, CheckoutClient, PortalPanelClient, StoreClient };

package/dist/islands-impl.js

@@ -0,0 +1,23 @@
+import {
+  BookingBlockClient,
+  CartClient,
+  CertificateFunnelClient,
+  CheckoutClient,
+  PortalAccountClient,
+  PortalPanelClient,
+  StoreClient
+} from "./chunk-TOPPLOH2.js";
+import "./chunk-ZOF22TJA.js";
+import "./chunk-QDO3SJWR.js";
+import "./chunk-THMT43MV.js";
+import "./chunk-G3U6EXJM.js";
+import "./chunk-MLKGABMK.js";
+export {
+  BookingBlockClient,
+  CartClient,
+  CertificateFunnelClient,
+  CheckoutClient,
+  PortalAccountClient,
+  PortalPanelClient,
+  StoreClient
+};

package/dist/islands-registry.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IslandRegistry } from './islands.js';
+
+/** island name → implementation. THE allow-list. */
+declare const ISLANDS: IslandRegistry;
+type IslandName = keyof typeof ISLANDS;
+/**
+ * Mount every island marker in `root` against the WHOLE registry.
+ *
+ * A convenience binding of `mountIslandsWith` for callers that want the full set (the
+ * app, tests). Published sites use the bundler's pruned per-site registry instead.
+ */
+declare function mountIslands(root: ParentNode, createRoot: (el: Element) => {
+    render: (node: React.ReactNode) => void;
+}): number;
+
+export { ISLANDS, type IslandName, mountIslands };

package/dist/islands-registry.js

@@ -0,0 +1,14 @@
+import {
+  ISLANDS,
+  mountIslands
+} from "./chunk-Q4URDZAK.js";
+import "./chunk-TOPPLOH2.js";
+import "./chunk-ZOF22TJA.js";
+import "./chunk-QDO3SJWR.js";
+import "./chunk-THMT43MV.js";
+import "./chunk-G3U6EXJM.js";
+import "./chunk-MLKGABMK.js";
+export {
+  ISLANDS,
+  mountIslands
+};

package/dist/islands.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+/** Attribute carrying the island name on a build-emitted mount point. */
+declare const ISLAND_ATTR = "data-pos-island";
+/** Attribute carrying the island's JSON-serialised props. */
+declare const ISLAND_PROPS_ATTR = "data-pos-island-props";
+/** name → implementation. The per-site registries the bundler emits have this shape. */
+type IslandRegistry = Record<string, React.ComponentType<never>>;
+interface IslandProps {
+    /** Registry key. Must exist in the mounting registry or the marker mounts nothing. */
+    name: string;
+    /** JSON-safe configuration handed to the implementation at mount time. */
+    props?: Record<string, unknown>;
+    /**
+     * Static content rendered INSIDE the mount point at build time. It ships in the
+     * prerendered HTML and is replaced when the island mounts, so it is the right
+     * home for a no-JS fallback ("call the clinic to book") or a skeleton — the page
+     * is SEO-indexed and read by clients that never run the island.
+     */
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Inline style on the mount point, resolved at BUILD time. Its only sanctioned use
+     * is the patient-surface theme vars (`patientSurfaceTheme`): the island's CSS reads
+     * them off its own mount point, so the clinic's brand reaches our components without
+     * the clinic being able to restyle them. Not a general styling hook.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * The build-time half of an island. Renders an empty, inert mount point.
+ *
+ * Clinic pages never use this directly — each island exports its own thin wrapper
+ * (e.g. `BookingBlock`) so the clinic writes a named component with typed props.
+ */
+declare function Island({ name, props, children, className, style, }: IslandProps): React.ReactElement;
+/** Parse a marker's props attribute. A malformed value yields `{}`, never a throw. */
+declare function readIslandProps(el: Element): Record<string, unknown>;
+/**
+ * Mount every island marker in `root` using the given registry. Called by the
+ * bundler-generated client entry; this is the entire client-side lifecycle of a
+ * published clinic site.
+ *
+ * Deliberately TOTAL: an unknown island name or a bad props blob is skipped with a
+ * console warning, never thrown. A published brochure must not white-screen because one
+ * island was renamed or because this build's registry was pruned to the islands its
+ * pages mount — the rest of the page is static HTML that is already correct on screen.
+ *
+ * `createRoot` (not `hydrateRoot`): the marker ships EMPTY of island output, so there is
+ * no server-rendered tree to reconcile against. Any `children` fallback is replaced on
+ * mount, which is the intent.
+ */
+declare function mountIslandsWith(registry: IslandRegistry, root: ParentNode, createRoot: (el: Element) => {
+    render: (node: React.ReactNode) => void;
+}): number;
+
+export { ISLAND_ATTR, ISLAND_PROPS_ATTR, Island, type IslandProps, type IslandRegistry, mountIslandsWith, readIslandProps };

package/dist/islands.js

@@ -0,0 +1,15 @@
+import {
+  ISLAND_ATTR,
+  ISLAND_PROPS_ATTR,
+  Island,
+  mountIslandsWith,
+  readIslandProps
+} from "./chunk-THMT43MV.js";
+import "./chunk-MLKGABMK.js";
+export {
+  ISLAND_ATTR,
+  ISLAND_PROPS_ATTR,
+  Island,
+  mountIslandsWith,
+  readIslandProps
+};