@spacesync/client 0.1.11 → 0.1.12

package/README.md

@@ -2,6 +2,108 @@
 
 Reusable React UI, application shell, theme, and API-client primitives for SpaceSync apps (operator, member).
 
+## Develop
+
+This is a standalone package (not a workspace). From this directory:
+
+```bash
+pnpm install
+pnpm typecheck
+pnpm build
+```
+
+## Local testing (member / operator)
+
+Consumer apps install the **published** package from npm. They do **not** read this repo’s `src/` directly — only the built `dist/` folder.
+
+When the three repos sit side-by-side (see layout below), **member** and **operator** automatically alias `@spacesync/client` to `../spacesync-client/dist` and Tailwind scans that folder too. You do **not** need to copy into `node_modules` for local work — just build here.
+
+### One-time setup
+
+Keep these repos as siblings on disk:
+
+```text
+Documents/
+  spacesync-client/
+  spacesync-member/
+  spacesync-operator/
+```
+
+Install dependencies in each app once:
+
+```bash
+cd ../spacesync-member && npm install
+cd ../spacesync-operator && npm install
+```
+
+### Daily workflow (recommended)
+
+**Terminal 1 — client (watch + rebuild on save):**
+
+```bash
+cd spacesync-client
+pnpm dev
+```
+
+**Terminal 2 — the app you’re testing:**
+
+```bash
+cd ../spacesync-member && npm run dev   # port 5174
+# or
+cd ../spacesync-operator && npm run dev   # port 5173
+```
+
+After the first `pnpm dev` in the client, save a file in `spacesync-client/src/` and the app dev server should full-reload within a second or two.
+
+### One-off build (no watch)
+
+```bash
+pnpm build          # dist/ only
+pnpm sync:apps      # dist/ + copy into both apps' node_modules (CI / no sibling alias)
+pnpm sync:member
+pnpm sync:operator
+```
+
+### If you still see the old UI
+
+Do these in order:
+
+**1. Restart the app dev server** (required after changing `vite.config.ts` or `tailwind.css`):
+
+```bash
+# Ctrl+C in the member/operator terminal, then:
+npm run dev
+```
+
+**2. Clear Vite’s cache** (common after Tailwind class changes):
+
+```bash
+rm -rf node_modules/.vite && npm run dev
+```
+
+Run that inside `spacesync-member` or `spacesync-operator`.
+
+**3. Hard refresh the browser:** `Cmd+Shift+R`
+
+**4. Confirm the client actually built:**
+
+```bash
+cd ../spacesync-client
+pnpm build
+rg "ring-gray-200" dist/ui.js    # should print nothing (old styling)
+rg "getComputedStyle" dist/ui.js # should match (new pill code)
+```
+
+### Why sync alone often wasn’t enough
+
+| Layer | What was going wrong |
+|-------|----------------------|
+| JS | Copied `dist/` into `node_modules`, but Vite could still serve cached modules |
+| CSS | Tailwind only rescans class names when its `@source` files change; stale `node_modules/.vite` kept old CSS |
+| Fix | Apps now read `../spacesync-client/dist` directly via Vite alias + Tailwind `@source` |
+
+`pnpm sync:apps` is still useful when repos are **not** siblings or before publishing to npm.
+
 ## Publish (this repo)
 
 Bump the version in `package.json`, then:
@@ -15,9 +117,9 @@ pnpm publish --access public
 Version bump shortcuts:
 
 ```bash
-npm version patch   # 0.1.6 → 0.1.7
-npm version minor   # 0.1.6 → 0.2.0
-npm version major   # 0.1.6 → 1.0.0
+npm version patch   # 0.1.12 → 0.1.13
+npm version minor   # 0.1.12 → 0.2.0
+npm version major   # 0.1.12 → 1.0.0
 ```
 
 Git pushes do not publish. Only `pnpm publish` (or `npm publish --access public`) does.
@@ -38,13 +140,3 @@ import { AppWebShell } from "@spacesync/client/app-web-shell";
 ```css
 @import "@spacesync/client/styles/theme.css";
 ```
-
-## Develop
-
-This is a standalone package (not a workspace). From this directory:
-
-```bash
-pnpm install
-pnpm typecheck
-pnpm build
-```

package/dist/analog-clock-picker.js

@@ -1,4 +1,4 @@
-import { parseHm, toTimeStr, formatTimeForDisplay } from './chunk-OV5ODANJ.js';
+import { parseHm, toTimeStr, formatTimeForDisplay } from './chunk-EQLKSX4E.js';
 import './chunk-CXXOKCLJ.js';
 import './chunk-VIJ2HWPZ.js';
 import { cn } from './chunk-DMPSQ22Q.js';

package/dist/booking-schedule-calendars.js

@@ -1,6 +1,6 @@
-import { currentWeekStart, PRICING_TODAY, weekCountBetween, weekRangeLabel, currentMonthYm, monthCount, monthLabel, addMonthsYm, todayLocalYmd, addDays, diffDays, MIN_WEEK_START, localDateYmd } from './chunk-OTSA5ROL.js';
+import { currentWeekStart, PRICING_TODAY, weekCountBetween, weekRangeLabel, currentMonthYm, monthCount, monthLabel, addMonthsYm, todayLocalYmd, addDays, diffDays, MIN_WEEK_START, localDateYmd } from './chunk-5CUJZNUC.js';
 import { CheckboxField } from './chunk-2IZODKTR.js';
-import { hourlyEndTimes, addMinutesToHm, formatTimeForDisplay, snapScheduleEndTime, TimeField } from './chunk-OV5ODANJ.js';
+import { hourlyEndTimes, addMinutesToHm, formatTimeForDisplay, snapScheduleEndTime, TimeField, currentTimeHm } from './chunk-EQLKSX4E.js';
 import './chunk-CXXOKCLJ.js';
 import './chunk-VIJ2HWPZ.js';
 import './chunk-IBGGQXTH.js';
@@ -65,29 +65,75 @@ function ScheduleInfoBanner({ children }) {
     /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-blue-700 dark:text-blue-400", children })
   ] });
 }
+function clampNaturalNumber(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, Math.floor(value)));
+}
 function ScheduleStepper({
   value,
   min = 1,
   max = 100,
   onChange
 }) {
+  const [draft, setDraft] = useState(String(value));
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!focused) {
+      setDraft(String(value));
+    }
+  }, [value, focused]);
+  const commitDraft = (raw) => {
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+      onChange(min);
+      setDraft(String(min));
+      return;
+    }
+    const parsed = Number.parseInt(trimmed, 10);
+    const next = clampNaturalNumber(parsed, min, max);
+    onChange(next);
+    setDraft(String(next));
+  };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-32 items-center overflow-hidden rounded-xl border border-border bg-card", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => onChange(Math.max(min, value - 1)),
+        onClick: () => onChange(clampNaturalNumber(value - 1, min, max)),
         className: "flex h-9 w-9 shrink-0 items-center justify-center border-r border-border text-sm text-muted-foreground hover:bg-accent",
+        "aria-label": "Decrease",
         children: "\u2212"
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "flex-1 text-center text-sm font-medium text-foreground", children: value }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        "aria-label": "Quantity",
+        value: draft,
+        onChange: (event) => setDraft(event.target.value.replace(/\D/g, "")),
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+          setFocused(false);
+          commitDraft(draft);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.currentTarget.blur();
+          }
+        },
+        className: "min-w-0 flex-1 border-0 bg-transparent px-1 text-center text-sm font-medium text-foreground outline-none focus:ring-0"
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => onChange(Math.min(max, value + 1)),
+        onClick: () => onChange(clampNaturalNumber(value + 1, min, max)),
         className: "flex h-9 w-9 shrink-0 items-center justify-center border-l border-border text-sm text-muted-foreground hover:bg-accent",
+        "aria-label": "Increase",
         children: "+"
       }
     )
@@ -1129,6 +1175,14 @@ function HourlySchedulePicker({
     ] })
   ] });
 }
+function defaultNeededTime(scheduleDate, preparationMinutes, todayYmd, now = /* @__PURE__ */ new Date()) {
+  let time = currentTimeHm(now);
+  if (preparationMinutes > 0 && scheduleDate === todayYmd) {
+    const floor = minNeededTimeHm(preparationMinutes, now);
+    if (time < floor) time = floor;
+  }
+  return time;
+}
 function ServiceNeededAtPicker({
   scheduleDate,
   scheduleTime,
@@ -1139,9 +1193,10 @@ function ServiceNeededAtPicker({
   minDate = todayLocalYmd(),
   preparationMinutes = 0
 }) {
-  const neededTime = scheduleTime || "09:00";
   const todayYmd = todayLocalYmd();
-  const minTimeToday = preparationMinutes > 0 && scheduleDate === todayYmd ? minNeededTimeHm(preparationMinutes) : void 0;
+  const effectiveDate = scheduleDate || todayYmd;
+  const neededTime = scheduleTime || defaultNeededTime(effectiveDate, preparationMinutes, todayYmd);
+  const minTimeToday = preparationMinutes > 0 && effectiveDate === todayYmd ? minNeededTimeHm(preparationMinutes) : void 0;
   const syncNeeded = (date, time) => {
     let nextTime = time;
     if (preparationMinutes > 0 && date === todayYmd) {
@@ -1158,9 +1213,23 @@ function ServiceNeededAtPicker({
   };
   const handleDateChange = (v) => syncNeeded(v, neededTime);
   const handleTimeChange = (v) => {
-    if (!scheduleDate) return;
-    syncNeeded(scheduleDate, v);
+    if (!effectiveDate) return;
+    syncNeeded(effectiveDate, v);
   };
+  useEffect(() => {
+    const defaultTime = defaultNeededTime(effectiveDate, preparationMinutes, todayYmd);
+    const floor = preparationMinutes > 0 && effectiveDate === todayYmd ? minNeededTimeHm(preparationMinutes) : void 0;
+    let nextTime = scheduleTime || defaultTime;
+    if (floor && nextTime < floor) nextTime = floor;
+    if (scheduleTime === nextTime && scheduleDate === effectiveDate) return;
+    onChange({
+      scheduleDate: effectiveDate,
+      scheduleTime: nextTime,
+      scheduleEndTime: nextTime,
+      startDate: effectiveDate,
+      endDate: effectiveDate
+    });
+  }, [effectiveDate, scheduleTime, preparationMinutes, todayYmd, onChange]);
   const summary = scheduleDate && neededTime ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
     /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Needed at" }),
     /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [