glitchgrab 1.51.0 → 1.53.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +50 -0
  2. package/dist/index.js +1123 -517
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +1123 -517
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/server.d.mts +61 -2
  7. package/dist/server.d.ts +61 -2
  8. package/dist/server.js +73 -4
  9. package/dist/server.js.map +1 -1
  10. package/dist/server.mjs +70 -3
  11. package/dist/server.mjs.map +1 -1
  12. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -842,9 +842,9 @@ function topStackFrame(stack) {
842
842
  if (!stack) return "";
843
843
  const lines = stack.split("\n");
844
844
  for (const line of lines) {
845
- const t2 = line.trim();
846
- if (t2.startsWith("at ") || t2.includes("@")) {
847
- return t2;
845
+ const t = line.trim();
846
+ if (t.startsWith("at ") || t.includes("@")) {
847
+ return t;
848
848
  }
849
849
  }
850
850
  return "";
@@ -1644,8 +1644,8 @@ function renderBlocks(lines, theme, key) {
1644
1644
  const body = [];
1645
1645
  i++;
1646
1646
  while (i < lines.length) {
1647
- const t2 = lines[i].trim();
1648
- if (t2.length >= fence.length && [...t2].every((c) => c === fence[0])) break;
1647
+ const t = lines[i].trim();
1648
+ if (t.length >= fence.length && [...t].every((c) => c === fence[0])) break;
1649
1649
  body.push(lines[i]);
1650
1650
  i++;
1651
1651
  }
@@ -1888,8 +1888,8 @@ var STARTERS = [
1888
1888
  ];
1889
1889
  var CONFIRM_OPTION = "Yes, that's it";
1890
1890
  function isCheckBackQuestion(text) {
1891
- const t2 = text.trim();
1892
- return /^so,? you['’]?re saying\b/i.test(t2) || /\b(is that right|is that correct|did i get (that|it) right|have i got (that|it) right)\s*\??\s*$/i.test(t2);
1891
+ const t = text.trim();
1892
+ return /^so,? you['’]?re saying\b/i.test(t) || /\b(is that right|is that correct|did i get (that|it) right|have i got (that|it) right)\s*\??\s*$/i.test(t);
1893
1893
  }
1894
1894
  function isAffirmativeReply(text) {
1895
1895
  return /^(y|ya|yah|yes|yess|yeah|yep|yup|ok|okay|sure|correct|right|exactly|confirm(ed)?|that['’]?s (it|right|correct)|yes,? that['’]?s (it|right)|haan|han|ha|ho|hmm yes|👍)[\s.!👍]*$/i.test(
@@ -1925,8 +1925,8 @@ function Sparkle({ color, size = 14 }) {
1925
1925
  }
1926
1926
  function Avatar({
1927
1927
  who,
1928
- theme: t2,
1929
- initials
1928
+ theme: t,
1929
+ initials: initials2
1930
1930
  }) {
1931
1931
  const isAi = who === "assistant";
1932
1932
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1942,13 +1942,13 @@ function Avatar({
1942
1942
  alignItems: "center",
1943
1943
  justifyContent: "center",
1944
1944
  marginTop: "2px",
1945
- backgroundColor: isAi ? `${t2.accent}22` : t2.bgSecondary,
1946
- border: `1px solid ${isAi ? t2.accent : t2.inputBorder}`,
1947
- color: isAi ? t2.accent : t2.textMuted,
1945
+ backgroundColor: isAi ? `${t.accent}22` : t.bgSecondary,
1946
+ border: `1px solid ${isAi ? t.accent : t.inputBorder}`,
1947
+ color: isAi ? t.accent : t.textMuted,
1948
1948
  fontSize: "10px",
1949
1949
  fontWeight: 700
1950
1950
  },
1951
- children: isAi ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Sparkle, { color: t2.accent, size: 12 }) : initials ? initials : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
1951
+ children: isAi ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Sparkle, { color: t.accent, size: 12 }) : initials2 ? initials2 : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
1952
1952
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "8", r: "3.4", stroke: "currentColor", strokeWidth: "1.8" }),
1953
1953
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1954
1954
  "path",
@@ -1965,7 +1965,7 @@ function Avatar({
1965
1965
  }
1966
1966
  function AssistSheet({
1967
1967
  assist,
1968
- theme: t2,
1968
+ theme: t,
1969
1969
  screenshots,
1970
1970
  pageShot = null,
1971
1971
  onAddFiles,
@@ -2247,20 +2247,20 @@ function AssistSheet({
2247
2247
  minWidth: 0
2248
2248
  },
2249
2249
  children: [
2250
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t2.text, fontWeight: 600 }, children: duplicate.kind === "related" ? title ? "Your request goes onto this issue" : `Connected to #${duplicate.number}` : title ? "Our team is already on this" : `Our team is already on #${duplicate.number}` }),
2251
- title && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: t2.textMuted, wordBreak: "break-word" }, children: [
2250
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text, fontWeight: 600 }, children: duplicate.kind === "related" ? title ? "Your request goes onto this issue" : `Connected to #${duplicate.number}` : title ? "Our team is already on this" : `Our team is already on #${duplicate.number}` }),
2251
+ title && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: t.textMuted, wordBreak: "break-word" }, children: [
2252
2252
  "#",
2253
2253
  duplicate.number,
2254
2254
  " ",
2255
2255
  duplicate.title
2256
2256
  ] }),
2257
- duplicate.status && duplicate.kind !== "related" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t2.text, fontWeight: 600 }, children: duplicate.status }),
2258
- footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t2.textMuted }, children: duplicate.kind === "related" ? "Added as a separate request on it, not a repeat \u2014 the team sees both." : footer })
2257
+ duplicate.status && duplicate.kind !== "related" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text, fontWeight: 600 }, children: duplicate.status }),
2258
+ footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textMuted }, children: duplicate.kind === "related" ? "Added as a separate request on it, not a repeat \u2014 the team sees both." : footer })
2259
2259
  ]
2260
2260
  }
2261
2261
  );
2262
2262
  }
2263
- const initials = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
2263
+ const initials2 = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
2264
2264
  var _a, _b;
2265
2265
  return (_b = (_a = w[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
2266
2266
  }).join("");
@@ -2274,7 +2274,7 @@ function AssistSheet({
2274
2274
  width: "440px",
2275
2275
  maxWidth: "100%",
2276
2276
  height: "100dvh",
2277
- borderLeft: `1px solid ${t2.border}`,
2277
+ borderLeft: `1px solid ${t.border}`,
2278
2278
  animation: "gg-sheet-in .22s cubic-bezier(.2,.8,.2,1)"
2279
2279
  };
2280
2280
  return (0, import_react_dom2.createPortal)(
@@ -2321,8 +2321,8 @@ function AssistSheet({
2321
2321
  minWidth: 0,
2322
2322
  maxWidth: "100%",
2323
2323
  boxSizing: "border-box",
2324
- backgroundColor: t2.bg,
2325
- color: t2.text,
2324
+ backgroundColor: t.bg,
2325
+ color: t.text,
2326
2326
  boxShadow: "0 20px 60px rgba(0,0,0,.35)",
2327
2327
  overflow: "hidden",
2328
2328
  isolation: "isolate"
@@ -2335,7 +2335,7 @@ function AssistSheet({
2335
2335
  style: {
2336
2336
  flexShrink: 0,
2337
2337
  padding: "14px 16px",
2338
- borderBottom: `1px solid ${t2.border}`,
2338
+ borderBottom: `1px solid ${t.border}`,
2339
2339
  display: "flex",
2340
2340
  alignItems: "flex-start",
2341
2341
  justifyContent: "space-between",
@@ -2355,7 +2355,7 @@ function AssistSheet({
2355
2355
  fontWeight: 600
2356
2356
  },
2357
2357
  children: [
2358
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Sparkle, { color: t2.accent }),
2358
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Sparkle, { color: t.accent }),
2359
2359
  "Describe it with AI",
2360
2360
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2361
2361
  "span",
@@ -2365,8 +2365,8 @@ function AssistSheet({
2365
2365
  fontWeight: 600,
2366
2366
  letterSpacing: ".04em",
2367
2367
  textTransform: "uppercase",
2368
- color: t2.accent,
2369
- border: `1px solid ${t2.accent}55`,
2368
+ color: t.accent,
2369
+ border: `1px solid ${t.accent}55`,
2370
2370
  borderRadius: "4px",
2371
2371
  padding: "1px 5px"
2372
2372
  },
@@ -2376,7 +2376,7 @@ function AssistSheet({
2376
2376
  ]
2377
2377
  }
2378
2378
  ),
2379
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11.5px", color: t2.textMuted, marginTop: "3px" }, children: [
2379
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11.5px", color: t.textMuted, marginTop: "3px" }, children: [
2380
2380
  phase === "type" ? null : reportTypeLabel,
2381
2381
  phase !== "type" && severityAsked && severity ? ` \xB7 ${SEVERITY_LABELS[severity]}` : null,
2382
2382
  projectSlot ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { marginLeft: "6px" }, children: projectSlot }) : null
@@ -2391,10 +2391,10 @@ function AssistSheet({
2391
2391
  "aria-label": "Write it myself instead",
2392
2392
  style: {
2393
2393
  flexShrink: 0,
2394
- border: `1px solid ${t2.inputBorder}`,
2394
+ border: `1px solid ${t.inputBorder}`,
2395
2395
  borderRadius: "999px",
2396
2396
  background: "transparent",
2397
- color: t2.textMuted,
2397
+ color: t.textMuted,
2398
2398
  cursor: "pointer",
2399
2399
  fontSize: "11.5px",
2400
2400
  lineHeight: 1,
@@ -2434,14 +2434,14 @@ function AssistSheet({
2434
2434
  children: [
2435
2435
  phase === "type" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
2436
2436
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
2437
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
2437
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
2438
2438
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2439
2439
  "div",
2440
2440
  {
2441
2441
  style: {
2442
2442
  padding: "9px 12px",
2443
2443
  borderRadius: "12px 12px 12px 4px",
2444
- backgroundColor: t2.bgSecondary,
2444
+ backgroundColor: t.bgSecondary,
2445
2445
  fontSize: "13px",
2446
2446
  lineHeight: 1.55,
2447
2447
  maxWidth: "88%"
@@ -2478,9 +2478,9 @@ function AssistSheet({
2478
2478
  // The rating is the only tile that isn't a report, so
2479
2479
  // it wears the star colour the dialog's hero row uses
2480
2480
  // rather than hiding among the report types.
2481
- border: `1px solid ${rate ? "rgba(245,158,11,0.5)" : t2.inputBorder}`,
2481
+ border: `1px solid ${rate ? "rgba(245,158,11,0.5)" : t.inputBorder}`,
2482
2482
  background: rate ? "rgba(245,158,11,0.08)" : "transparent",
2483
- color: rate ? "#f59e0b" : t2.textMuted,
2483
+ color: rate ? "#f59e0b" : t.textMuted,
2484
2484
  borderRadius: "999px",
2485
2485
  // 8px vertical keeps the tap target at ~32px.
2486
2486
  padding: "8px 12px",
@@ -2499,14 +2499,14 @@ function AssistSheet({
2499
2499
  ] }),
2500
2500
  phase === "severity" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
2501
2501
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
2502
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
2502
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
2503
2503
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2504
2504
  "div",
2505
2505
  {
2506
2506
  style: {
2507
2507
  padding: "9px 12px",
2508
2508
  borderRadius: "12px 12px 12px 4px",
2509
- backgroundColor: t2.bgSecondary,
2509
+ backgroundColor: t.bgSecondary,
2510
2510
  fontSize: "13px",
2511
2511
  lineHeight: 1.55,
2512
2512
  maxWidth: "88%"
@@ -2536,9 +2536,9 @@ function AssistSheet({
2536
2536
  "data-gg-severity": s,
2537
2537
  onClick: () => answerSeverity(s),
2538
2538
  style: {
2539
- border: `1px solid ${t2.inputBorder}`,
2539
+ border: `1px solid ${t.inputBorder}`,
2540
2540
  background: "transparent",
2541
- color: t2.textMuted,
2541
+ color: t.textMuted,
2542
2542
  borderRadius: "999px",
2543
2543
  // Same as the picker and option chips — one chip size.
2544
2544
  padding: "8px 12px",
@@ -2555,14 +2555,14 @@ function AssistSheet({
2555
2555
  ] }),
2556
2556
  phase === "rating" && !submitted && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
2557
2557
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
2558
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
2558
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
2559
2559
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2560
2560
  "div",
2561
2561
  {
2562
2562
  style: {
2563
2563
  padding: "9px 12px",
2564
2564
  borderRadius: "12px 12px 12px 4px",
2565
- backgroundColor: t2.bgSecondary,
2565
+ backgroundColor: t.bgSecondary,
2566
2566
  fontSize: "13px",
2567
2567
  lineHeight: 1.55,
2568
2568
  maxWidth: "88%"
@@ -2608,7 +2608,7 @@ function AssistSheet({
2608
2608
  {
2609
2609
  d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
2610
2610
  fill: filled ? "#f59e0b" : "transparent",
2611
- stroke: filled ? "#f59e0b" : t2.inputBorder,
2611
+ stroke: filled ? "#f59e0b" : t.inputBorder,
2612
2612
  strokeWidth: "1.5",
2613
2613
  strokeLinejoin: "round"
2614
2614
  }
@@ -2628,9 +2628,9 @@ function AssistSheet({
2628
2628
  width: "100%",
2629
2629
  padding: "10px",
2630
2630
  borderRadius: "8px",
2631
- border: `1px solid ${t2.inputBorder}`,
2632
- backgroundColor: t2.inputBg,
2633
- color: t2.text,
2631
+ border: `1px solid ${t.inputBorder}`,
2632
+ backgroundColor: t.inputBg,
2633
+ color: t.text,
2634
2634
  fontSize: "13px",
2635
2635
  lineHeight: 1.5,
2636
2636
  fontFamily: "inherit",
@@ -2649,7 +2649,7 @@ function AssistSheet({
2649
2649
  alignSelf: "flex-start",
2650
2650
  border: "none",
2651
2651
  background: "transparent",
2652
- color: t2.textMuted,
2652
+ color: t.textMuted,
2653
2653
  fontSize: "12px",
2654
2654
  fontFamily: "inherit",
2655
2655
  // A bare text link is ~14px tall — half a thumb.
@@ -2666,14 +2666,14 @@ function AssistSheet({
2666
2666
  ] }),
2667
2667
  empty && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
2668
2668
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
2669
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
2669
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
2670
2670
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2671
2671
  "div",
2672
2672
  {
2673
2673
  style: {
2674
2674
  padding: "9px 12px",
2675
2675
  borderRadius: "12px 12px 12px 4px",
2676
- backgroundColor: t2.bgSecondary,
2676
+ backgroundColor: t.bgSecondary,
2677
2677
  fontSize: "13px",
2678
2678
  lineHeight: 1.55,
2679
2679
  maxWidth: "88%"
@@ -2704,9 +2704,9 @@ function AssistSheet({
2704
2704
  send(s);
2705
2705
  },
2706
2706
  style: {
2707
- border: `1px solid ${t2.inputBorder}`,
2707
+ border: `1px solid ${t.inputBorder}`,
2708
2708
  background: "transparent",
2709
- color: t2.textMuted,
2709
+ color: t.textMuted,
2710
2710
  borderRadius: "999px",
2711
2711
  padding: "6px 11px",
2712
2712
  fontSize: "12px",
@@ -2725,7 +2725,7 @@ function AssistSheet({
2725
2725
  if (m.kind === "report") {
2726
2726
  const live = phase === "draft" && i === messages.length - 1;
2727
2727
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px", minWidth: 0 }, children: [
2728
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
2728
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
2729
2729
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2730
2730
  "div",
2731
2731
  {
@@ -2737,9 +2737,9 @@ function AssistSheet({
2737
2737
  borderRadius: "12px 12px 12px 4px",
2738
2738
  fontSize: "13px",
2739
2739
  lineHeight: 1.55,
2740
- backgroundColor: t2.bgSecondary,
2741
- color: t2.text,
2742
- border: live ? "none" : `1px solid ${t2.accent}66`
2740
+ backgroundColor: t.bgSecondary,
2741
+ color: t.text,
2742
+ border: live ? "none" : `1px solid ${t.accent}66`
2743
2743
  },
2744
2744
  children: live ? (
2745
2745
  // #402: "have a read" beside a countdown reads as a
@@ -2755,7 +2755,7 @@ function AssistSheet({
2755
2755
  fontWeight: 700,
2756
2756
  letterSpacing: ".06em",
2757
2757
  textTransform: "uppercase",
2758
- color: t2.accent,
2758
+ color: t.accent,
2759
2759
  marginBottom: "4px"
2760
2760
  },
2761
2761
  children: "Draft so far"
@@ -2770,7 +2770,7 @@ function AssistSheet({
2770
2770
  wordBreak: "break-word",
2771
2771
  maxHeight: "160px",
2772
2772
  overflowY: "auto",
2773
- color: t2.textMuted
2773
+ color: t.textMuted
2774
2774
  },
2775
2775
  children: m.content
2776
2776
  }
@@ -2790,7 +2790,7 @@ function AssistSheet({
2790
2790
  flexDirection: mine ? "row-reverse" : "row"
2791
2791
  },
2792
2792
  children: [
2793
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: m.role, theme: t2, initials }),
2793
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: m.role, theme: t, initials: initials2 }),
2794
2794
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2795
2795
  "div",
2796
2796
  {
@@ -2804,10 +2804,10 @@ function AssistSheet({
2804
2804
  // Markdown owns the assistant's line breaks and lists.
2805
2805
  whiteSpace: mine ? "pre-wrap" : "normal",
2806
2806
  wordBreak: "break-word",
2807
- backgroundColor: mine ? t2.accent : t2.bgSecondary,
2808
- color: mine ? t2.accentText : t2.text
2807
+ backgroundColor: mine ? t.accent : t.bgSecondary,
2808
+ color: mine ? t.accentText : t.text
2809
2809
  },
2810
- children: mine ? m.content : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatMarkdown, { text: m.content, theme: t2 })
2810
+ children: mine ? m.content : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatMarkdown, { text: m.content, theme: t })
2811
2811
  }
2812
2812
  )
2813
2813
  ]
@@ -2826,14 +2826,14 @@ function AssistSheet({
2826
2826
  gap: "8px",
2827
2827
  padding: "10px",
2828
2828
  borderRadius: "8px",
2829
- border: `1px solid ${t2.accent}55`,
2830
- backgroundColor: `${t2.accent}14`,
2829
+ border: `1px solid ${t.accent}55`,
2830
+ backgroundColor: `${t.accent}14`,
2831
2831
  fontSize: "12px",
2832
2832
  lineHeight: 1.5
2833
2833
  },
2834
2834
  children: [
2835
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t2.text, fontWeight: 600 }, children: "This is about Glitchgrab, not this app" }),
2836
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t2.textMuted }, children: "It goes to the team that builds this reporter, with your chat attached." }),
2835
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text, fontWeight: 600 }, children: "This is about Glitchgrab, not this app" }),
2836
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textMuted }, children: "It goes to the team that builds this reporter, with your chat attached." }),
2837
2837
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: [
2838
2838
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2839
2839
  "button",
@@ -2851,8 +2851,8 @@ function AssistSheet({
2851
2851
  padding: "8px 12px",
2852
2852
  borderRadius: "999px",
2853
2853
  border: "none",
2854
- backgroundColor: t2.accent,
2855
- color: t2.accentText,
2854
+ backgroundColor: t.accent,
2855
+ color: t.accentText,
2856
2856
  fontSize: "12px",
2857
2857
  fontWeight: 700,
2858
2858
  fontFamily: "inherit",
@@ -2876,9 +2876,9 @@ function AssistSheet({
2876
2876
  style: {
2877
2877
  padding: "8px 12px",
2878
2878
  borderRadius: "999px",
2879
- border: `1px solid ${t2.inputBorder}`,
2879
+ border: `1px solid ${t.inputBorder}`,
2880
2880
  background: "transparent",
2881
- color: t2.textMuted,
2881
+ color: t.textMuted,
2882
2882
  fontSize: "12px",
2883
2883
  fontFamily: "inherit",
2884
2884
  cursor: "pointer",
@@ -2917,9 +2917,9 @@ function AssistSheet({
2917
2917
  send(option, option === CONFIRM_OPTION);
2918
2918
  },
2919
2919
  style: {
2920
- border: `1px solid ${t2.inputBorder}`,
2920
+ border: `1px solid ${t.inputBorder}`,
2921
2921
  background: "transparent",
2922
- color: t2.textMuted,
2922
+ color: t.textMuted,
2923
2923
  borderRadius: "999px",
2924
2924
  // Same 8px as the picker chips — one tap target size in
2925
2925
  // this sheet, not two.
@@ -2936,7 +2936,7 @@ function AssistSheet({
2936
2936
  }
2937
2937
  ),
2938
2938
  busy && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, role: "status", "aria-label": "Thinking", children: [
2939
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
2939
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
2940
2940
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2941
2941
  "span",
2942
2942
  {
@@ -2946,7 +2946,7 @@ function AssistSheet({
2946
2946
  gap: "4px",
2947
2947
  padding: "12px",
2948
2948
  borderRadius: "12px 12px 12px 4px",
2949
- backgroundColor: t2.bgSecondary
2949
+ backgroundColor: t.bgSecondary
2950
2950
  },
2951
2951
  children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2952
2952
  "span",
@@ -2955,7 +2955,7 @@ function AssistSheet({
2955
2955
  width: "5px",
2956
2956
  height: "5px",
2957
2957
  borderRadius: "50%",
2958
- backgroundColor: t2.textMuted,
2958
+ backgroundColor: t.textMuted,
2959
2959
  animation: `gg-dot 1.1s ease-in-out ${i * 0.15}s infinite`
2960
2960
  }
2961
2961
  },
@@ -2968,9 +2968,9 @@ function AssistSheet({
2968
2968
  "div",
2969
2969
  {
2970
2970
  style: {
2971
- border: `1px solid ${t2.accent}`,
2971
+ border: `1px solid ${t.accent}`,
2972
2972
  borderRadius: "12px",
2973
- backgroundColor: t2.bgSecondary,
2973
+ backgroundColor: t.bgSecondary,
2974
2974
  padding: "12px",
2975
2975
  display: "flex",
2976
2976
  flexDirection: "column",
@@ -2987,7 +2987,7 @@ function AssistSheet({
2987
2987
  fontWeight: 700,
2988
2988
  letterSpacing: ".06em",
2989
2989
  textTransform: "uppercase",
2990
- color: t2.accent
2990
+ color: t.accent
2991
2991
  },
2992
2992
  children: duplicate ? `What we'll add to #${duplicate.number}${duplicate.kind === "related" ? " as a related request" : ""} \xB7 edit anything` : "Your report \xB7 edit anything"
2993
2993
  }
@@ -3011,9 +3011,9 @@ function AssistSheet({
3011
3011
  minHeight: "120px",
3012
3012
  padding: "10px",
3013
3013
  borderRadius: "8px",
3014
- border: `1px solid ${t2.inputBorder}`,
3015
- backgroundColor: t2.inputBg,
3016
- color: t2.text,
3014
+ border: `1px solid ${t.inputBorder}`,
3015
+ backgroundColor: t.inputBg,
3016
+ color: t.text,
3017
3017
  fontSize: "13px",
3018
3018
  lineHeight: 1.55,
3019
3019
  fontFamily: "inherit",
@@ -3029,7 +3029,7 @@ function AssistSheet({
3029
3029
  {
3030
3030
  style: {
3031
3031
  fontSize: "11.5px",
3032
- color: t2.textMuted,
3032
+ color: t.textMuted,
3033
3033
  display: "block",
3034
3034
  marginBottom: "6px"
3035
3035
  },
@@ -3041,7 +3041,7 @@ function AssistSheet({
3041
3041
  style: {
3042
3042
  marginLeft: "6px",
3043
3043
  fontSize: "11px",
3044
- color: severityRefused ? "#ef4444" : t2.textMuted
3044
+ color: severityRefused ? "#ef4444" : t.textMuted
3045
3045
  },
3046
3046
  children: "\xB7 required"
3047
3047
  }
@@ -3069,9 +3069,9 @@ function AssistSheet({
3069
3069
  minWidth: 0,
3070
3070
  padding: "8px 2px",
3071
3071
  borderRadius: "8px",
3072
- border: `1px solid ${on ? t2.accent : severityRefused ? "#ef4444" : t2.inputBorder}`,
3073
- backgroundColor: on ? t2.accent : "transparent",
3074
- color: on ? t2.accentText : t2.textMuted,
3072
+ border: `1px solid ${on ? t.accent : severityRefused ? "#ef4444" : t.inputBorder}`,
3073
+ backgroundColor: on ? t.accent : "transparent",
3074
+ color: on ? t.accentText : t.textMuted,
3075
3075
  fontSize: "12px",
3076
3076
  fontWeight: 600,
3077
3077
  fontFamily: "inherit",
@@ -3088,7 +3088,7 @@ function AssistSheet({
3088
3088
  }
3089
3089
  )
3090
3090
  ] }),
3091
- attachmentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { fontSize: "11.5px", color: t2.textMuted }, children: [
3091
+ attachmentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { fontSize: "11.5px", color: t.textMuted }, children: [
3092
3092
  attachmentCount,
3093
3093
  " ",
3094
3094
  attachmentCount === 1 ? "attachment" : "attachments",
@@ -3099,14 +3099,14 @@ function AssistSheet({
3099
3099
  ),
3100
3100
  phase === "solved" && solved && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
3101
3101
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
3102
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t2 }),
3102
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { who: "assistant", theme: t }),
3103
3103
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
3104
3104
  "div",
3105
3105
  {
3106
3106
  style: {
3107
3107
  padding: "9px 12px",
3108
3108
  borderRadius: "12px 12px 12px 4px",
3109
- backgroundColor: t2.bgSecondary,
3109
+ backgroundColor: t.bgSecondary,
3110
3110
  fontSize: "13px",
3111
3111
  lineHeight: 1.55,
3112
3112
  maxWidth: "88%",
@@ -3119,7 +3119,7 @@ function AssistSheet({
3119
3119
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
3120
3120
  "span",
3121
3121
  {
3122
- style: { fontSize: "11.5px", color: t2.textMuted, paddingLeft: "32px" },
3122
+ style: { fontSize: "11.5px", color: t.textMuted, paddingLeft: "32px" },
3123
3123
  children: "Nothing was filed \u2014 you are all set."
3124
3124
  }
3125
3125
  )
@@ -3130,7 +3130,7 @@ function AssistSheet({
3130
3130
  style: {
3131
3131
  textAlign: "center",
3132
3132
  padding: "24px 0",
3133
- color: t2.accent,
3133
+ color: t.accent,
3134
3134
  fontSize: "14px",
3135
3135
  fontWeight: 600
3136
3136
  },
@@ -3150,10 +3150,10 @@ function AssistSheet({
3150
3150
  {
3151
3151
  style: {
3152
3152
  flexShrink: 0,
3153
- borderTop: `1px solid ${t2.border}`,
3153
+ borderTop: `1px solid ${t.border}`,
3154
3154
  padding: "12px 16px",
3155
3155
  paddingBottom: narrow ? "max(12px, env(safe-area-inset-bottom))" : "12px",
3156
- backgroundColor: t2.bg
3156
+ backgroundColor: t.bg
3157
3157
  },
3158
3158
  children: [
3159
3159
  phase === "solved" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3167,8 +3167,8 @@ function AssistSheet({
3167
3167
  padding: "12px",
3168
3168
  borderRadius: "10px",
3169
3169
  border: "none",
3170
- backgroundColor: t2.accent,
3171
- color: t2.accentText,
3170
+ backgroundColor: t.accent,
3171
+ color: t.accentText,
3172
3172
  fontSize: "14px",
3173
3173
  fontWeight: 700,
3174
3174
  fontFamily: "inherit",
@@ -3188,8 +3188,8 @@ function AssistSheet({
3188
3188
  padding: "12px",
3189
3189
  borderRadius: "10px",
3190
3190
  border: "none",
3191
- backgroundColor: isSubmitting || rating < 1 ? t2.bgSecondary : "#f59e0b",
3192
- color: isSubmitting || rating < 1 ? t2.textMuted : "#1a1a1a",
3191
+ backgroundColor: isSubmitting || rating < 1 ? t.bgSecondary : "#f59e0b",
3192
+ color: isSubmitting || rating < 1 ? t.textMuted : "#1a1a1a",
3193
3193
  fontSize: "14px",
3194
3194
  fontWeight: 700,
3195
3195
  fontFamily: "inherit",
@@ -3238,7 +3238,7 @@ function AssistSheet({
3238
3238
  height: "100%",
3239
3239
  objectFit: "cover",
3240
3240
  borderRadius: "8px",
3241
- border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
3241
+ border: `1px solid ${read ? t.accent : t.inputBorder}`,
3242
3242
  opacity: read ? 1 : 0.45,
3243
3243
  boxSizing: "border-box"
3244
3244
  }
@@ -3283,7 +3283,7 @@ function AssistSheet({
3283
3283
  height: "20px",
3284
3284
  boxSizing: "border-box",
3285
3285
  borderRadius: "50%",
3286
- border: `2px solid ${t2.bg}`,
3286
+ border: `2px solid ${t.bg}`,
3287
3287
  background: "#ef4444",
3288
3288
  color: "#fff",
3289
3289
  display: "flex",
@@ -3326,7 +3326,7 @@ function AssistSheet({
3326
3326
  gap: "6px",
3327
3327
  padding: "0 10px",
3328
3328
  borderRadius: "8px",
3329
- border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
3329
+ border: `1px solid ${read ? t.accent : t.inputBorder}`,
3330
3330
  opacity: read ? 1 : 0.55,
3331
3331
  boxSizing: "border-box",
3332
3332
  flexShrink: 0
@@ -3336,7 +3336,7 @@ function AssistSheet({
3336
3336
  "path",
3337
3337
  {
3338
3338
  d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6",
3339
- stroke: t2.textMuted,
3339
+ stroke: t.textMuted,
3340
3340
  strokeWidth: "1.5",
3341
3341
  strokeLinecap: "round",
3342
3342
  strokeLinejoin: "round"
@@ -3347,7 +3347,7 @@ function AssistSheet({
3347
3347
  {
3348
3348
  style: {
3349
3349
  fontSize: "11.5px",
3350
- color: t2.text,
3350
+ color: t.text,
3351
3351
  overflow: "hidden",
3352
3352
  textOverflow: "ellipsis",
3353
3353
  whiteSpace: "nowrap"
@@ -3391,7 +3391,7 @@ function AssistSheet({
3391
3391
  height: "20px",
3392
3392
  boxSizing: "border-box",
3393
3393
  borderRadius: "50%",
3394
- border: `2px solid ${t2.bg}`,
3394
+ border: `2px solid ${t.bg}`,
3395
3395
  background: "#ef4444",
3396
3396
  color: "#fff",
3397
3397
  display: "flex",
@@ -3425,11 +3425,11 @@ function AssistSheet({
3425
3425
  width: "40px",
3426
3426
  height: "40px",
3427
3427
  borderRadius: "8px",
3428
- border: `1px dashed ${t2.inputBorder}`,
3428
+ border: `1px dashed ${t.inputBorder}`,
3429
3429
  display: "inline-flex",
3430
3430
  alignItems: "center",
3431
3431
  justifyContent: "center",
3432
- color: t2.textMuted,
3432
+ color: t.textMuted,
3433
3433
  fontSize: "18px",
3434
3434
  cursor: "pointer",
3435
3435
  flexShrink: 0
@@ -3462,7 +3462,7 @@ function AssistSheet({
3462
3462
  ]
3463
3463
  }
3464
3464
  ),
3465
- readShots.size < screenshots.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: t2.textMuted, fontSize: "11px" }, children: [
3465
+ readShots.size < screenshots.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: t.textMuted, fontSize: "11px" }, children: [
3466
3466
  readShots.size,
3467
3467
  " of ",
3468
3468
  screenshots.length,
@@ -3496,9 +3496,9 @@ function AssistSheet({
3496
3496
  maxHeight: "120px",
3497
3497
  padding: "11px 12px",
3498
3498
  borderRadius: "10px",
3499
- border: `1px solid ${t2.inputBorder}`,
3500
- backgroundColor: t2.inputBg,
3501
- color: t2.text,
3499
+ border: `1px solid ${t.inputBorder}`,
3500
+ backgroundColor: t.inputBg,
3501
+ color: t.text,
3502
3502
  fontSize: "13px",
3503
3503
  lineHeight: 1.4,
3504
3504
  fontFamily: "inherit",
@@ -3526,8 +3526,8 @@ function AssistSheet({
3526
3526
  display: "inline-flex",
3527
3527
  alignItems: "center",
3528
3528
  justifyContent: "center",
3529
- backgroundColor: busy || !input.trim() ? t2.bgSecondary : t2.accent,
3530
- color: busy || !input.trim() ? t2.textMuted : t2.accentText,
3529
+ backgroundColor: busy || !input.trim() ? t.bgSecondary : t.accent,
3530
+ color: busy || !input.trim() ? t.textMuted : t.accentText,
3531
3531
  cursor: busy || !input.trim() ? "default" : "pointer"
3532
3532
  },
3533
3533
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3574,8 +3574,8 @@ function AssistSheet({
3574
3574
  padding: "12px",
3575
3575
  borderRadius: "10px",
3576
3576
  border: "none",
3577
- backgroundColor: t2.accent,
3578
- color: t2.accentText,
3577
+ backgroundColor: t.accent,
3578
+ color: t.accentText,
3579
3579
  fontSize: "14px",
3580
3580
  fontWeight: 700,
3581
3581
  fontFamily: "inherit",
@@ -3615,9 +3615,9 @@ function AssistSheet({
3615
3615
  flexShrink: 0,
3616
3616
  width: "44px",
3617
3617
  borderRadius: "10px",
3618
- border: `1px solid ${t2.inputBorder}`,
3618
+ border: `1px solid ${t.inputBorder}`,
3619
3619
  background: "transparent",
3620
- color: t2.text,
3620
+ color: t.text,
3621
3621
  display: "inline-flex",
3622
3622
  alignItems: "center",
3623
3623
  justifyContent: "center",
@@ -3648,8 +3648,8 @@ function AssistSheet({
3648
3648
  padding: "12px",
3649
3649
  borderRadius: "10px",
3650
3650
  border: "none",
3651
- backgroundColor: isSubmitting || !description.trim() ? t2.bgSecondary : t2.accent,
3652
- color: isSubmitting || !description.trim() ? t2.textMuted : t2.accentText,
3651
+ backgroundColor: isSubmitting || !description.trim() ? t.bgSecondary : t.accent,
3652
+ color: isSubmitting || !description.trim() ? t.textMuted : t.accentText,
3653
3653
  fontSize: "14px",
3654
3654
  fontWeight: 700,
3655
3655
  fontFamily: "inherit",
@@ -3672,7 +3672,7 @@ function AssistSheet({
3672
3672
  margin: "8px auto 0",
3673
3673
  border: "none",
3674
3674
  background: "transparent",
3675
- color: t2.textMuted,
3675
+ color: t.textMuted,
3676
3676
  fontSize: "11.5px",
3677
3677
  fontFamily: "inherit",
3678
3678
  padding: "6px 8px",
@@ -3694,7 +3694,7 @@ function AssistSheet({
3694
3694
  margin: "-2px auto -8px",
3695
3695
  border: "none",
3696
3696
  background: "transparent",
3697
- color: t2.textMuted,
3697
+ color: t.textMuted,
3698
3698
  fontSize: "11.5px",
3699
3699
  fontFamily: "inherit",
3700
3700
  padding: "10px 8px",
@@ -3731,7 +3731,7 @@ function describeSentAlong(hasChat, screenshotCount) {
3731
3731
  }
3732
3732
  function GlitchgrabProblemPanel({
3733
3733
  send,
3734
- theme: t2,
3734
+ theme: t,
3735
3735
  surface,
3736
3736
  conversationId,
3737
3737
  reportType,
@@ -3820,9 +3820,9 @@ function GlitchgrabProblemPanel({
3820
3820
  const secondaryButton = {
3821
3821
  padding: "10px 14px",
3822
3822
  borderRadius: "8px",
3823
- border: `1px solid ${t2.inputBorder}`,
3823
+ border: `1px solid ${t.inputBorder}`,
3824
3824
  background: "transparent",
3825
- color: t2.text,
3825
+ color: t.text,
3826
3826
  fontSize: "13px",
3827
3827
  fontWeight: 600,
3828
3828
  fontFamily: "inherit",
@@ -3832,8 +3832,8 @@ function GlitchgrabProblemPanel({
3832
3832
  padding: "10px 14px",
3833
3833
  borderRadius: "8px",
3834
3834
  border: "none",
3835
- backgroundColor: enabled ? t2.accent : t2.bgSecondary,
3836
- color: enabled ? t2.accentText : t2.textMuted,
3835
+ backgroundColor: enabled ? t.accent : t.bgSecondary,
3836
+ color: enabled ? t.accentText : t.textMuted,
3837
3837
  fontSize: "13px",
3838
3838
  fontWeight: 700,
3839
3839
  fontFamily: "inherit",
@@ -3871,16 +3871,16 @@ function GlitchgrabProblemPanel({
3871
3871
  width: "100%",
3872
3872
  maxWidth: "420px",
3873
3873
  boxSizing: "border-box",
3874
- backgroundColor: t2.bg,
3875
- color: t2.text,
3876
- border: `1px solid ${t2.border}`,
3874
+ backgroundColor: t.bg,
3875
+ color: t.text,
3876
+ border: `1px solid ${t.border}`,
3877
3877
  borderRadius: "12px",
3878
3878
  boxShadow: "0 20px 50px rgba(0,0,0,0.5)",
3879
3879
  padding: "18px"
3880
3880
  },
3881
3881
  children: sent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
3882
3882
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: "gg-self-report-title", style: { fontSize: "15px", fontWeight: 600 }, children: "Sent to the Glitchgrab team" }),
3883
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "6px 0 16px", fontSize: "13px", lineHeight: 1.5, color: t2.textMuted }, children: "Thanks \u2014 we'll look into it. Your report is still open behind this, exactly as you left it." }),
3883
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "6px 0 16px", fontSize: "13px", lineHeight: 1.5, color: t.textMuted }, children: "Thanks \u2014 we'll look into it. Your report is still open behind this, exactly as you left it." }),
3884
3884
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
3885
3885
  "button",
3886
3886
  {
@@ -3912,7 +3912,7 @@ function GlitchgrabProblemPanel({
3912
3912
  style: {
3913
3913
  border: "none",
3914
3914
  background: "transparent",
3915
- color: t2.textMuted,
3915
+ color: t.textMuted,
3916
3916
  fontSize: "18px",
3917
3917
  lineHeight: 1,
3918
3918
  cursor: "pointer",
@@ -3925,7 +3925,7 @@ function GlitchgrabProblemPanel({
3925
3925
  ]
3926
3926
  }
3927
3927
  ),
3928
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "6px 0 12px", fontSize: "13px", lineHeight: 1.5, color: t2.textMuted }, children: "This goes to the people who build this reporter \u2014 not to this project's team. Tell us what went wrong: the AI chat, a button, anything." }),
3928
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "6px 0 12px", fontSize: "13px", lineHeight: 1.5, color: t.textMuted }, children: "This goes to the people who build this reporter \u2014 not to this project's team. Tell us what went wrong: the AI chat, a button, anything." }),
3929
3929
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
3930
3930
  "textarea",
3931
3931
  {
@@ -3950,9 +3950,9 @@ function GlitchgrabProblemPanel({
3950
3950
  resize: "vertical",
3951
3951
  padding: "10px 12px",
3952
3952
  borderRadius: "8px",
3953
- border: `1px solid ${t2.inputBorder}`,
3954
- backgroundColor: t2.inputBg,
3955
- color: t2.text,
3953
+ border: `1px solid ${t.inputBorder}`,
3954
+ backgroundColor: t.inputBg,
3955
+ color: t.text,
3956
3956
  fontSize: "14px",
3957
3957
  lineHeight: 1.45,
3958
3958
  fontFamily: "inherit",
@@ -3985,7 +3985,7 @@ function GlitchgrabProblemPanel({
3985
3985
  display: "block",
3986
3986
  boxSizing: "border-box",
3987
3987
  borderRadius: "8px",
3988
- border: `1px solid ${t2.inputBorder}`
3988
+ border: `1px solid ${t.inputBorder}`
3989
3989
  }
3990
3990
  }
3991
3991
  ),
@@ -4021,7 +4021,7 @@ function GlitchgrabProblemPanel({
4021
4021
  height: "20px",
4022
4022
  boxSizing: "border-box",
4023
4023
  borderRadius: "50%",
4024
- border: `2px solid ${t2.bg}`,
4024
+ border: `2px solid ${t.bg}`,
4025
4025
  background: "#ef4444",
4026
4026
  color: "#fff",
4027
4027
  display: "flex",
@@ -4058,9 +4058,9 @@ function GlitchgrabProblemPanel({
4058
4058
  padding: "0 12px",
4059
4059
  boxSizing: "border-box",
4060
4060
  borderRadius: "8px",
4061
- border: `1px dashed ${t2.inputBorder}`,
4061
+ border: `1px dashed ${t.inputBorder}`,
4062
4062
  background: "transparent",
4063
- color: t2.textMuted,
4063
+ color: t.textMuted,
4064
4064
  fontSize: "12.5px",
4065
4065
  fontWeight: 600,
4066
4066
  fontFamily: "inherit",
@@ -4092,7 +4092,7 @@ function GlitchgrabProblemPanel({
4092
4092
  "p",
4093
4093
  {
4094
4094
  "data-gg-self-report-includes": "",
4095
- style: { margin: "8px 0 0", fontSize: "11.5px", lineHeight: 1.45, color: t2.textMuted },
4095
+ style: { margin: "8px 0 0", fontSize: "11.5px", lineHeight: 1.45, color: t.textMuted },
4096
4096
  children: [
4097
4097
  "Also sent, so we can see what happened:",
4098
4098
  " ",
@@ -4278,29 +4278,6 @@ function captureDefaultScreenshot(options) {
4278
4278
  });
4279
4279
  return inFlight;
4280
4280
  }
4281
- var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
4282
- var SHOT_WAIT_MS = 3e3;
4283
- var SIMILAR_WAIT_MS = 2500;
4284
- var MAX_SIMILAR_SHOWN = 3;
4285
- function ButtonSpinner() {
4286
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4287
- "span",
4288
- {
4289
- "aria-hidden": "true",
4290
- style: {
4291
- display: "inline-block",
4292
- width: "11px",
4293
- height: "11px",
4294
- marginRight: "6px",
4295
- verticalAlign: "-1px",
4296
- border: "2px solid currentColor",
4297
- borderRightColor: "transparent",
4298
- borderRadius: "50%",
4299
- animation: "gg-spin .7s linear infinite"
4300
- }
4301
- }
4302
- );
4303
- }
4304
4281
  function detectDark() {
4305
4282
  if (typeof window === "undefined") return true;
4306
4283
  try {
@@ -4413,6 +4390,29 @@ function detectHostAccent() {
4413
4390
  return null;
4414
4391
  }
4415
4392
  }
4393
+ var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
4394
+ var SHOT_WAIT_MS = 3e3;
4395
+ var SIMILAR_WAIT_MS = 2500;
4396
+ var MAX_SIMILAR_SHOWN = 3;
4397
+ function ButtonSpinner() {
4398
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4399
+ "span",
4400
+ {
4401
+ "aria-hidden": "true",
4402
+ style: {
4403
+ display: "inline-block",
4404
+ width: "11px",
4405
+ height: "11px",
4406
+ marginRight: "6px",
4407
+ verticalAlign: "-1px",
4408
+ border: "2px solid currentColor",
4409
+ borderRightColor: "transparent",
4410
+ borderRadius: "50%",
4411
+ animation: "gg-spin .7s linear infinite"
4412
+ }
4413
+ }
4414
+ );
4415
+ }
4416
4416
  function initialsOf(name) {
4417
4417
  return name.trim().split(/\s+/).slice(0, 2).map((part) => {
4418
4418
  var _a, _b;
@@ -4421,7 +4421,7 @@ function initialsOf(name) {
4421
4421
  }
4422
4422
  function ReporterChip({
4423
4423
  reporter,
4424
- t: t2
4424
+ t
4425
4425
  }) {
4426
4426
  var _a;
4427
4427
  const [avatarFailed, setAvatarFailed] = (0, import_react.useState)(false);
@@ -4431,7 +4431,7 @@ function ReporterChip({
4431
4431
  }, [avatarUrl]);
4432
4432
  const name = ((_a = reporter == null ? void 0 : reporter.name) == null ? void 0 : _a.trim()) || "";
4433
4433
  const isAnonymous = !name;
4434
- const initials = isAnonymous ? "" : initialsOf(name);
4434
+ const initials2 = isAnonymous ? "" : initialsOf(name);
4435
4435
  const label = isAnonymous ? "Anonymous" : name;
4436
4436
  const title = isAnonymous ? "No reporter identity was passed to Glitchgrab \u2014 this report won't be attributed to anyone" : [name, reporter == null ? void 0 : reporter.email, reporter == null ? void 0 : reporter.role].filter(Boolean).join(" \xB7 ");
4437
4437
  const showAvatarImage = !!avatarUrl && !avatarFailed;
@@ -4457,9 +4457,9 @@ function ReporterChip({
4457
4457
  fontSize: "8px",
4458
4458
  fontWeight: 700,
4459
4459
  letterSpacing: "0.02em",
4460
- background: isAnonymous ? t2.inputBg : t2.accent,
4461
- color: isAnonymous ? t2.textMuted : t2.accentText,
4462
- border: `1px solid ${isAnonymous ? t2.inputBorder : "transparent"}`
4460
+ background: isAnonymous ? t.inputBg : t.accent,
4461
+ color: isAnonymous ? t.textMuted : t.accentText,
4462
+ border: `1px solid ${isAnonymous ? t.inputBorder : "transparent"}`
4463
4463
  },
4464
4464
  children: showAvatarImage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4465
4465
  "img",
@@ -4471,7 +4471,7 @@ function ReporterChip({
4471
4471
  onError: () => setAvatarFailed(true),
4472
4472
  style: { width: "100%", height: "100%", objectFit: "cover" }
4473
4473
  }
4474
- ) : initials ? initials : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
4474
+ ) : initials2 ? initials2 : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
4475
4475
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "8", cy: "5.5", r: "2.75", stroke: "currentColor", strokeWidth: "1.4" }),
4476
4476
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4477
4477
  "path",
@@ -4490,7 +4490,7 @@ function ReporterChip({
4490
4490
  {
4491
4491
  style: {
4492
4492
  fontSize: "11px",
4493
- color: t2.textMuted,
4493
+ color: t.textMuted,
4494
4494
  overflow: "hidden",
4495
4495
  textOverflow: "ellipsis",
4496
4496
  whiteSpace: "nowrap"
@@ -4788,17 +4788,17 @@ function ReportDialog({
4788
4788
  (_c = tiles[next]) == null ? void 0 : _c.focus();
4789
4789
  };
4790
4790
  const isDark = (0, import_react.useMemo)(() => isOpen ? detectDark() : true, [isOpen]);
4791
- const t2 = getTheme(isDark);
4791
+ const t = getTheme(isDark);
4792
4792
  const layerTheme = {
4793
- bg: t2.bg,
4794
- bgSecondary: t2.bgSecondary,
4795
- border: t2.border,
4796
- text: t2.text,
4797
- textMuted: t2.textMuted,
4798
- inputBg: t2.inputBg,
4799
- inputBorder: t2.inputBorder,
4800
- accent: t2.accent,
4801
- accentText: t2.accentText
4793
+ bg: t.bg,
4794
+ bgSecondary: t.bgSecondary,
4795
+ border: t.border,
4796
+ text: t.text,
4797
+ textMuted: t.textMuted,
4798
+ inputBg: t.inputBg,
4799
+ inputBorder: t.inputBorder,
4800
+ accent: t.accent,
4801
+ accentText: t.accentText
4802
4802
  };
4803
4803
  const canZoomPreview = previewNatural !== null && typeof window !== "undefined" && (previewNatural.w > window.innerWidth - 32 || previewNatural.h > window.innerHeight - 80);
4804
4804
  const handleFileUpload = (e) => {
@@ -5020,7 +5020,7 @@ function ReportDialog({
5020
5020
  sarvamChunksRef.current = [];
5021
5021
  const stream = streamRef.current;
5022
5022
  streamRef.current = null;
5023
- stream == null ? void 0 : stream.getTracks().forEach((t22) => t22.stop());
5023
+ stream == null ? void 0 : stream.getTracks().forEach((t2) => t2.stop());
5024
5024
  try {
5025
5025
  (_b = mediaRecorderRef.current) == null ? void 0 : _b.stop();
5026
5026
  } catch (e) {
@@ -5122,7 +5122,7 @@ function ReportDialog({
5122
5122
  };
5123
5123
  rec.onstop = async () => {
5124
5124
  var _a3;
5125
- stream.getTracks().forEach((t22) => t22.stop());
5125
+ stream.getTracks().forEach((t2) => t2.stop());
5126
5126
  if (streamRef.current === stream) streamRef.current = null;
5127
5127
  mediaRecorderRef.current = null;
5128
5128
  const chunks = sarvamChunksRef.current;
@@ -5405,7 +5405,7 @@ function ReportDialog({
5405
5405
  button[data-gg-type]{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
5406
5406
  button[data-gg-type]:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
5407
5407
  button[data-gg-type]:active{transform:translateY(0) scale(.985);box-shadow:none}
5408
- button[data-gg-type]:focus-visible{outline:2px solid ${t2.accent};outline-offset:2px}
5408
+ button[data-gg-type]:focus-visible{outline:2px solid ${t.accent};outline-offset:2px}
5409
5409
  @keyframes gg-star-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
5410
5410
  button[data-gg-star]{transition:transform .12s ease}
5411
5411
  button[data-gg-star]:hover{transform:scale(1.18)}
@@ -5452,15 +5452,15 @@ function ReportDialog({
5452
5452
  width: sheet ? "440px" : "420px",
5453
5453
  maxWidth: sheet ? "100%" : "calc(100% - 32px)",
5454
5454
  maxHeight: sheet ? "100dvh" : "calc(100dvh - 32px)",
5455
- ...sheet ? { height: "100dvh", borderLeft: `1px solid ${t2.inputBorder}` } : {},
5455
+ ...sheet ? { height: "100dvh", borderLeft: `1px solid ${t.inputBorder}` } : {},
5456
5456
  display: "flex",
5457
5457
  flexDirection: "column",
5458
- backgroundColor: t2.bg,
5458
+ backgroundColor: t.bg,
5459
5459
  borderRadius: sheet ? 0 : "12px",
5460
5460
  boxShadow: sheet ? "0 20px 60px rgba(0, 0, 0, 0.35)" : "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
5461
5461
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
5462
5462
  overflow: "hidden",
5463
- color: t2.text,
5463
+ color: t.text,
5464
5464
  isolation: "isolate"
5465
5465
  },
5466
5466
  children: [
@@ -5470,7 +5470,7 @@ function ReportDialog({
5470
5470
  style: {
5471
5471
  flexShrink: 0,
5472
5472
  padding: "16px 16px 12px",
5473
- borderBottom: `1px solid ${t2.border}`
5473
+ borderBottom: `1px solid ${t.border}`
5474
5474
  },
5475
5475
  children: [
5476
5476
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -5516,7 +5516,7 @@ function ReportDialog({
5516
5516
  "path",
5517
5517
  {
5518
5518
  d: "M10 3L5 8L10 13",
5519
- stroke: t2.textMuted,
5519
+ stroke: t.textMuted,
5520
5520
  strokeWidth: "2",
5521
5521
  strokeLinecap: "round",
5522
5522
  strokeLinejoin: "round"
@@ -5532,7 +5532,7 @@ function ReportDialog({
5532
5532
  style: {
5533
5533
  fontSize: "15px",
5534
5534
  fontWeight: 600,
5535
- color: t2.text
5535
+ color: t.text
5536
5536
  },
5537
5537
  children: step === 1 ? "What's on your mind?" : "Tell us more"
5538
5538
  }
@@ -5559,9 +5559,9 @@ function ReportDialog({
5559
5559
  lineHeight: 1,
5560
5560
  padding: "3px 6px",
5561
5561
  borderRadius: "4px",
5562
- border: `1px solid ${t2.inputBorder}`,
5563
- background: t2.inputBg,
5564
- color: t2.textMuted,
5562
+ border: `1px solid ${t.inputBorder}`,
5563
+ background: t.inputBg,
5564
+ color: t.textMuted,
5565
5565
  whiteSpace: "nowrap"
5566
5566
  },
5567
5567
  children: getShortcutLabel()
@@ -5594,7 +5594,7 @@ function ReportDialog({
5594
5594
  "path",
5595
5595
  {
5596
5596
  d: "M4 4L12 12M12 4L4 12",
5597
- stroke: t2.textMuted,
5597
+ stroke: t.textMuted,
5598
5598
  strokeWidth: "2",
5599
5599
  strokeLinecap: "round"
5600
5600
  }
@@ -5631,7 +5631,7 @@ function ReportDialog({
5631
5631
  width: "8px",
5632
5632
  height: "8px",
5633
5633
  borderRadius: "50%",
5634
- backgroundColor: s <= step ? t2.accent : t2.inputBorder,
5634
+ backgroundColor: s <= step ? t.accent : t.inputBorder,
5635
5635
  transition: "background-color 0.2s ease"
5636
5636
  }
5637
5637
  }
@@ -5642,7 +5642,7 @@ function ReportDialog({
5642
5642
  style: {
5643
5643
  width: "40px",
5644
5644
  height: "2px",
5645
- backgroundColor: s < step ? t2.accent : t2.inputBorder,
5645
+ backgroundColor: s < step ? t.accent : t.inputBorder,
5646
5646
  transition: "background-color 0.2s ease"
5647
5647
  }
5648
5648
  }
@@ -5671,7 +5671,7 @@ function ReportDialog({
5671
5671
  style: {
5672
5672
  textAlign: "center",
5673
5673
  padding: "20px 0",
5674
- color: t2.accent,
5674
+ color: t.accent,
5675
5675
  fontSize: "14px",
5676
5676
  fontWeight: 500
5677
5677
  },
@@ -5710,7 +5710,7 @@ function ReportDialog({
5710
5710
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5711
5711
  "span",
5712
5712
  {
5713
- style: { fontSize: "13px", fontWeight: 600, color: t2.text },
5713
+ style: { fontSize: "13px", fontWeight: 600, color: t.text },
5714
5714
  children: "How are we doing?"
5715
5715
  }
5716
5716
  ),
@@ -5764,9 +5764,9 @@ function ReportDialog({
5764
5764
  marginBottom: "16px"
5765
5765
  },
5766
5766
  children: [
5767
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { flex: 1, height: "1px", background: t2.border } }),
5768
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11px", color: t2.textMuted }, children: "or report something" }),
5769
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { flex: 1, height: "1px", background: t2.border } })
5767
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { flex: 1, height: "1px", background: t.border } }),
5768
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "or report something" }),
5769
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { flex: 1, height: "1px", background: t.border } })
5770
5770
  ]
5771
5771
  }
5772
5772
  ),
@@ -5779,9 +5779,9 @@ function ReportDialog({
5779
5779
  gap: "10px",
5780
5780
  marginBottom: "14px",
5781
5781
  padding: "8px 10px",
5782
- border: `1px solid ${t2.inputBorder}`,
5782
+ border: `1px solid ${t.inputBorder}`,
5783
5783
  borderRadius: "8px",
5784
- background: t2.inputBg
5784
+ background: t.inputBg
5785
5785
  },
5786
5786
  children: [
5787
5787
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -5794,12 +5794,12 @@ function ReportDialog({
5794
5794
  height: "24px",
5795
5795
  objectFit: "cover",
5796
5796
  borderRadius: "4px",
5797
- border: `1px solid ${t2.border}`,
5797
+ border: `1px solid ${t.border}`,
5798
5798
  flexShrink: 0
5799
5799
  }
5800
5800
  }
5801
5801
  ),
5802
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11px", color: t2.textMuted, flex: 1 }, children: "Screenshot attached" }),
5802
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11px", color: t.textMuted, flex: 1 }, children: "Screenshot attached" }),
5803
5803
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5804
5804
  "button",
5805
5805
  {
@@ -5809,7 +5809,7 @@ function ReportDialog({
5809
5809
  style: {
5810
5810
  border: "none",
5811
5811
  background: "transparent",
5812
- color: t2.textMuted,
5812
+ color: t.textMuted,
5813
5813
  cursor: "pointer",
5814
5814
  fontSize: "15px",
5815
5815
  lineHeight: 1,
@@ -5848,20 +5848,20 @@ function ReportDialog({
5848
5848
  gap: "9px",
5849
5849
  padding: "18px 10px",
5850
5850
  borderRadius: "8px",
5851
- border: `1px solid ${t2.inputBorder}`,
5852
- background: t2.inputBg,
5851
+ border: `1px solid ${t.inputBorder}`,
5852
+ background: t.inputBg,
5853
5853
  cursor: "pointer",
5854
- color: t2.text,
5854
+ color: t.text,
5855
5855
  fontFamily: "inherit"
5856
5856
  },
5857
5857
  onMouseEnter: (e) => {
5858
- e.currentTarget.style.borderColor = t2.accent;
5858
+ e.currentTarget.style.borderColor = t.accent;
5859
5859
  },
5860
5860
  onMouseLeave: (e) => {
5861
- e.currentTarget.style.borderColor = t2.inputBorder;
5861
+ e.currentTarget.style.borderColor = t.inputBorder;
5862
5862
  },
5863
5863
  children: [
5864
- getTypeIcon(type, t2.accent, 22),
5864
+ getTypeIcon(type, t.accent, 22),
5865
5865
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5866
5866
  "span",
5867
5867
  {
@@ -5894,18 +5894,18 @@ function ReportDialog({
5894
5894
  marginBottom: "10px",
5895
5895
  padding: "4px 10px 4px 8px",
5896
5896
  borderRadius: "999px",
5897
- border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t2.inputBorder}`,
5898
- background: isRating ? "rgba(245,158,11,0.1)" : t2.inputBg,
5899
- color: t2.text,
5897
+ border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t.inputBorder}`,
5898
+ background: isRating ? "rgba(245,158,11,0.1)" : t.inputBg,
5899
+ color: t.text,
5900
5900
  fontSize: "11px",
5901
5901
  fontWeight: 600,
5902
5902
  fontFamily: "inherit",
5903
5903
  cursor: availableTypes.length === 1 ? "default" : "pointer"
5904
5904
  },
5905
5905
  children: [
5906
- getTypeIcon(reportType, isRating ? "#f59e0b" : t2.accent, 13),
5906
+ getTypeIcon(reportType, isRating ? "#f59e0b" : t.accent, 13),
5907
5907
  getTypeLabel(reportType),
5908
- availableTypes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t2.textMuted, fontWeight: 400 }, children: "\xB7 change" })
5908
+ availableTypes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t.textMuted, fontWeight: 400 }, children: "\xB7 change" })
5909
5909
  ]
5910
5910
  }
5911
5911
  ),
@@ -5942,7 +5942,7 @@ function ReportDialog({
5942
5942
  {
5943
5943
  d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
5944
5944
  fill: filled ? "#f59e0b" : "transparent",
5945
- stroke: filled ? "#f59e0b" : t2.inputBorder,
5945
+ stroke: filled ? "#f59e0b" : t.inputBorder,
5946
5946
  strokeWidth: "1.5",
5947
5947
  strokeLinejoin: "round"
5948
5948
  }
@@ -5970,9 +5970,9 @@ function ReportDialog({
5970
5970
  // 8px vertical keeps the tap target at ~32px.
5971
5971
  padding: "8px 10px",
5972
5972
  borderRadius: "6px",
5973
- border: `1px solid ${t2.accent}`,
5973
+ border: `1px solid ${t.accent}`,
5974
5974
  background: "transparent",
5975
- color: t2.accent,
5975
+ color: t.accent,
5976
5976
  fontSize: "12px",
5977
5977
  fontWeight: 600,
5978
5978
  fontFamily: "inherit",
@@ -5984,7 +5984,7 @@ function ReportDialog({
5984
5984
  "path",
5985
5985
  {
5986
5986
  d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
5987
- stroke: t2.accent,
5987
+ stroke: t.accent,
5988
5988
  strokeWidth: "1.5",
5989
5989
  strokeLinejoin: "round"
5990
5990
  }
@@ -6014,24 +6014,24 @@ function ReportDialog({
6014
6014
  minHeight: "100px",
6015
6015
  padding: enhanceText2 ? "28px 12px 36px" : transcribeAudio2 ? "10px 12px 36px" : "10px 12px",
6016
6016
  borderRadius: "8px",
6017
- border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t2.accent : t2.inputBorder}`,
6017
+ border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t.accent : t.inputBorder}`,
6018
6018
  fontSize: "14px",
6019
6019
  fontFamily: "inherit",
6020
6020
  resize: "none",
6021
6021
  outline: "none",
6022
6022
  boxSizing: "border-box",
6023
- color: t2.text,
6024
- backgroundColor: t2.inputBg,
6023
+ color: t.text,
6024
+ backgroundColor: t.inputBg,
6025
6025
  transition: "border-color 0.2s ease"
6026
6026
  },
6027
6027
  onKeyDown: handleSpaceDown,
6028
6028
  onKeyUp: handleSpaceUp,
6029
6029
  onFocus: (e) => {
6030
- e.target.style.borderColor = t2.accent;
6030
+ e.target.style.borderColor = t.accent;
6031
6031
  },
6032
6032
  onBlur: (e) => {
6033
6033
  if (!isListening && !isTranscribing)
6034
- e.target.style.borderColor = t2.inputBorder;
6034
+ e.target.style.borderColor = t.inputBorder;
6035
6035
  },
6036
6036
  autoFocus: true
6037
6037
  }
@@ -6148,13 +6148,13 @@ function ReportDialog({
6148
6148
  display: "inline-flex",
6149
6149
  alignItems: "center",
6150
6150
  gap: "4px",
6151
- background: t2.inputBg,
6151
+ background: t.inputBg,
6152
6152
  border: "none",
6153
6153
  padding: "2px 6px",
6154
6154
  borderRadius: "4px",
6155
6155
  fontFamily: "inherit",
6156
6156
  fontSize: "11px",
6157
- color: t2.textMuted,
6157
+ color: t.textMuted,
6158
6158
  cursor: !description.trim() || isEnhancing ? "default" : "pointer",
6159
6159
  opacity: !description.trim() ? 0.5 : 1,
6160
6160
  zIndex: 1
@@ -6173,7 +6173,7 @@ function ReportDialog({
6173
6173
  "path",
6174
6174
  {
6175
6175
  d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
6176
- stroke: t2.textMuted,
6176
+ stroke: t.textMuted,
6177
6177
  strokeWidth: "1.5",
6178
6178
  strokeLinejoin: "round"
6179
6179
  }
@@ -6202,9 +6202,9 @@ function ReportDialog({
6202
6202
  alignItems: "center",
6203
6203
  justifyContent: "center",
6204
6204
  background: "transparent",
6205
- border: `1.5px solid ${isListening ? "#ef4444" : t2.inputBorder}`,
6205
+ border: `1.5px solid ${isListening ? "#ef4444" : t.inputBorder}`,
6206
6206
  borderRadius: "6px",
6207
- color: isListening ? "#ef4444" : t2.textMuted,
6207
+ color: isListening ? "#ef4444" : t.textMuted,
6208
6208
  cursor: "pointer",
6209
6209
  zIndex: 1,
6210
6210
  padding: 0,
@@ -6274,7 +6274,7 @@ function ReportDialog({
6274
6274
  gap: "5px",
6275
6275
  marginTop: "5px",
6276
6276
  fontSize: "11px",
6277
- color: t2.text,
6277
+ color: t.text,
6278
6278
  opacity: 0.55,
6279
6279
  userSelect: "none"
6280
6280
  },
@@ -6299,7 +6299,7 @@ function ReportDialog({
6299
6299
  padding: "6px 8px",
6300
6300
  borderRadius: "6px",
6301
6301
  background: isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.05)",
6302
- border: `1px solid ${t2.accent}40`
6302
+ border: `1px solid ${t.accent}40`
6303
6303
  },
6304
6304
  children: [
6305
6305
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -6314,7 +6314,7 @@ function ReportDialog({
6314
6314
  "path",
6315
6315
  {
6316
6316
  d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
6317
- stroke: t2.accent,
6317
+ stroke: t.accent,
6318
6318
  strokeWidth: "1.5",
6319
6319
  strokeLinejoin: "round"
6320
6320
  }
@@ -6326,7 +6326,7 @@ function ReportDialog({
6326
6326
  {
6327
6327
  style: {
6328
6328
  fontSize: "11px",
6329
- color: t2.textMuted,
6329
+ color: t.textMuted,
6330
6330
  flex: 1
6331
6331
  },
6332
6332
  children: "AI enhanced"
@@ -6343,9 +6343,9 @@ function ReportDialog({
6343
6343
  style: {
6344
6344
  padding: "2px 8px",
6345
6345
  borderRadius: "4px",
6346
- border: `1px solid ${t2.accent}`,
6347
- background: t2.accent,
6348
- color: t2.accentText,
6346
+ border: `1px solid ${t.accent}`,
6347
+ background: t.accent,
6348
+ color: t.accentText,
6349
6349
  fontSize: "11px",
6350
6350
  fontWeight: 600,
6351
6351
  cursor: "pointer",
@@ -6366,9 +6366,9 @@ function ReportDialog({
6366
6366
  style: {
6367
6367
  padding: "2px 8px",
6368
6368
  borderRadius: "4px",
6369
- border: `1px solid ${t2.inputBorder}`,
6369
+ border: `1px solid ${t.inputBorder}`,
6370
6370
  background: "transparent",
6371
- color: t2.textMuted,
6371
+ color: t.textMuted,
6372
6372
  fontSize: "11px",
6373
6373
  fontWeight: 600,
6374
6374
  cursor: "pointer",
@@ -6398,7 +6398,7 @@ function ReportDialog({
6398
6398
  "p",
6399
6399
  {
6400
6400
  style: {
6401
- color: t2.textMuted,
6401
+ color: t.textMuted,
6402
6402
  fontSize: "12px",
6403
6403
  marginTop: "6px",
6404
6404
  marginBottom: 0,
@@ -6413,7 +6413,7 @@ function ReportDialog({
6413
6413
  {
6414
6414
  style: {
6415
6415
  fontSize: "12px",
6416
- color: t2.textMuted,
6416
+ color: t.textMuted,
6417
6417
  marginBottom: "6px",
6418
6418
  display: "block",
6419
6419
  fontWeight: 500
@@ -6444,7 +6444,7 @@ function ReportDialog({
6444
6444
  width: "56px",
6445
6445
  height: "56px",
6446
6446
  borderRadius: "6px",
6447
- border: `1px dashed ${t2.border}`,
6447
+ border: `1px dashed ${t.border}`,
6448
6448
  display: "flex",
6449
6449
  alignItems: "center",
6450
6450
  justifyContent: "center",
@@ -6453,7 +6453,7 @@ function ReportDialog({
6453
6453
  fontSize: "9px",
6454
6454
  lineHeight: 1.2,
6455
6455
  textAlign: "center",
6456
- color: t2.textMuted,
6456
+ color: t.textMuted,
6457
6457
  animation: "gg-pulse 1.4s ease-in-out infinite"
6458
6458
  },
6459
6459
  children: "Capturing\u2026"
@@ -6478,7 +6478,7 @@ function ReportDialog({
6478
6478
  width: "100%",
6479
6479
  height: "100%",
6480
6480
  borderRadius: "6px",
6481
- border: `1px solid ${t2.border}`,
6481
+ border: `1px solid ${t.border}`,
6482
6482
  objectFit: "cover",
6483
6483
  objectPosition: "top",
6484
6484
  cursor: "zoom-in",
@@ -6548,8 +6548,8 @@ function ReportDialog({
6548
6548
  height: "24px",
6549
6549
  borderRadius: "50%",
6550
6550
  border: "none",
6551
- background: t2.accent,
6552
- color: t2.accentText,
6551
+ background: t.accent,
6552
+ color: t.accentText,
6553
6553
  padding: 0,
6554
6554
  cursor: "pointer",
6555
6555
  display: "flex",
@@ -6603,7 +6603,7 @@ function ReportDialog({
6603
6603
  gap: "8px",
6604
6604
  padding: "6px 8px",
6605
6605
  borderRadius: "6px",
6606
- border: `1px solid ${t2.border}`
6606
+ border: `1px solid ${t.border}`
6607
6607
  },
6608
6608
  children: [
6609
6609
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -6619,7 +6619,7 @@ function ReportDialog({
6619
6619
  "path",
6620
6620
  {
6621
6621
  d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",
6622
- stroke: t2.textMuted,
6622
+ stroke: t.textMuted,
6623
6623
  strokeWidth: "1.5",
6624
6624
  strokeLinecap: "round",
6625
6625
  strokeLinejoin: "round"
@@ -6629,7 +6629,7 @@ function ReportDialog({
6629
6629
  "path",
6630
6630
  {
6631
6631
  d: "M14 2v6h6",
6632
- stroke: t2.textMuted,
6632
+ stroke: t.textMuted,
6633
6633
  strokeWidth: "1.5",
6634
6634
  strokeLinecap: "round",
6635
6635
  strokeLinejoin: "round"
@@ -6643,7 +6643,7 @@ function ReportDialog({
6643
6643
  {
6644
6644
  style: {
6645
6645
  fontSize: "11px",
6646
- color: t2.text,
6646
+ color: t.text,
6647
6647
  flex: 1,
6648
6648
  overflow: "hidden",
6649
6649
  textOverflow: "ellipsis",
@@ -6655,7 +6655,7 @@ function ReportDialog({
6655
6655
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6656
6656
  "span",
6657
6657
  {
6658
- style: { fontSize: "10px", color: t2.textMuted },
6658
+ style: { fontSize: "10px", color: t.textMuted },
6659
6659
  children: [
6660
6660
  (a.size / 1024).toFixed(0),
6661
6661
  "KB"
@@ -6730,7 +6730,7 @@ function ReportDialog({
6730
6730
  },
6731
6731
  onDragLeave: () => setScreenshotDragOver(false),
6732
6732
  style: {
6733
- border: `1.5px dashed ${screenshotDragOver ? t2.accent : t2.inputBorder}`,
6733
+ border: `1.5px dashed ${screenshotDragOver ? t.accent : t.inputBorder}`,
6734
6734
  borderRadius: "8px",
6735
6735
  padding: screenshots.length + attachments.length > 0 ? "8px 12px" : "18px 12px",
6736
6736
  textAlign: "center",
@@ -6745,7 +6745,7 @@ function ReportDialog({
6745
6745
  margin: 0,
6746
6746
  fontSize: "11px",
6747
6747
  fontWeight: 500,
6748
- color: t2.textMuted
6748
+ color: t.textMuted
6749
6749
  },
6750
6750
  children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
6751
6751
  }
@@ -6771,7 +6771,7 @@ function ReportDialog({
6771
6771
  width: "18",
6772
6772
  height: "18",
6773
6773
  rx: "2",
6774
- stroke: t2.textMuted,
6774
+ stroke: t.textMuted,
6775
6775
  strokeWidth: "1.5"
6776
6776
  }
6777
6777
  ),
@@ -6781,7 +6781,7 @@ function ReportDialog({
6781
6781
  cx: "8.5",
6782
6782
  cy: "8.5",
6783
6783
  r: "1.5",
6784
- stroke: t2.textMuted,
6784
+ stroke: t.textMuted,
6785
6785
  strokeWidth: "1.5"
6786
6786
  }
6787
6787
  ),
@@ -6789,7 +6789,7 @@ function ReportDialog({
6789
6789
  "path",
6790
6790
  {
6791
6791
  d: "M21 15l-5-5L5 21",
6792
- stroke: t2.textMuted,
6792
+ stroke: t.textMuted,
6793
6793
  strokeWidth: "1.5",
6794
6794
  strokeLinecap: "round",
6795
6795
  strokeLinejoin: "round"
@@ -6805,7 +6805,7 @@ function ReportDialog({
6805
6805
  margin: 0,
6806
6806
  fontSize: "12px",
6807
6807
  fontWeight: 600,
6808
- color: t2.text
6808
+ color: t.text
6809
6809
  },
6810
6810
  children: screenshotDragOver ? "Drop to attach" : "Add screenshots or files"
6811
6811
  }
@@ -6816,7 +6816,7 @@ function ReportDialog({
6816
6816
  style: {
6817
6817
  margin: "3px 0 0",
6818
6818
  fontSize: "11px",
6819
- color: t2.textMuted
6819
+ color: t.textMuted
6820
6820
  },
6821
6821
  children: "Images, PDF, DOC, XLS \xB7 Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
6822
6822
  }
@@ -6831,7 +6831,7 @@ function ReportDialog({
6831
6831
  {
6832
6832
  style: {
6833
6833
  fontSize: "12px",
6834
- color: t2.textMuted,
6834
+ color: t.textMuted,
6835
6835
  marginBottom: "6px",
6836
6836
  display: "flex",
6837
6837
  alignItems: "center",
@@ -6843,7 +6843,7 @@ function ReportDialog({
6843
6843
  "span",
6844
6844
  {
6845
6845
  style: {
6846
- color: severity ? t2.textMuted : needsSeverity ? "#ef4444" : t2.textMuted,
6846
+ color: severity ? t.textMuted : needsSeverity ? "#ef4444" : t.textMuted,
6847
6847
  fontSize: "11px"
6848
6848
  },
6849
6849
  children: severity ? "" : "\xB7 required"
@@ -6878,9 +6878,9 @@ function ReportDialog({
6878
6878
  // tap target; 6px left it at ~29px.
6879
6879
  padding: "9px 2px",
6880
6880
  borderRadius: "6px",
6881
- border: `1px solid ${on ? t2.accent : needsSeverity ? "#ef4444" : t2.inputBorder}`,
6882
- background: on ? t2.accent : "transparent",
6883
- color: on ? t2.accentText : t2.text,
6881
+ border: `1px solid ${on ? t.accent : needsSeverity ? "#ef4444" : t.inputBorder}`,
6882
+ background: on ? t.accent : "transparent",
6883
+ color: on ? t.accentText : t.text,
6884
6884
  fontSize: "12px",
6885
6885
  fontWeight: 600,
6886
6886
  cursor: "pointer",
@@ -6932,8 +6932,8 @@ function ReportDialog({
6932
6932
  },
6933
6933
  children: [
6934
6934
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
6935
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t2.text, fontWeight: 600, fontSize: "13px" }, children: "Our team may already have this, or something close" }),
6936
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t2.textMuted, fontSize: "12px", lineHeight: 1.5 }, children: similarIssues.length > 1 ? "Pick the one that matches. Same problem, or a different request for the same feature \u2014 it's added to that issue, so the team has it in one place." : "Same problem, or a different request for the same feature? Pick it \u2014 it's added to that issue, so the team has it in one place." })
6935
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t.text, fontWeight: 600, fontSize: "13px" }, children: "Our team may already have this, or something close" }),
6936
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t.textMuted, fontSize: "12px", lineHeight: 1.5 }, children: similarIssues.length > 1 ? "Pick the one that matches. Same problem, or a different request for the same feature \u2014 it's added to that issue, so the team has it in one place." : "Same problem, or a different request for the same feature? Pick it \u2014 it's added to that issue, so the team has it in one place." })
6937
6937
  ] }),
6938
6938
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6939
6939
  "div",
@@ -6959,10 +6959,10 @@ function ReportDialog({
6959
6959
  minHeight: "44px",
6960
6960
  padding: "9px 10px",
6961
6961
  borderRadius: "8px",
6962
- border: `1px solid ${picked ? t2.accent : t2.border}`,
6963
- boxShadow: picked ? `0 0 0 1px ${t2.accent}` : "none",
6964
- backgroundColor: t2.bg,
6965
- color: t2.text,
6962
+ border: `1px solid ${picked ? t.accent : t.border}`,
6963
+ boxShadow: picked ? `0 0 0 1px ${t.accent}` : "none",
6964
+ backgroundColor: t.bg,
6965
+ color: t.text,
6966
6966
  textAlign: "left",
6967
6967
  cursor: isSubmitting ? "not-allowed" : "pointer",
6968
6968
  fontFamily: "inherit"
@@ -6979,9 +6979,9 @@ function ReportDialog({
6979
6979
  height: "14px",
6980
6980
  boxSizing: "border-box",
6981
6981
  borderRadius: "50%",
6982
- border: `2px solid ${picked ? t2.accent : t2.textMuted}`,
6983
- backgroundColor: picked ? t2.accent : "transparent",
6984
- boxShadow: picked ? `inset 0 0 0 2px ${t2.bg}` : "none"
6982
+ border: `2px solid ${picked ? t.accent : t.textMuted}`,
6983
+ backgroundColor: picked ? t.accent : "transparent",
6984
+ boxShadow: picked ? `inset 0 0 0 2px ${t.bg}` : "none"
6985
6985
  }
6986
6986
  }
6987
6987
  ),
@@ -7009,7 +7009,7 @@ function ReportDialog({
7009
7009
  WebkitBoxOrient: "vertical"
7010
7010
  },
7011
7011
  children: [
7012
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: t2.textMuted, fontWeight: 600 }, children: [
7012
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: t.textMuted, fontWeight: 600 }, children: [
7013
7013
  "#",
7014
7014
  issue.number
7015
7015
  ] }),
@@ -7018,7 +7018,7 @@ function ReportDialog({
7018
7018
  ]
7019
7019
  }
7020
7020
  ),
7021
- issue.status && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11.5px", color: t2.textMuted }, children: issue.status })
7021
+ issue.status && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11.5px", color: t.textMuted }, children: issue.status })
7022
7022
  ]
7023
7023
  }
7024
7024
  )
@@ -7047,8 +7047,8 @@ function ReportDialog({
7047
7047
  padding: "10px",
7048
7048
  borderRadius: "8px",
7049
7049
  border: "none",
7050
- backgroundColor: isSubmitting || !pickedSimilar ? t2.bgSecondary : t2.accent,
7051
- color: isSubmitting || !pickedSimilar ? t2.textMuted : t2.accentText,
7050
+ backgroundColor: isSubmitting || !pickedSimilar ? t.bgSecondary : t.accent,
7051
+ color: isSubmitting || !pickedSimilar ? t.textMuted : t.accentText,
7052
7052
  fontSize: "14px",
7053
7053
  fontWeight: 600,
7054
7054
  cursor: isSubmitting || !pickedSimilar ? "not-allowed" : "pointer",
@@ -7081,7 +7081,7 @@ function ReportDialog({
7081
7081
  borderRadius: "8px",
7082
7082
  border: "1px solid rgba(245,158,11,0.4)",
7083
7083
  backgroundColor: "transparent",
7084
- color: isSubmitting ? t2.textMuted : t2.text,
7084
+ color: isSubmitting ? t.textMuted : t.text,
7085
7085
  fontSize: "13px",
7086
7086
  fontWeight: 600,
7087
7087
  cursor: isSubmitting ? "not-allowed" : "pointer",
@@ -7112,7 +7112,7 @@ function ReportDialog({
7112
7112
  borderRadius: "8px",
7113
7113
  border: "none",
7114
7114
  backgroundColor: "transparent",
7115
- color: isSubmitting ? t2.textMuted : t2.text,
7115
+ color: isSubmitting ? t.textMuted : t.text,
7116
7116
  fontSize: "13px",
7117
7117
  fontWeight: 500,
7118
7118
  textDecoration: "underline",
@@ -7141,8 +7141,8 @@ function ReportDialog({
7141
7141
  padding: "10px",
7142
7142
  borderRadius: "8px",
7143
7143
  border: "none",
7144
- backgroundColor: submitDisabled ? t2.bgSecondary : t2.accent,
7145
- color: submitDisabled ? t2.textMuted : t2.accentText,
7144
+ backgroundColor: submitDisabled ? t.bgSecondary : t.accent,
7145
+ color: submitDisabled ? t.textMuted : t.accentText,
7146
7146
  fontSize: "14px",
7147
7147
  fontWeight: 600,
7148
7148
  cursor: submitDisabled ? "not-allowed" : "pointer",
@@ -7164,14 +7164,14 @@ function ReportDialog({
7164
7164
  {
7165
7165
  style: {
7166
7166
  padding: "8px 16px 10px",
7167
- borderTop: `1px solid ${t2.border}`,
7167
+ borderTop: `1px solid ${t.border}`,
7168
7168
  display: "flex",
7169
7169
  alignItems: "center",
7170
7170
  justifyContent: "space-between",
7171
7171
  gap: "12px"
7172
7172
  },
7173
7173
  children: [
7174
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReporterChip, { reporter, t: t2 }),
7174
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReporterChip, { reporter, t }),
7175
7175
  reportGlitchgrabProblem ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7176
7176
  "button",
7177
7177
  {
@@ -7184,7 +7184,7 @@ function ReportDialog({
7184
7184
  title: "Something wrong with this reporter itself? Tell the Glitchgrab team.",
7185
7185
  style: {
7186
7186
  fontSize: "11px",
7187
- color: t2.textMuted,
7187
+ color: t.textMuted,
7188
7188
  whiteSpace: "nowrap",
7189
7189
  flexShrink: 0,
7190
7190
  border: "none",
@@ -7204,7 +7204,7 @@ function ReportDialog({
7204
7204
  {
7205
7205
  style: {
7206
7206
  fontSize: "11px",
7207
- color: t2.textMuted,
7207
+ color: t.textMuted,
7208
7208
  whiteSpace: "nowrap",
7209
7209
  flexShrink: 0
7210
7210
  },
@@ -7332,8 +7332,8 @@ function ReportDialog({
7332
7332
  padding: "8px 14px",
7333
7333
  borderRadius: "999px",
7334
7334
  border: "none",
7335
- background: t2.accent,
7336
- color: t2.accentText,
7335
+ background: t.accent,
7336
+ color: t.accentText,
7337
7337
  fontSize: "13px",
7338
7338
  fontWeight: 700,
7339
7339
  cursor: "pointer",
@@ -7372,7 +7372,7 @@ function ReportDialog({
7372
7372
  "span",
7373
7373
  {
7374
7374
  style: {
7375
- color: t2.textMuted,
7375
+ color: t.textMuted,
7376
7376
  fontSize: "12px"
7377
7377
  },
7378
7378
  children: [
@@ -7624,15 +7624,36 @@ function getTypeIcon(type, color, size = 24) {
7624
7624
  // src/booking-dialog.tsx
7625
7625
  var import_react5 = require("react");
7626
7626
  var import_jsx_runtime6 = require("react/jsx-runtime");
7627
- var t = {
7627
+ var LIGHT = {
7628
+ bg: "#ffffff",
7629
+ pane: "#ffffff",
7630
+ border: "#e5e7eb",
7631
+ text: "#111827",
7632
+ muted: "#6b7280",
7633
+ faint: "#9ca3af",
7634
+ open: "#e8e8eb",
7635
+ ink: "#111111",
7636
+ onInk: "#ffffff",
7637
+ input: "#ffffff",
7638
+ danger: "#dc2626"
7639
+ };
7640
+ var DARK = {
7628
7641
  bg: "#141414",
7629
- surface: "#1c1c1c",
7642
+ pane: "#141414",
7630
7643
  border: "#2a2a2a",
7631
- text: "#e5e5e5",
7632
- muted: "#9aa0a6",
7633
- accent: "#3b82f6",
7644
+ text: "#f3f4f6",
7645
+ muted: "#9ca3af",
7646
+ faint: "#6b7280",
7647
+ open: "#262626",
7648
+ ink: "#f3f4f6",
7649
+ onInk: "#111111",
7650
+ input: "#1c1c1c",
7634
7651
  danger: "#f87171"
7635
7652
  };
7653
+ var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
7654
+ var DAY_MS = 864e5;
7655
+ var ZONE_PAD_MS = 14 * 36e5;
7656
+ var WIDE_QUERY = "(min-width: 900px)";
7636
7657
  function localZone() {
7637
7658
  try {
7638
7659
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -7640,18 +7661,92 @@ function localZone() {
7640
7661
  return "UTC";
7641
7662
  }
7642
7663
  }
7643
- function dayKey(iso) {
7644
- return new Date(iso).toDateString();
7664
+ function zoneList(current) {
7665
+ var _a;
7666
+ try {
7667
+ const all = (_a = Intl.supportedValuesOf) == null ? void 0 : _a.call(Intl, "timeZone");
7668
+ if (all == null ? void 0 : all.length) return all.includes(current) ? all : [current, ...all];
7669
+ } catch (e) {
7670
+ }
7671
+ return [current];
7645
7672
  }
7646
- function formatDay(iso) {
7647
- return new Date(iso).toLocaleDateString(void 0, {
7648
- weekday: "short",
7649
- day: "numeric",
7650
- month: "short"
7651
- });
7673
+ function prefers12h() {
7674
+ try {
7675
+ return new Intl.DateTimeFormat(void 0, { hour: "numeric" }).resolvedOptions().hour12 === true;
7676
+ } catch (e) {
7677
+ return false;
7678
+ }
7679
+ }
7680
+ function useMediaQuery(query, fallback) {
7681
+ const [matches, setMatches] = (0, import_react5.useState)(
7682
+ () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : fallback
7683
+ );
7684
+ (0, import_react5.useEffect)(() => {
7685
+ var _a;
7686
+ if (typeof window === "undefined" || !window.matchMedia) return;
7687
+ const mql = window.matchMedia(query);
7688
+ const onChange = () => setMatches(mql.matches);
7689
+ onChange();
7690
+ (_a = mql.addEventListener) == null ? void 0 : _a.call(mql, "change", onChange);
7691
+ return () => {
7692
+ var _a2;
7693
+ return (_a2 = mql.removeEventListener) == null ? void 0 : _a2.call(mql, "change", onChange);
7694
+ };
7695
+ }, [query]);
7696
+ return matches;
7697
+ }
7698
+ function dayKeyIn(iso, timeZone) {
7699
+ try {
7700
+ return new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(
7701
+ new Date(iso)
7702
+ );
7703
+ } catch (e) {
7704
+ return new Date(iso).toISOString().slice(0, 10);
7705
+ }
7706
+ }
7707
+ function keyToUtc(key) {
7708
+ const [y, m, d] = key.split("-").map(Number);
7709
+ return Date.UTC(y, m - 1, d);
7710
+ }
7711
+ function utcToKey(ms) {
7712
+ return new Date(ms).toISOString().slice(0, 10);
7713
+ }
7714
+ function monthGrid(month) {
7715
+ const first = keyToUtc(`${month}-01`);
7716
+ const lead = (new Date(first).getUTCDay() + 6) % 7;
7717
+ const start = first - lead * DAY_MS;
7718
+ return Array.from({ length: 42 }, (_, i) => utcToKey(start + i * DAY_MS));
7652
7719
  }
7653
- function formatTime(iso) {
7654
- return new Date(iso).toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
7720
+ function shiftMonth(month, by) {
7721
+ const [y, m] = month.split("-").map(Number);
7722
+ return new Date(Date.UTC(y, m - 1 + by, 1)).toISOString().slice(0, 7);
7723
+ }
7724
+ function formatTime(iso, timeZone, twelve) {
7725
+ try {
7726
+ if (twelve) {
7727
+ return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, timeZone }).replace(" ", "").toLowerCase();
7728
+ }
7729
+ return new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone });
7730
+ } catch (e) {
7731
+ return new Date(iso).toLocaleTimeString();
7732
+ }
7733
+ }
7734
+ function ordinal(n) {
7735
+ var _a;
7736
+ const tens = n % 100;
7737
+ if (tens >= 11 && tens <= 13) return `${n}th`;
7738
+ return `${n}${(_a = ["th", "st", "nd", "rd"][n % 10]) != null ? _a : "th"}`;
7739
+ }
7740
+ function formatDuration(minutes) {
7741
+ if (minutes < 60) return `${minutes}m`;
7742
+ const rest = minutes % 60;
7743
+ return rest ? `${Math.floor(minutes / 60)}h ${rest}m` : `${minutes / 60}h`;
7744
+ }
7745
+ function initials(name) {
7746
+ return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
7747
+ var _a;
7748
+ return (_a = w[0]) == null ? void 0 : _a.toUpperCase();
7749
+ }).join("");
7655
7750
  }
7656
7751
  function BookingDialog({
7657
7752
  token,
@@ -7659,14 +7754,23 @@ function BookingDialog({
7659
7754
  open,
7660
7755
  onClose
7661
7756
  }) {
7662
- var _a;
7757
+ var _a, _b, _c, _d, _e;
7758
+ const wide = useMediaQuery(WIDE_QUERY, true);
7759
+ const t = (0, import_react5.useMemo)(() => {
7760
+ if (!open) return LIGHT;
7761
+ const base = detectDark() ? DARK : LIGHT;
7762
+ const accent = detectHostAccent();
7763
+ return accent ? { ...base, ink: accent.accent, onInk: accent.accentText } : base;
7764
+ }, [open]);
7663
7765
  const [step, setStep] = (0, import_react5.useState)("slots");
7664
- const [slots, setSlots] = (0, import_react5.useState)(null);
7665
- const [heading, setHeading] = (0, import_react5.useState)({
7666
- title: "Book a demo",
7667
- description: null
7668
- });
7766
+ const [zone, setZone] = (0, import_react5.useState)(localZone);
7767
+ const [twelve, setTwelve] = (0, import_react5.useState)(prefers12h);
7768
+ const [month, setMonth] = (0, import_react5.useState)(() => dayKeyIn(Date.now(), localZone()).slice(0, 7));
7769
+ const [slotsByMonth, setSlotsByMonth] = (0, import_react5.useState)({});
7770
+ const [pickedDay, setPickedDay] = (0, import_react5.useState)(null);
7771
+ const [page, setPage] = (0, import_react5.useState)({ title: "Book a demo", description: null, hostName: null, hostAvatarUrl: null, slotMinutes: 30 });
7669
7772
  const [whatsappUrl, setWhatsappUrl] = (0, import_react5.useState)(null);
7773
+ const [avatarFailed, setAvatarFailed] = (0, import_react5.useState)(false);
7670
7774
  const [selected, setSelected] = (0, import_react5.useState)(null);
7671
7775
  const [name, setName] = (0, import_react5.useState)("");
7672
7776
  const [email, setEmail] = (0, import_react5.useState)("");
@@ -7681,40 +7785,64 @@ function BookingDialog({
7681
7785
  () => ({ Authorization: `Bearer ${token}`, "Content-Type": "application/json" }),
7682
7786
  [token]
7683
7787
  );
7684
- const loadSlots = (0, import_react5.useCallback)(async () => {
7685
- var _a2, _b, _c;
7686
- setError(null);
7687
- setSlots(null);
7688
- try {
7689
- const from = (/* @__PURE__ */ new Date()).toISOString();
7690
- const to = new Date(Date.now() + 21 * 864e5).toISOString();
7691
- const res = await fetch(
7692
- `${baseUrl}/api/v1/sdk/booking/availability?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`,
7693
- { headers }
7694
- );
7695
- const json = await res.json();
7696
- if (!json.success) {
7697
- setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
7698
- setSlots([]);
7788
+ const loadMonth = (0, import_react5.useCallback)(
7789
+ async (target) => {
7790
+ var _a2, _b2, _c2;
7791
+ const grid2 = monthGrid(target);
7792
+ const from = Math.max(Date.now(), keyToUtc(grid2[0]) - ZONE_PAD_MS);
7793
+ const to = keyToUtc(grid2[41]) + DAY_MS + ZONE_PAD_MS;
7794
+ if (to <= from) {
7795
+ setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
7699
7796
  return;
7700
7797
  }
7701
- setSlots((_b = json.data.slots) != null ? _b : []);
7702
- setHeading({ title: json.data.title, description: json.data.description });
7703
- setWhatsappUrl((_c = json.data.whatsappUrl) != null ? _c : null);
7704
- } catch (e) {
7705
- setError("Couldn't reach the booking service");
7706
- setSlots([]);
7707
- }
7708
- }, [baseUrl, headers]);
7798
+ try {
7799
+ const res = await fetch(
7800
+ `${baseUrl}/api/v1/sdk/booking/availability?from=${encodeURIComponent(new Date(from).toISOString())}&to=${encodeURIComponent(new Date(to).toISOString())}`,
7801
+ { headers }
7802
+ );
7803
+ const json = await res.json();
7804
+ if (!json.success) {
7805
+ setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
7806
+ setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
7807
+ return;
7808
+ }
7809
+ const data = (_b2 = json.data) != null ? _b2 : {};
7810
+ setSlotsByMonth((prev) => ({ ...prev, [target]: Array.isArray(data.slots) ? data.slots : [] }));
7811
+ setPage({
7812
+ title: typeof data.title === "string" && data.title ? data.title : "Book a demo",
7813
+ description: typeof data.description === "string" ? data.description : null,
7814
+ hostName: typeof data.hostName === "string" ? data.hostName : null,
7815
+ hostAvatarUrl: typeof data.hostAvatarUrl === "string" ? data.hostAvatarUrl : null,
7816
+ slotMinutes: typeof data.slotMinutes === "number" ? data.slotMinutes : 30
7817
+ });
7818
+ setWhatsappUrl((_c2 = data.whatsappUrl) != null ? _c2 : null);
7819
+ } catch (e) {
7820
+ setError("Couldn't reach the booking service");
7821
+ setSlotsByMonth((prev) => ({ ...prev, [target]: [] }));
7822
+ }
7823
+ },
7824
+ [baseUrl, headers]
7825
+ );
7709
7826
  (0, import_react5.useEffect)(() => {
7710
7827
  if (!open) return;
7828
+ const now = localZone();
7711
7829
  setStep("slots");
7830
+ setZone(now);
7831
+ setMonth(dayKeyIn(Date.now(), now).slice(0, 7));
7832
+ setSlotsByMonth({});
7833
+ setPickedDay(null);
7712
7834
  setSelected(null);
7713
7835
  setCode("");
7714
7836
  setBookingId(null);
7715
7837
  setError(null);
7716
- void loadSlots();
7717
- }, [open, loadSlots]);
7838
+ setAvatarFailed(false);
7839
+ }, [open]);
7840
+ const monthLoaded = month in slotsByMonth;
7841
+ (0, import_react5.useEffect)(() => {
7842
+ if (!open || monthLoaded) return;
7843
+ setError(null);
7844
+ void loadMonth(month);
7845
+ }, [open, month, monthLoaded, loadMonth]);
7718
7846
  (0, import_react5.useEffect)(() => {
7719
7847
  if (!open) return;
7720
7848
  const onKey = (e) => {
@@ -7723,12 +7851,19 @@ function BookingDialog({
7723
7851
  document.addEventListener("keydown", onKey, true);
7724
7852
  return () => document.removeEventListener("keydown", onKey, true);
7725
7853
  }, [open, onClose]);
7854
+ const zones = (0, import_react5.useMemo)(() => open ? zoneList(zone) : [zone], [open, zone]);
7726
7855
  if (!open) return null;
7856
+ const today = dayKeyIn(Date.now(), zone);
7857
+ const grid = monthGrid(month);
7727
7858
  const byDay = /* @__PURE__ */ new Map();
7728
- for (const slot of slots != null ? slots : []) {
7729
- const key = dayKey(slot.startsAt);
7730
- byDay.set(key, [...(_a = byDay.get(key)) != null ? _a : [], slot]);
7859
+ for (const slot of (_a = slotsByMonth[month]) != null ? _a : []) {
7860
+ const key = dayKeyIn(slot.startsAt, zone);
7861
+ byDay.set(key, [...(_b = byDay.get(key)) != null ? _b : [], slot]);
7731
7862
  }
7863
+ const day = pickedDay && byDay.has(pickedDay) ? pickedDay : (_c = grid.find((k) => k >= today && byDay.has(k))) != null ? _c : null;
7864
+ const daySlots = day ? (_d = byDay.get(day)) != null ? _d : [] : [];
7865
+ const atFirstMonth = month <= today.slice(0, 7);
7866
+ const pastHorizon = monthLoaded && !error && byDay.size === 0 && !atFirstMonth;
7732
7867
  async function startBooking() {
7733
7868
  var _a2;
7734
7869
  if (!selected) return;
@@ -7744,7 +7879,8 @@ function BookingDialog({
7744
7879
  phone,
7745
7880
  note,
7746
7881
  startsAt: selected.startsAt,
7747
- timezone: localZone()
7882
+ // The zone the times were shown in, which is the one the visitor chose.
7883
+ timezone: zone
7748
7884
  })
7749
7885
  });
7750
7886
  const json = await res.json();
@@ -7785,233 +7921,703 @@ function BookingDialog({
7785
7921
  }
7786
7922
  }
7787
7923
  const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
7788
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7924
+ const selectedEnd = selected ? (_e = selected.endsAt) != null ? _e : new Date(new Date(selected.startsAt).getTime() + page.slotMinutes * 6e4).toISOString() : null;
7925
+ const monthDate = new Date(keyToUtc(`${month}-01`));
7926
+ const muted = { color: t.muted };
7927
+ const summary = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
7789
7928
  "div",
7790
7929
  {
7791
- onClick: (e) => {
7792
- if (e.target === e.currentTarget) onClose();
7793
- },
7794
7930
  style: {
7795
- position: "fixed",
7796
- inset: 0,
7797
- zIndex: 2147483e3,
7798
- background: "rgba(0,0,0,.6)",
7931
+ position: "relative",
7932
+ padding: wide ? "28px 24px" : "20px 20px 16px",
7933
+ borderRight: wide ? `1px solid ${t.border}` : void 0,
7934
+ borderBottom: wide ? void 0 : `1px solid ${t.border}`,
7935
+ width: wide ? 260 : void 0,
7936
+ flex: wide ? "0 0 260px" : void 0,
7937
+ boxSizing: "border-box",
7799
7938
  display: "flex",
7800
- alignItems: "center",
7801
- justifyContent: "center",
7802
- padding: 16,
7803
- fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
7939
+ flexDirection: "column",
7940
+ gap: 10
7804
7941
  },
7805
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
7806
- "div",
7807
- {
7808
- role: "dialog",
7809
- "aria-modal": "true",
7810
- "aria-label": heading.title,
7811
- style: {
7812
- width: "min(440px, 100%)",
7813
- maxHeight: "min(660px, 90vh)",
7814
- display: "flex",
7815
- flexDirection: "column",
7816
- background: t.bg,
7817
- color: t.text,
7818
- borderRadius: 16,
7819
- boxShadow: "0 20px 60px rgba(0,0,0,.55)",
7820
- overflow: "hidden"
7821
- },
7822
- children: [
7823
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
7824
- "div",
7942
+ children: [
7943
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7944
+ "button",
7945
+ {
7946
+ type: "button",
7947
+ onClick: onClose,
7948
+ "aria-label": "Close",
7949
+ className: "gg-bk-ghost",
7950
+ style: {
7951
+ position: "absolute",
7952
+ top: 12,
7953
+ right: 12,
7954
+ width: 30,
7955
+ height: 30,
7956
+ display: "flex",
7957
+ alignItems: "center",
7958
+ justifyContent: "center",
7959
+ border: 0,
7960
+ borderRadius: 8,
7961
+ background: "transparent",
7962
+ color: t.muted,
7963
+ cursor: "pointer",
7964
+ padding: 0
7965
+ },
7966
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "x" })
7967
+ }
7968
+ ),
7969
+ (page.hostName || page.hostAvatarUrl) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingRight: 32 }, children: [
7970
+ page.hostAvatarUrl && !avatarFailed ? (
7971
+ // eslint-disable-next-line @next/next/no-img-element -- rendered on the host's page, not ours
7972
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7973
+ "img",
7825
7974
  {
7975
+ src: page.hostAvatarUrl,
7976
+ alt: "",
7977
+ width: 36,
7978
+ height: 36,
7979
+ referrerPolicy: "no-referrer",
7980
+ onError: () => setAvatarFailed(true),
7981
+ style: { width: 36, height: 36, borderRadius: 999, objectFit: "cover", border: `1px solid ${t.border}` }
7982
+ }
7983
+ )
7984
+ ) : page.hostName ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7985
+ "div",
7986
+ {
7987
+ "aria-hidden": true,
7988
+ style: {
7989
+ width: 36,
7990
+ height: 36,
7991
+ borderRadius: 999,
7992
+ background: t.open,
7993
+ color: t.text,
7994
+ display: "flex",
7995
+ alignItems: "center",
7996
+ justifyContent: "center",
7997
+ fontSize: 13,
7998
+ fontWeight: 600
7999
+ },
8000
+ children: initials(page.hostName)
8001
+ }
8002
+ ) : null,
8003
+ page.hostName && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 14, fontWeight: 500, ...muted }, children: page.hostName })
8004
+ ] }),
8005
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 20, fontWeight: 600, lineHeight: 1.25, paddingRight: 32, overflowWrap: "anywhere" }, children: page.title }),
8006
+ page.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, lineHeight: 1.5, overflowWrap: "anywhere", ...muted }, children: page.description }),
8007
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 4, fontSize: 14 }, children: [
8008
+ selected && step !== "slots" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "calendar", t, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
8009
+ new Date(selected.startsAt).toLocaleDateString("en-US", {
8010
+ weekday: "long",
8011
+ month: "long",
8012
+ day: "numeric",
8013
+ year: "numeric",
8014
+ timeZone: zone
8015
+ }),
8016
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
8017
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: muted, children: [
8018
+ formatTime(selected.startsAt, zone, twelve),
8019
+ " \u2013 ",
8020
+ selectedEnd && formatTime(selectedEnd, zone, twelve)
8021
+ ] })
8022
+ ] }) }),
8023
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "clock", t, children: formatDuration(page.slotMinutes) }),
8024
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "video", t, children: "Google Meet" }),
8025
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { icon: "globe", t, children: step === "slots" ? (
8026
+ // The visible label is plain text; the native select sits on top of
8027
+ // it, invisible. A styled select sizes itself to the longest zone
8028
+ // name in the list, which pushed the chevron to the pane's edge.
8029
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", gap: 4 }, children: [
8030
+ zone,
8031
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: t.muted }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "down" }) }),
8032
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8033
+ "select",
8034
+ {
8035
+ value: zone,
8036
+ onChange: (e) => setZone(e.target.value),
8037
+ "aria-label": "Time zone",
8038
+ style: { position: "absolute", inset: 0, width: "100%", opacity: 0, cursor: "pointer", font: "inherit" },
8039
+ children: zones.map((z) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: z, children: z }, z))
8040
+ }
8041
+ )
8042
+ ] })
8043
+ ) : zone })
8044
+ ] }),
8045
+ whatsappUrl && step === "slots" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8046
+ "a",
8047
+ {
8048
+ href: whatsappUrl,
8049
+ target: "_blank",
8050
+ rel: "noreferrer",
8051
+ className: "gg-bk-ghost",
8052
+ style: {
8053
+ marginTop: wide ? "auto" : 6,
8054
+ display: "flex",
8055
+ alignItems: "center",
8056
+ gap: 10,
8057
+ padding: "10px 12px",
8058
+ borderRadius: 8,
8059
+ border: `1px solid ${t.border}`,
8060
+ background: "transparent",
8061
+ color: t.text,
8062
+ fontSize: 13,
8063
+ fontWeight: 500,
8064
+ textDecoration: "none"
8065
+ },
8066
+ children: [
8067
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#25D366", flex: "0 0 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WhatsAppIcon, {}) }),
8068
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
8069
+ "Book on WhatsApp",
8070
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "block", fontSize: 12, fontWeight: 400, color: t.muted, marginTop: 1 }, children: "We'll ask the same questions in chat." })
8071
+ ] })
8072
+ ]
8073
+ }
8074
+ )
8075
+ ]
8076
+ }
8077
+ );
8078
+ const calendar = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8079
+ "div",
8080
+ {
8081
+ style: {
8082
+ flex: "1 1 auto",
8083
+ minWidth: 0,
8084
+ padding: wide ? "24px 24px 20px" : "16px 16px 8px",
8085
+ boxSizing: "border-box",
8086
+ overflowY: wide ? "auto" : void 0
8087
+ },
8088
+ children: [
8089
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }, children: [
8090
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 16, fontWeight: 600 }, children: [
8091
+ monthDate.toLocaleDateString("en-US", { month: "long", timeZone: "UTC" }),
8092
+ " ",
8093
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontWeight: 500, ...muted }, children: monthDate.getUTCFullYear() })
8094
+ ] }),
8095
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 4 }, children: [
8096
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8097
+ NavButton,
8098
+ {
8099
+ t,
8100
+ label: "Previous month",
8101
+ icon: "left",
8102
+ disabled: atFirstMonth,
8103
+ onClick: () => setMonth(shiftMonth(month, -1))
8104
+ }
8105
+ ),
8106
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8107
+ NavButton,
8108
+ {
8109
+ t,
8110
+ label: "Next month",
8111
+ icon: "right",
8112
+ disabled: pastHorizon,
8113
+ onClick: () => setMonth(shiftMonth(month, 1))
8114
+ }
8115
+ )
8116
+ ] })
8117
+ ] }),
8118
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: wide ? 6 : 4 }, children: [
8119
+ WEEKDAYS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8120
+ "div",
8121
+ {
8122
+ style: {
8123
+ textAlign: "center",
8124
+ fontSize: 11,
8125
+ fontWeight: 500,
8126
+ letterSpacing: ".08em",
8127
+ textTransform: "uppercase",
8128
+ padding: "6px 0 8px",
8129
+ color: t.text
8130
+ },
8131
+ children: w
8132
+ },
8133
+ w
8134
+ )),
8135
+ grid.map((key) => {
8136
+ const inMonth = key.startsWith(month);
8137
+ const bookable = byDay.has(key);
8138
+ const isSelected = key === day;
8139
+ const dayNum = Number(key.slice(8));
8140
+ if (!inMonth && !bookable) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "aria-hidden": true }, key);
8141
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8142
+ "button",
8143
+ {
8144
+ type: "button",
8145
+ disabled: !bookable,
8146
+ onClick: () => setPickedDay(key),
8147
+ "aria-pressed": isSelected,
8148
+ "aria-label": new Date(keyToUtc(key)).toLocaleDateString("en-US", {
8149
+ weekday: "long",
8150
+ month: "long",
8151
+ day: "numeric",
8152
+ timeZone: "UTC"
8153
+ }),
8154
+ className: bookable && !isSelected ? "gg-bk-day" : void 0,
7826
8155
  style: {
7827
- padding: "16px 18px",
7828
- borderBottom: `1px solid ${t.border}`,
7829
- display: "flex",
7830
- alignItems: "flex-start",
7831
- justifyContent: "space-between",
7832
- gap: 12
8156
+ position: "relative",
8157
+ aspectRatio: "1 / 1",
8158
+ minHeight: 36,
8159
+ border: 0,
8160
+ borderRadius: 8,
8161
+ padding: 0,
8162
+ fontFamily: "inherit",
8163
+ fontSize: wide ? 15 : 14,
8164
+ fontWeight: bookable ? 600 : 400,
8165
+ cursor: bookable ? "pointer" : "default",
8166
+ background: isSelected ? t.ink : bookable ? t.open : "transparent",
8167
+ color: isSelected ? t.onInk : bookable ? t.text : t.faint,
8168
+ opacity: monthLoaded ? 1 : 0.5
7833
8169
  },
7834
8170
  children: [
7835
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
7836
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 15, fontWeight: 600 }, children: heading.title }),
7837
- heading.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: t.muted, marginTop: 2 }, children: heading.description })
7838
- ] }),
7839
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7840
- "button",
8171
+ !inMonth && dayNum === 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8172
+ "span",
7841
8173
  {
7842
- onClick: onClose,
7843
- "aria-label": "Close",
7844
- style: { border: 0, background: "transparent", color: t.muted, fontSize: 20, cursor: "pointer", lineHeight: 1 },
7845
- children: "\xD7"
8174
+ style: {
8175
+ position: "absolute",
8176
+ top: 4,
8177
+ left: 0,
8178
+ right: 0,
8179
+ fontSize: 9,
8180
+ fontWeight: 500,
8181
+ letterSpacing: ".06em",
8182
+ textTransform: "uppercase"
8183
+ },
8184
+ children: new Date(keyToUtc(key)).toLocaleDateString("en-US", { month: "short", timeZone: "UTC" })
7846
8185
  }
7847
- )
7848
- ]
7849
- }
7850
- ),
7851
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: 18, overflowY: "auto", flex: "1 1 auto" }, children: [
7852
- error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.danger, fontSize: 12, marginBottom: 12, lineHeight: 1.5 }, children: error }),
7853
- step === "slots" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
7854
- whatsappUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
7855
- "a",
7856
- {
7857
- href: whatsappUrl,
7858
- target: "_blank",
7859
- rel: "noreferrer",
7860
- style: {
7861
- display: "block",
7862
- marginBottom: 16,
7863
- padding: "10px 14px",
7864
- borderRadius: 10,
7865
- border: `1px solid ${t.border}`,
7866
- background: t.surface,
7867
- color: t.text,
7868
- fontSize: 13,
7869
- textDecoration: "none"
7870
- },
7871
- children: [
7872
- "\u{1F4AC} Rather book on WhatsApp?",
7873
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "block", fontSize: 11, color: t.muted, marginTop: 2 }, children: "We'll ask the same questions in chat." })
7874
- ]
7875
- }
7876
- ),
7877
- slots === null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.muted, fontSize: 13 }, children: "Finding times\u2026" }),
7878
- (slots == null ? void 0 : slots.length) === 0 && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.muted, fontSize: 13 }, children: "No times available right now." }),
7879
- [...byDay.entries()].map(([day, daySlots]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginBottom: 18 }, children: [
7880
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 11, color: t.muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: ".6px" }, children: formatDay(daySlots[0].startsAt) }),
7881
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7882
- "button",
8186
+ ),
8187
+ dayNum,
8188
+ key === today && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8189
+ "span",
7883
8190
  {
7884
- onClick: () => {
7885
- setSelected(slot);
7886
- setStep("details");
7887
- },
8191
+ "aria-hidden": true,
7888
8192
  style: {
7889
- padding: "8px 14px",
8193
+ position: "absolute",
8194
+ bottom: 6,
8195
+ left: "50%",
8196
+ width: 4,
8197
+ height: 4,
8198
+ marginLeft: -2,
7890
8199
  borderRadius: 999,
7891
- border: `1px solid ${t.border}`,
7892
- background: t.surface,
7893
- color: t.text,
7894
- fontSize: 13,
7895
- cursor: "pointer"
7896
- },
7897
- children: formatTime(slot.startsAt)
7898
- },
7899
- slot.startsAt
7900
- )) })
7901
- ] }, day))
7902
- ] }),
7903
- step === "details" && selected && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
7904
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 13, color: t.muted }, children: [
7905
- formatDay(selected.startsAt),
7906
- " \xB7 ",
7907
- formatTime(selected.startsAt),
7908
- " \xB7 ",
7909
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7910
- "button",
7911
- {
7912
- onClick: () => setStep("slots"),
7913
- style: { border: 0, background: "transparent", color: t.accent, cursor: "pointer", fontSize: 13, padding: 0 },
7914
- children: "change"
8200
+ background: isSelected ? t.onInk : t.text
8201
+ }
7915
8202
  }
7916
8203
  )
7917
- ] }),
7918
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { label: "Your name", value: name, onChange: setName }),
7919
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { label: "Email", value: email, onChange: setEmail, type: "email" }),
7920
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7921
- Field,
7922
- {
7923
- label: "Mobile number",
7924
- value: phone,
7925
- onChange: setPhone,
7926
- type: "tel",
7927
- hint: "We send a code here to confirm, then a reminder before the call."
7928
- }
7929
- ),
7930
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { label: "Anything we should know? (optional)", value: note, onChange: setNote }),
7931
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7932
- "button",
7933
- {
7934
- onClick: startBooking,
7935
- disabled: !canSubmitDetails || busy,
7936
- style: primaryStyle(!canSubmitDetails || busy),
7937
- children: busy ? "Sending code\u2026" : "Send verification code"
7938
- }
7939
- )
7940
- ] }),
7941
- step === "code" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
7942
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.5 }, children: "We sent a 4-digit code to your phone. Your slot is held for 10 minutes." }),
7943
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { label: "Code", value: code, onChange: setCode }),
7944
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7945
- "button",
7946
- {
7947
- onClick: confirmBooking,
7948
- disabled: code.trim().length < 4 || busy,
7949
- style: primaryStyle(code.trim().length < 4 || busy),
7950
- children: busy ? "Confirming\u2026" : "Confirm booking"
7951
- }
7952
- )
7953
- ] }),
7954
- step === "done" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
7955
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 15, fontWeight: 600 }, children: "You're booked." }),
7956
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.6 }, children: [
7957
- selected && `${formatDay(selected.startsAt)} at ${formatTime(selected.startsAt)}. `,
7958
- "A calendar invite is on its way to ",
7959
- email,
7960
- ", and we'll send a WhatsApp reminder before the call."
7961
- ] }),
7962
- meetUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: meetUrl, target: "_blank", rel: "noreferrer", style: { ...primaryStyle(false), textAlign: "center", textDecoration: "none" }, children: "Open the meeting link" })
7963
- ] })
7964
- ] })
7965
- ]
8204
+ ]
8205
+ },
8206
+ key
8207
+ );
8208
+ })
8209
+ ] })
8210
+ ]
8211
+ }
8212
+ );
8213
+ const times = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8214
+ "div",
8215
+ {
8216
+ style: {
8217
+ width: wide ? 260 : void 0,
8218
+ flex: wide ? "0 0 260px" : void 0,
8219
+ borderLeft: wide ? `1px solid ${t.border}` : void 0,
8220
+ borderTop: wide ? void 0 : `1px solid ${t.border}`,
8221
+ padding: wide ? "24px 20px 0" : "16px 16px 0",
8222
+ boxSizing: "border-box",
8223
+ display: "flex",
8224
+ flexDirection: "column",
8225
+ minHeight: 0
8226
+ },
8227
+ children: [
8228
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 14 }, children: [
8229
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 16, fontWeight: 600, whiteSpace: "nowrap" }, children: day ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8230
+ new Date(keyToUtc(day)).toLocaleDateString("en-US", { weekday: "short", timeZone: "UTC" }),
8231
+ " ",
8232
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontWeight: 500, ...muted }, children: ordinal(Number(day.slice(8))) })
8233
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontWeight: 500, ...muted }, children: "Times" }) }),
8234
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8235
+ "div",
8236
+ {
8237
+ role: "group",
8238
+ "aria-label": "Clock format",
8239
+ style: { display: "flex", padding: 3, borderRadius: 8, background: t.open, flex: "0 0 auto" },
8240
+ children: [true, false].map((h12) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8241
+ "button",
8242
+ {
8243
+ type: "button",
8244
+ "aria-pressed": twelve === h12,
8245
+ onClick: () => setTwelve(h12),
8246
+ style: {
8247
+ border: 0,
8248
+ borderRadius: 6,
8249
+ padding: "4px 9px",
8250
+ fontFamily: "inherit",
8251
+ fontSize: 13,
8252
+ fontWeight: 500,
8253
+ cursor: "pointer",
8254
+ background: twelve === h12 ? t.bg : "transparent",
8255
+ color: twelve === h12 ? t.text : t.muted,
8256
+ boxShadow: twelve === h12 ? "0 1px 2px rgba(0,0,0,.12)" : "none"
8257
+ },
8258
+ children: h12 ? "12h" : "24h"
8259
+ },
8260
+ String(h12)
8261
+ ))
8262
+ }
8263
+ )
8264
+ ] }),
8265
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8266
+ "div",
8267
+ {
8268
+ style: {
8269
+ overflowY: wide ? "auto" : void 0,
8270
+ flex: "1 1 auto",
8271
+ minHeight: 0,
8272
+ paddingBottom: 20,
8273
+ display: wide ? "flex" : "grid",
8274
+ flexDirection: "column",
8275
+ gridTemplateColumns: "repeat(auto-fill, minmax(96px, 1fr))",
8276
+ gap: 8
8277
+ },
8278
+ children: [
8279
+ error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.danger, fontSize: 13, lineHeight: 1.5, gridColumn: "1 / -1" }, children: error }),
8280
+ !monthLoaded && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, gridColumn: "1 / -1", ...muted }, children: "Finding times\u2026" }),
8281
+ monthLoaded && !error && !day && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, lineHeight: 1.5, gridColumn: "1 / -1", ...muted }, children: pastHorizon ? "Nothing can be booked this far ahead yet." : "No times left this month. Try the next one." }),
8282
+ monthLoaded && daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8283
+ "button",
8284
+ {
8285
+ type: "button",
8286
+ className: "gg-bk-slot",
8287
+ onClick: () => {
8288
+ setSelected(slot);
8289
+ setError(null);
8290
+ setStep("details");
8291
+ },
8292
+ style: {
8293
+ flex: "0 0 auto",
8294
+ padding: "11px 12px",
8295
+ borderRadius: 8,
8296
+ border: `1px solid ${t.border}`,
8297
+ background: t.pane,
8298
+ color: t.text,
8299
+ fontFamily: "inherit",
8300
+ fontSize: 14,
8301
+ fontWeight: 500,
8302
+ cursor: "pointer",
8303
+ textAlign: "center"
8304
+ },
8305
+ children: formatTime(slot.startsAt, zone, twelve)
8306
+ },
8307
+ slot.startsAt
8308
+ ))
8309
+ ]
8310
+ }
8311
+ )
8312
+ ]
8313
+ }
8314
+ );
8315
+ const form = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8316
+ "div",
8317
+ {
8318
+ style: {
8319
+ flex: "1 1 auto",
8320
+ minWidth: 0,
8321
+ padding: wide ? "28px 32px" : "20px",
8322
+ boxSizing: "border-box",
8323
+ overflowY: wide ? "auto" : void 0
8324
+ },
8325
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { maxWidth: 440, display: "flex", flexDirection: "column", gap: 14 }, children: [
8326
+ error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: t.danger, fontSize: 13, lineHeight: 1.5 }, children: error }),
8327
+ step === "details" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8328
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Your name", value: name, onChange: setName, autoComplete: "name" }),
8329
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Email", value: email, onChange: setEmail, type: "email", autoComplete: "email" }),
8330
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8331
+ Field,
8332
+ {
8333
+ t,
8334
+ label: "Mobile number",
8335
+ value: phone,
8336
+ onChange: setPhone,
8337
+ type: "tel",
8338
+ autoComplete: "tel",
8339
+ hint: "We send a code here to confirm, then a reminder before the call."
8340
+ }
8341
+ ),
8342
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Anything we should know? (optional)", value: note, onChange: setNote, multiline: true }),
8343
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 4 }, children: [
8344
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8345
+ "button",
8346
+ {
8347
+ type: "button",
8348
+ className: "gg-bk-ghost",
8349
+ onClick: () => {
8350
+ setError(null);
8351
+ setStep("slots");
8352
+ },
8353
+ style: secondaryStyle(t),
8354
+ children: "Back"
8355
+ }
8356
+ ),
8357
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8358
+ "button",
8359
+ {
8360
+ type: "button",
8361
+ onClick: startBooking,
8362
+ disabled: !canSubmitDetails || busy,
8363
+ style: primaryStyle(t, !canSubmitDetails || busy),
8364
+ children: busy ? "Sending code\u2026" : "Send verification code"
8365
+ }
8366
+ )
8367
+ ] })
8368
+ ] }),
8369
+ step === "code" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8370
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 14, lineHeight: 1.5, ...muted }, children: "We sent a code to your phone. Your slot is held for 10 minutes." }),
8371
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Code", value: code, onChange: setCode, autoComplete: "one-time-code", inputMode: "numeric" }),
8372
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8373
+ "button",
8374
+ {
8375
+ type: "button",
8376
+ onClick: confirmBooking,
8377
+ disabled: code.trim().length < 4 || busy,
8378
+ style: primaryStyle(t, code.trim().length < 4 || busy),
8379
+ children: busy ? "Confirming\u2026" : "Confirm booking"
8380
+ }
8381
+ ) })
8382
+ ] }),
8383
+ step === "done" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8384
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 20, fontWeight: 600 }, children: "You're booked." }),
8385
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 14, lineHeight: 1.6, ...muted }, children: [
8386
+ "A calendar invite is on its way to ",
8387
+ email,
8388
+ ", and we'll send a WhatsApp reminder before the call."
8389
+ ] }),
8390
+ meetUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8391
+ "a",
8392
+ {
8393
+ href: meetUrl,
8394
+ target: "_blank",
8395
+ rel: "noreferrer",
8396
+ style: { ...primaryStyle(t, false), alignSelf: "flex-start", textDecoration: "none" },
8397
+ children: "Open the meeting link"
8398
+ }
8399
+ )
8400
+ ] })
8401
+ ] })
8402
+ }
8403
+ );
8404
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8405
+ "div",
8406
+ {
8407
+ onClick: (e) => {
8408
+ if (e.target === e.currentTarget) onClose();
8409
+ },
8410
+ style: {
8411
+ position: "fixed",
8412
+ inset: 0,
8413
+ zIndex: 2147483e3,
8414
+ background: "rgba(0,0,0,.6)",
8415
+ display: "flex",
8416
+ alignItems: wide ? "center" : "flex-start",
8417
+ justifyContent: "center",
8418
+ padding: wide ? 24 : 12,
8419
+ boxSizing: "border-box",
8420
+ overflowY: "auto",
8421
+ fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
8422
+ },
8423
+ children: [
8424
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
8425
+ .gg-bk-day:hover { box-shadow: inset 0 0 0 1.5px ${t.ink}; }
8426
+ .gg-bk-slot:hover { border-color: ${t.ink} !important; }
8427
+ .gg-bk-ghost:hover { background: ${t.open} !important; }
8428
+ .gg-bk-root button:focus-visible, .gg-bk-root a:focus-visible,
8429
+ .gg-bk-root span:has(> select:focus-visible), .gg-bk-root input:focus-visible, .gg-bk-root textarea:focus-visible {
8430
+ outline: 2px solid ${t.ink}; outline-offset: 2px;
7966
8431
  }
7967
- )
8432
+ ` }),
8433
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
8434
+ "div",
8435
+ {
8436
+ role: "dialog",
8437
+ "aria-modal": "true",
8438
+ "aria-label": page.title,
8439
+ className: "gg-bk-root",
8440
+ style: {
8441
+ width: step === "slots" ? "min(1060px, 100%)" : "min(820px, 100%)",
8442
+ // A month grid should not jump in height between months; the form
8443
+ // steps are short and would sit in a mostly empty box.
8444
+ height: wide && step === "slots" ? "min(640px, calc(100vh - 48px))" : void 0,
8445
+ minHeight: wide && step !== "slots" ? 420 : void 0,
8446
+ margin: wide ? void 0 : "auto 0",
8447
+ display: "flex",
8448
+ flexDirection: wide ? "row" : "column",
8449
+ background: t.bg,
8450
+ color: t.text,
8451
+ border: `1px solid ${t.border}`,
8452
+ borderRadius: 14,
8453
+ boxShadow: "0 24px 64px rgba(0,0,0,.35)",
8454
+ overflow: "hidden",
8455
+ boxSizing: "border-box",
8456
+ textAlign: "left",
8457
+ lineHeight: 1.4
8458
+ },
8459
+ children: [
8460
+ summary,
8461
+ step === "slots" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8462
+ calendar,
8463
+ times
8464
+ ] }) : form
8465
+ ]
8466
+ }
8467
+ )
8468
+ ]
7968
8469
  }
7969
8470
  );
7970
8471
  }
7971
- function primaryStyle(disabled) {
8472
+ function primaryStyle(t, disabled) {
7972
8473
  return {
7973
- marginTop: 4,
7974
8474
  padding: "10px 16px",
7975
- borderRadius: 999,
8475
+ borderRadius: 8,
7976
8476
  border: 0,
7977
- background: disabled ? "#2a2a2a" : t.accent,
7978
- color: disabled ? "#6b7280" : "#fff",
8477
+ background: t.ink,
8478
+ color: t.onInk,
8479
+ opacity: disabled ? 0.4 : 1,
8480
+ fontFamily: "inherit",
7979
8481
  fontSize: 14,
7980
- fontWeight: 500,
8482
+ fontWeight: 600,
7981
8483
  cursor: disabled ? "default" : "pointer"
7982
8484
  };
7983
8485
  }
8486
+ function secondaryStyle(t) {
8487
+ return {
8488
+ padding: "10px 16px",
8489
+ borderRadius: 8,
8490
+ border: 0,
8491
+ background: "transparent",
8492
+ color: t.text,
8493
+ fontFamily: "inherit",
8494
+ fontSize: 14,
8495
+ fontWeight: 500,
8496
+ cursor: "pointer"
8497
+ };
8498
+ }
8499
+ function Row({ icon, t, children }) {
8500
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 10, color: t.text, minWidth: 0 }, children: [
8501
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: t.muted, flex: "0 0 auto", marginTop: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: icon }) }),
8502
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children })
8503
+ ] });
8504
+ }
8505
+ function NavButton({
8506
+ t,
8507
+ label,
8508
+ icon,
8509
+ disabled,
8510
+ onClick
8511
+ }) {
8512
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8513
+ "button",
8514
+ {
8515
+ type: "button",
8516
+ "aria-label": label,
8517
+ disabled,
8518
+ onClick,
8519
+ className: disabled ? void 0 : "gg-bk-ghost",
8520
+ style: {
8521
+ width: 32,
8522
+ height: 32,
8523
+ display: "flex",
8524
+ alignItems: "center",
8525
+ justifyContent: "center",
8526
+ border: 0,
8527
+ borderRadius: 8,
8528
+ background: "transparent",
8529
+ color: disabled ? t.faint : t.text,
8530
+ opacity: disabled ? 0.5 : 1,
8531
+ cursor: disabled ? "default" : "pointer",
8532
+ padding: 0
8533
+ },
8534
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: icon })
8535
+ }
8536
+ );
8537
+ }
8538
+ function WhatsAppIcon() {
8539
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" }) });
8540
+ }
8541
+ function Icon({ name }) {
8542
+ const paths = {
8543
+ x: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }),
8544
+ left: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m15 18-6-6 6-6" }),
8545
+ right: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m9 18 6-6-6-6" }),
8546
+ down: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m6 9 6 6 6-6" }),
8547
+ clock: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8548
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
8549
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 7v5l3 2" })
8550
+ ] }),
8551
+ video: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8552
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "6", width: "13", height: "12", rx: "2" }),
8553
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m16 10 5-3v10l-5-3" })
8554
+ ] }),
8555
+ globe: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8556
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
8557
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
8558
+ ] }),
8559
+ calendar: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
8560
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
8561
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 10h18M8 3v4M16 3v4" })
8562
+ ] })
8563
+ };
8564
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8565
+ "svg",
8566
+ {
8567
+ width: "16",
8568
+ height: "16",
8569
+ viewBox: "0 0 24 24",
8570
+ fill: "none",
8571
+ stroke: "currentColor",
8572
+ strokeWidth: "2",
8573
+ strokeLinecap: "round",
8574
+ strokeLinejoin: "round",
8575
+ "aria-hidden": true,
8576
+ style: { display: "block" },
8577
+ children: paths[name]
8578
+ }
8579
+ );
8580
+ }
7984
8581
  function Field({
8582
+ t,
7985
8583
  label,
7986
8584
  value,
7987
8585
  onChange,
7988
8586
  type = "text",
7989
- hint
8587
+ hint,
8588
+ autoComplete,
8589
+ inputMode,
8590
+ multiline
7990
8591
  }) {
7991
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "block", fontSize: 11, color: t.muted }, children: [
8592
+ const inputStyle = {
8593
+ display: "block",
8594
+ width: "100%",
8595
+ boxSizing: "border-box",
8596
+ marginTop: 6,
8597
+ padding: "9px 12px",
8598
+ background: t.input,
8599
+ color: t.text,
8600
+ border: `1px solid ${t.border}`,
8601
+ borderRadius: 8,
8602
+ fontFamily: "inherit",
8603
+ fontSize: 14,
8604
+ outline: "none",
8605
+ resize: "vertical"
8606
+ };
8607
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "block", fontSize: 13, fontWeight: 500, color: t.text }, children: [
7992
8608
  label,
7993
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
8609
+ multiline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("textarea", { rows: 3, value, onChange: (e) => onChange(e.target.value), style: inputStyle }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
7994
8610
  "input",
7995
8611
  {
7996
8612
  type,
7997
8613
  value,
8614
+ autoComplete,
8615
+ inputMode,
7998
8616
  onChange: (e) => onChange(e.target.value),
7999
- style: {
8000
- display: "block",
8001
- width: "100%",
8002
- boxSizing: "border-box",
8003
- marginTop: 4,
8004
- padding: "9px 12px",
8005
- background: t.surface,
8006
- color: t.text,
8007
- border: `1px solid ${t.border}`,
8008
- borderRadius: 8,
8009
- fontSize: 13,
8010
- outline: "none"
8011
- }
8617
+ style: inputStyle
8012
8618
  }
8013
8619
  ),
8014
- hint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginTop: 4, fontSize: 10, color: t.muted }, children: hint })
8620
+ hint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
8015
8621
  ] });
8016
8622
  }
8017
8623