@springbrand/gravel 0.1.3-alpha.1 → 0.1.3-alpha.2

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,8 @@
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  commonjsGlobal,
+  getDefaultExportFromCjs
+};

package/dist/_virtual/timezone.js

@@ -0,0 +1,4 @@
+var timezone = { exports: {} };
+export {
+  timezone as __module
+};

package/dist/_virtual/utc.js

@@ -0,0 +1,4 @@
+var utc = { exports: {} };
+export {
+  utc as __module
+};

package/dist/components/runtime-site/action/index.js

@@ -0,0 +1,57 @@
+"use client";
+import { Children, cloneElement } from "react";
+import { useRuntimeHost } from "../runtime-host-provider/index.js";
+function createRuntimeActionContext(trigger, event) {
+  const element = event.currentTarget;
+  const ownerDocument = element.ownerDocument;
+  return {
+    trigger,
+    event,
+    element,
+    ownerDocument,
+    ownerWindow: ownerDocument.defaultView
+  };
+}
+function Action({
+  children,
+  id,
+  input,
+  trigger = "click"
+}) {
+  const runtimeHost = useRuntimeHost();
+  const child = Children.only(children);
+  const originalHandler = trigger === "click" ? child.props.onClick : trigger === "pointerDown" ? child.props.onPointerDown : child.props.onSubmit;
+  const actionHandler = (event) => {
+    var _a, _b;
+    originalHandler == null ? void 0 : originalHandler(event);
+    if (event.defaultPrevented || !id || !runtimeHost.actions) {
+      return;
+    }
+    const context = createRuntimeActionContext(trigger, event);
+    try {
+      const result = runtimeHost.actions.runAction(id, input, context);
+      void Promise.resolve(result).catch((error) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = runtimeHost.actions) == null ? void 0 : _a2.onError) == null ? void 0 : _b2.call(_a2, error, context);
+      });
+    } catch (error) {
+      (_b = (_a = runtimeHost.actions).onError) == null ? void 0 : _b.call(_a, error, context);
+    }
+  };
+  if (trigger === "pointerDown") {
+    return cloneElement(child, {
+      onPointerDown: actionHandler
+    });
+  }
+  if (trigger === "submit") {
+    return cloneElement(child, {
+      onSubmit: actionHandler
+    });
+  }
+  return cloneElement(child, {
+    onClick: actionHandler
+  });
+}
+export {
+  Action
+};

package/dist/components/runtime-site/floating-booking-bubble/api/booking-public.js

@@ -0,0 +1,147 @@
+import { PublicServiceModel } from "../public-service-model.js";
+import { PublicServiceDetailModel } from "../public-service-detail-model.js";
+import { PublicAvailabilityModel } from "../public-availability-model.js";
+import { PublicAppointmentModel } from "../public-appointment-model.js";
+class BookingApiError extends Error {
+  constructor(kind, code, httpStatus, message, details) {
+    super(message);
+    this.kind = kind;
+    this.code = code;
+    this.httpStatus = httpStatus;
+    this.details = details;
+    this.name = "BookingApiError";
+  }
+}
+function unwrapPublicRpc(wire, httpStatus) {
+  if ((wire == null ? void 0 : wire.success) === true && wire.msg !== void 0) {
+    return wire.msg;
+  }
+  throw new BookingApiError(
+    "biz",
+    (wire == null ? void 0 : wire.code) ?? "BOOKING_UNKNOWN_ERROR",
+    httpStatus,
+    (wire == null ? void 0 : wire.errMsg) ?? "Booking request failed",
+    wire
+  );
+}
+function normalizeBaseUrl(domain) {
+  return (domain ?? "").replace(/\/$/, "");
+}
+async function publicFetch(domain, path, init) {
+  const baseUrl = normalizeBaseUrl(domain);
+  let res;
+  try {
+    res = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers: {
+        "Content-Type": "application/json",
+        ...(init == null ? void 0 : init.headers) ?? {}
+      }
+    });
+  } catch (err) {
+    throw new BookingApiError(
+      "network",
+      "NETWORK_ERROR",
+      null,
+      err instanceof Error ? err.message : "Network error"
+    );
+  }
+  if (!res.ok) {
+    let body = null;
+    try {
+      body = await res.json();
+    } catch {
+    }
+    const code = res.status === 429 ? "RATE_LIMITED" : "INTERNAL_ERROR";
+    throw new BookingApiError(
+      "http",
+      code,
+      res.status,
+      `HTTP ${res.status}`,
+      body
+    );
+  }
+  let wire;
+  try {
+    wire = await res.json();
+  } catch (err) {
+    throw new BookingApiError(
+      "network",
+      "INVALID_JSON",
+      res.status,
+      err instanceof Error ? err.message : "Invalid JSON"
+    );
+  }
+  return unwrapPublicRpc(wire, res.status);
+}
+async function fetchServices(domain, brandSlug) {
+  const wire = await publicFetch(
+    domain,
+    `/api/public/booking/${encodeURIComponent(brandSlug)}/services`
+  );
+  return {
+    services: wire.services.map(PublicServiceModel.fromWire),
+    timezone: wire.timezone
+  };
+}
+async function fetchServiceDetail(domain, brandSlug, serviceId) {
+  const wire = await publicFetch(
+    domain,
+    `/api/public/booking/${encodeURIComponent(brandSlug)}/services/${serviceId}`
+  );
+  return {
+    service: PublicServiceDetailModel.fromWire(wire.service),
+    timezone: wire.timezone
+  };
+}
+async function fetchAvailability(domain, brandSlug, params) {
+  const qs = new URLSearchParams({
+    service_id: String(params.service_id),
+    from: params.from,
+    to: params.to
+  });
+  const wire = await publicFetch(
+    domain,
+    `/api/public/booking/${encodeURIComponent(brandSlug)}/availability?${qs.toString()}`
+  );
+  return PublicAvailabilityModel.fromWire(wire);
+}
+async function submitAppointment(domain, brandSlug, body) {
+  const wireBody = {
+    service_id: body.service_id,
+    scheduled_at: body.scheduled_at,
+    contact: {
+      name: [body.customer.first_name, body.customer.last_name].filter(Boolean).join(" ").trim(),
+      email: body.customer.email,
+      phone: body.customer.phone,
+      metadata: {
+        first_name: body.customer.first_name,
+        last_name: body.customer.last_name,
+        address: body.customer.address
+      }
+    },
+    custom_answers: body.custom_answers.map((a) => ({
+      question_id: a.questionId,
+      label: a.label,
+      answer: a.answer
+    })),
+    source_page: body.source_page
+  };
+  const wire = await publicFetch(
+    domain,
+    `/api/public/booking/${encodeURIComponent(brandSlug)}/appointments`,
+    {
+      method: "POST",
+      body: JSON.stringify(wireBody)
+    }
+  );
+  return PublicAppointmentModel.fromWire(wire.appointment);
+}
+export {
+  BookingApiError,
+  fetchAvailability,
+  fetchServiceDetail,
+  fetchServices,
+  submitAppointment,
+  unwrapPublicRpc
+};

package/dist/components/runtime-site/floating-booking-bubble/booking-form-field.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Input } from "@springbrand/site-block/components/shadcn/input";
+import { Label } from "@springbrand/site-block/components/shadcn/label";
+import { Textarea } from "@springbrand/site-block/components/shadcn/textarea";
+import { RadioGroup, RadioGroupItem } from "@springbrand/site-block/components/shadcn/radio-group";
+import { Checkbox } from "@springbrand/site-block/components/shadcn/checkbox";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@springbrand/site-block/components/shadcn/select";
+import { cn } from "@springbrand/site-block/lib/utils";
+function BookingFormField({
+  question,
+  value,
+  onChange,
+  error
+}) {
+  const fieldId = `q-${question.id}`;
+  const renderControl = () => {
+    switch (question.type) {
+      case "one_line":
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: fieldId,
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            "aria-invalid": !!error || void 0
+          }
+        );
+      case "multi_line":
+        return /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: fieldId,
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            "aria-invalid": !!error || void 0
+          }
+        );
+      case "radio":
+        return /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value: value ?? "",
+            onValueChange: (v) => onChange(v),
+            className: "gap-2",
+            children: (question.options ?? []).map((opt) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { id: `${fieldId}-${opt.id}`, value: opt.id }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${fieldId}-${opt.id}`, className: "font-normal", children: opt.label })
+            ] }, opt.id))
+          }
+        );
+      case "checkboxes": {
+        const arr = Array.isArray(value) ? value : [];
+        return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (question.options ?? []).map((opt) => {
+          const checked = arr.includes(opt.id);
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: `${fieldId}-${opt.id}`,
+                checked,
+                onCheckedChange: (c) => {
+                  const next = c ? [...arr, opt.id] : arr.filter((id) => id !== opt.id);
+                  onChange(next);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${fieldId}-${opt.id}`, className: "font-normal", children: opt.label })
+          ] }, opt.id);
+        }) });
+      }
+      case "dropdown": {
+        const options = question.options ?? [];
+        return /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: value ?? "",
+            items: options.map((opt) => ({ label: opt.label, value: opt.id })),
+            onValueChange: (v) => onChange(v),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: fieldId, "aria-invalid": !!error || void 0, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select…" }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.id, children: opt.label }, opt.id)) })
+            ]
+          }
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", error && "[&>label]:text-destructive"), children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
+      question.label,
+      question.required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-destructive", children: "*" })
+    ] }),
+    renderControl(),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error })
+  ] });
+}
+export {
+  BookingFormField
+};

package/dist/components/runtime-site/floating-booking-bubble/bubble-container.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Sheet, SheetContent } from "@springbrand/site-block/components/shadcn/sheet";
+import { Button } from "@springbrand/site-block/components/shadcn/button";
+import { cn } from "@springbrand/site-block/lib/utils";
+function BubbleContainer({
+  open,
+  onOpenChange,
+  title,
+  children,
+  onBack,
+  stepIndicator,
+  className,
+  container
+}) {
+  const [isDesktop, setIsDesktop] = useState(false);
+  const headerTitle = title ?? (onBack ? null : "Book");
+  useEffect(() => {
+    const targetWindow = resolveContainerWindow(container);
+    if (!targetWindow) return;
+    const mq = targetWindow.matchMedia("(min-width: 768px)");
+    const update = () => setIsDesktop(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [container]);
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: isDesktop ? "right" : "bottom",
+      showCloseButton: false,
+      container,
+      className: cn(
+        "z-[1001] p-0 flex flex-col gap-0 overflow-hidden",
+        isDesktop ? (
+          // 桌面 popover 与气泡按钮的相对位置：
+          //   - bottom-28 (112px) 让对话框底端高于按钮顶部 (72px) 约 40px，留出明显呼吸感
+          //   - right-8 (32px)   把对话框右边再让出一点，避免和屏幕右沿/按钮贴在一起
+          // SheetContent 基类带 data-[side=right]:{inset-y-0,h-full,w-3/4}，
+          // 必须用 ! important 覆盖 top / bottom / 高宽，否则会被钉在 top:0 全高。
+          "w-[400px]! sm:max-w-[420px] right-8 top-auto! bottom-28! h-[600px]! max-h-[calc(100vh-9rem)] rounded-2xl border shadow-2xl"
+        ) : "h-[min(85svh,calc(100dvh-env(safe-area-inset-top)-0.75rem))] w-full rounded-t-2xl border-t",
+        className
+      ),
+      overlayClassName: "z-[1000]",
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between border-b px-4 h-12 shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            onBack && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "-ml-2 h-8 px-2",
+                onClick: onBack,
+                children: "Back"
+              }
+            ),
+            headerTitle && /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm truncate", children: headerTitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+            stepIndicator && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: stepIndicator }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close",
+                onClick: () => onOpenChange(false),
+                className: "rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain [-webkit-overflow-scrolling:touch]", children })
+      ]
+    }
+  ) });
+}
+function resolveContainerWindow(container) {
+  const element = container && "current" in container ? container.current : container;
+  return (element == null ? void 0 : element.ownerDocument.defaultView) ?? null;
+}
+export {
+  BubbleContainer
+};

package/dist/components/runtime-site/floating-booking-bubble/bubble-trigger.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Calendar } from "lucide-react";
+import { Button } from "@springbrand/site-block/components/shadcn/button";
+import { cn } from "@springbrand/site-block/lib/utils";
+function BubbleTrigger({
+  label = "Book now",
+  onClick,
+  editorMode,
+  className,
+  style,
+  ...domProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...domProps,
+      className: cn(
+        "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)] z-50 print:hidden sm:bottom-6 sm:right-6",
+        editorMode && "group cursor-pointer  outline-primary/40 rounded-full"
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          size: "lg",
+          className: cn("rounded-full shadow-lg gap-2 px-5 h-12", className),
+          style,
+          children: [
+            /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: label })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  BubbleTrigger
+};

package/dist/components/runtime-site/floating-booking-bubble/dayjs-tz.js

@@ -0,0 +1,9 @@
+import dayjs from "dayjs";
+import { default as default2 } from "dayjs";
+import utc from "../../../node_modules/.pnpm/dayjs@1.11.20/node_modules/dayjs/plugin/utc.js";
+import timezone from "../../../node_modules/.pnpm/dayjs@1.11.20/node_modules/dayjs/plugin/timezone.js";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export {
+  default2 as default
+};

package/dist/components/runtime-site/floating-booking-bubble/index.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { useRuntimeHost } from "../runtime-host-provider/index.js";
+import { BubbleContainer } from "./bubble-container.js";
+import { BubbleTrigger } from "./bubble-trigger.js";
+import { Step1ServicePicker } from "./step-1-service-picker.js";
+import { Step2TimePicker } from "./step-2-time-picker.js";
+import { Step3DetailsForm } from "./step-3-details-form.js";
+import { Step4Confirm } from "./step-4-confirm.js";
+import { useBookingFlow } from "./use-booking-flow.js";
+function FloatingBookingBubble({
+  text = "Book now",
+  styles: _styles,
+  onClick,
+  ...triggerProps
+} = {}) {
+  var _a, _b;
+  const { isEdit, bookingBubbleVisible } = useRuntimeHost();
+  const flow = useBookingFlow();
+  const [open, setOpen] = useState(false);
+  const portalAnchorRef = useRef(null);
+  if (bookingBubbleVisible !== true) {
+    return null;
+  }
+  const phase = flow.phase;
+  if (isEdit) {
+    return /* @__PURE__ */ jsx(
+      BubbleTrigger,
+      {
+        ...triggerProps,
+        label: text,
+        editorMode: true,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    );
+  }
+  const stepIndex = (() => {
+    switch (phase) {
+      case "step1":
+        return 1;
+      case "step2":
+        return 2;
+      case "step3":
+        return 3;
+      case "step4":
+      case "success":
+        return 4;
+      default:
+        return null;
+    }
+  })();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BubbleTrigger,
+      {
+        ...triggerProps,
+        label: text,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          flow.open();
+          setOpen(true);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ref: portalAnchorRef }),
+    /* @__PURE__ */ jsxs(
+      BubbleContainer,
+      {
+        open: open && phase !== "idle",
+        onOpenChange: (next) => {
+          setOpen(next);
+          if (!next) flow.close();
+        },
+        title: phase === "success" ? "Booking Confirmed" : void 0,
+        onBack: phase === "step2" || phase === "step3" || phase === "step4" ? flow.back : void 0,
+        stepIndicator: stepIndex ? `${stepIndex} / 4` : void 0,
+        container: portalAnchorRef,
+        children: [
+          phase === "step1" && /* @__PURE__ */ jsx(
+            Step1ServicePicker,
+            {
+              services: flow.services,
+              loading: flow.servicesLoading,
+              error: flow.servicesError,
+              onPick: flow.pickService,
+              onRetry: () => flow.open()
+            }
+          ),
+          phase === "step2" && flow.selectedService && /* @__PURE__ */ jsx(
+            Step2TimePicker,
+            {
+              visibleMonth: flow.visibleMonth,
+              availability: flow.availability,
+              timezone: ((_a = flow.availability) == null ? void 0 : _a.timezone) ?? "",
+              loading: flow.availabilityLoading,
+              error: flow.availabilityError,
+              onChangeMonth: flow.changeMonth,
+              onPickSlot: flow.pickSlot,
+              onRetry: () => flow.changeMonth(flow.visibleMonth)
+            }
+          ),
+          phase === "step3" && flow.selectedService && /* @__PURE__ */ jsx(
+            Step3DetailsForm,
+            {
+              service: flow.selectedService,
+              form: flow.form,
+              onChange: flow.setForm,
+              onNext: () => flow.submit()
+            }
+          ),
+          (phase === "step4" || phase === "success") && flow.selectedService && flow.selectedSlot && /* @__PURE__ */ jsx(
+            Step4Confirm,
+            {
+              service: flow.selectedService,
+              slot: flow.selectedSlot,
+              timezone: ((_b = flow.availability) == null ? void 0 : _b.timezone) ?? "",
+              form: flow.form,
+              submitting: flow.submitting,
+              submitError: flow.submitError,
+              confirmation: flow.confirmation,
+              onSubmit: flow.submit,
+              onClose: () => {
+                setOpen(false);
+                flow.close();
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const FloatingBookingBubbleDefaults = {
+  text: "Book now",
+  styles: {}
+};
+export {
+  FloatingBookingBubble,
+  FloatingBookingBubbleDefaults,
+  FloatingBookingBubble as default
+};