glitchgrab 1.28.0 → 1.29.1

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 (5) hide show
  1. package/dist/index.js +823 -780
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +823 -780
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1399,6 +1399,21 @@ function ReportDialog({
1399
1399
  @keyframes gg-b2{0%,100%{height:8px}50%{height:3px}}
1400
1400
  @keyframes gg-b3{0%,100%{height:4px}30%{height:14px}70%{height:5px}}
1401
1401
  @keyframes gg-b4{0%,100%{height:6px}60%{height:13px}}
1402
+ @keyframes gg-bug-crawl{0%,100%{transform:translateX(0) rotate(0deg)}20%{transform:translateX(-1.5px) rotate(-6deg)}40%{transform:translateX(1.5px) rotate(5deg)}60%{transform:translateX(-1px) rotate(-4deg)}80%{transform:translateX(1px) rotate(3deg)}}
1403
+ @keyframes gg-star-spin{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.15) rotate(15deg)}}
1404
+ @keyframes gg-ui-grow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
1405
+ @keyframes gg-perf-sweep{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-12deg)}70%{transform:rotate(10deg)}}
1406
+ @keyframes gg-shield-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}
1407
+ @keyframes gg-question-shake{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
1408
+ @keyframes gg-chat-tilt{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-2px)}}
1409
+ button[data-gg-type] > svg{transform-origin:center}
1410
+ button[data-gg-type="BUG"] > svg{animation:gg-bug-crawl 2.2s ease-in-out infinite}
1411
+ button[data-gg-type="FEATURE_REQUEST"] > svg{animation:gg-star-spin 2.6s ease-in-out infinite}
1412
+ button[data-gg-type="UI_IMPROVEMENT"] > svg{animation:gg-ui-grow 1.8s ease-in-out infinite;transform-origin:bottom}
1413
+ button[data-gg-type="PERFORMANCE"] > svg{animation:gg-perf-sweep 2.4s ease-in-out infinite}
1414
+ button[data-gg-type="SECURITY"] > svg{animation:gg-shield-pulse 2.2s ease-in-out infinite;transform-origin:top}
1415
+ button[data-gg-type="QUESTION"] > svg{animation:gg-question-shake 2s ease-in-out infinite}
1416
+ button[data-gg-type="OTHER"] > svg{animation:gg-chat-tilt 2.2s ease-in-out infinite}
1402
1417
  ` }),
1403
1418
  document.body
1404
1419
  ),
@@ -1432,6 +1447,9 @@ function ReportDialog({
1432
1447
  zIndex: 2147483647,
1433
1448
  width: "340px",
1434
1449
  maxWidth: "calc(100% - 32px)",
1450
+ maxHeight: "calc(100dvh - 32px)",
1451
+ display: "flex",
1452
+ flexDirection: "column",
1435
1453
  backgroundColor: t.bg,
1436
1454
  borderRadius: "12px",
1437
1455
  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
@@ -1445,6 +1463,7 @@ function ReportDialog({
1445
1463
  "div",
1446
1464
  {
1447
1465
  style: {
1466
+ flexShrink: 0,
1448
1467
  padding: "16px 16px 12px",
1449
1468
  borderBottom: `1px solid ${t.border}`
1450
1469
  },
@@ -1512,7 +1531,19 @@ function ReportDialog({
1512
1531
  },
1513
1532
  children: step === 1 ? "What's on your mind?" : "Tell us more"
1514
1533
  }
1515
- ),
1534
+ )
1535
+ ]
1536
+ }
1537
+ ),
1538
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1539
+ "div",
1540
+ {
1541
+ style: {
1542
+ display: "flex",
1543
+ alignItems: "center",
1544
+ gap: "8px"
1545
+ },
1546
+ children: [
1516
1547
  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1517
1548
  "span",
1518
1549
  {
@@ -1530,45 +1561,45 @@ function ReportDialog({
1530
1561
  },
1531
1562
  children: getShortcutLabel()
1532
1563
  }
1564
+ ),
1565
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1566
+ "button",
1567
+ {
1568
+ type: "button",
1569
+ onClick: handleClose,
1570
+ style: {
1571
+ background: "none",
1572
+ border: "none",
1573
+ cursor: "pointer",
1574
+ padding: "4px",
1575
+ display: "flex",
1576
+ alignItems: "center",
1577
+ justifyContent: "center"
1578
+ },
1579
+ "aria-label": "Close",
1580
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1581
+ "svg",
1582
+ {
1583
+ width: "16",
1584
+ height: "16",
1585
+ viewBox: "0 0 16 16",
1586
+ fill: "none",
1587
+ style: { display: "block" },
1588
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1589
+ "path",
1590
+ {
1591
+ d: "M4 4L12 12M12 4L4 12",
1592
+ stroke: t.textMuted,
1593
+ strokeWidth: "2",
1594
+ strokeLinecap: "round"
1595
+ }
1596
+ )
1597
+ }
1598
+ )
1599
+ }
1533
1600
  )
1534
1601
  ]
1535
1602
  }
1536
- ),
1537
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1538
- "button",
1539
- {
1540
- type: "button",
1541
- onClick: handleClose,
1542
- style: {
1543
- background: "none",
1544
- border: "none",
1545
- cursor: "pointer",
1546
- padding: "4px",
1547
- display: "flex",
1548
- alignItems: "center",
1549
- justifyContent: "center"
1550
- },
1551
- "aria-label": "Close",
1552
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1553
- "svg",
1554
- {
1555
- width: "16",
1556
- height: "16",
1557
- viewBox: "0 0 16 16",
1558
- fill: "none",
1559
- style: { display: "block" },
1560
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1561
- "path",
1562
- {
1563
- d: "M4 4L12 12M12 4L4 12",
1564
- stroke: t.textMuted,
1565
- strokeWidth: "2",
1566
- strokeLinecap: "round"
1567
- }
1568
- )
1569
- }
1570
- )
1571
- }
1572
1603
  )
1573
1604
  ]
1574
1605
  }
@@ -1620,824 +1651,836 @@ function ReportDialog({
1620
1651
  ]
1621
1652
  }
1622
1653
  ),
1623
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1654
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1624
1655
  "div",
1625
1656
  {
1626
1657
  style: {
1627
- textAlign: "center",
1628
- padding: "20px 0",
1629
- color: t.accent,
1630
- fontSize: "14px",
1631
- fontWeight: 500
1658
+ padding: "16px",
1659
+ overflowY: "auto",
1660
+ flex: "1 1 auto",
1661
+ minHeight: 0
1632
1662
  },
1633
- children: [
1634
- getTypeLabel(reportType),
1635
- " sent. Thank you!"
1636
- ]
1637
- }
1638
- ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1639
- step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1640
- "div",
1641
- {
1642
- style: {
1643
- display: "grid",
1644
- gridTemplateColumns: "1fr 1fr",
1645
- gap: "8px"
1646
- },
1647
- children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1648
- "button",
1649
- {
1650
- type: "button",
1651
- onClick: () => {
1652
- setReportType(type);
1653
- setStep(2);
1654
- },
1655
- style: {
1656
- display: "flex",
1657
- flexDirection: "column",
1658
- alignItems: "center",
1659
- gap: "8px",
1660
- padding: "16px 8px",
1661
- borderRadius: "8px",
1662
- border: `1px solid ${t.inputBorder}`,
1663
- background: t.inputBg,
1664
- cursor: "pointer",
1665
- color: t.text,
1666
- fontFamily: "inherit",
1667
- transition: "border-color 0.15s ease"
1668
- },
1669
- onMouseEnter: (e) => {
1670
- e.currentTarget.style.borderColor = t.accent;
1671
- },
1672
- onMouseLeave: (e) => {
1673
- e.currentTarget.style.borderColor = t.inputBorder;
1674
- },
1675
- children: [
1676
- getTypeIcon(type, t.accent),
1677
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
1678
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1679
- "span",
1680
- {
1681
- style: {
1682
- fontSize: "11px",
1683
- color: t.textMuted,
1684
- lineHeight: "1.3"
1685
- },
1686
- children: getTypeSubtitle(type)
1687
- }
1688
- )
1689
- ]
1663
+ children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1664
+ "div",
1665
+ {
1666
+ style: {
1667
+ textAlign: "center",
1668
+ padding: "20px 0",
1669
+ color: t.accent,
1670
+ fontSize: "14px",
1671
+ fontWeight: 500
1690
1672
  },
1691
- type
1692
- ))
1693
- }
1694
- ),
1695
- step === 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1696
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
1697
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1698
- "textarea",
1699
- {
1700
- ref: textareaRef,
1701
- value: description,
1702
- onChange: (e) => {
1703
- setDescription(e.target.value);
1704
- if (validationError) setValidationError(null);
1705
- if (isEnhanced) {
1706
- setIsEnhanced(false);
1707
- setOriginalDescription(null);
1708
- }
1709
- },
1710
- placeholder: isTranscribing ? "Transcribing your speech\u2026" : isListening ? "Listening\u2026 speak now" : getPlaceholder(reportType, placeholderIdx, !!transcribeAudio2),
1711
- style: {
1712
- width: "100%",
1713
- minHeight: "100px",
1714
- padding: enhanceText2 ? "28px 12px 36px" : transcribeAudio2 ? "10px 12px 36px" : "10px 12px",
1715
- borderRadius: "8px",
1716
- border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t.accent : t.inputBorder}`,
1717
- fontSize: "14px",
1718
- fontFamily: "inherit",
1719
- resize: "none",
1720
- outline: "none",
1721
- boxSizing: "border-box",
1722
- color: t.text,
1723
- backgroundColor: t.inputBg,
1724
- transition: "border-color 0.2s ease"
1725
- },
1726
- onKeyDown: handleSpaceDown,
1727
- onKeyUp: handleSpaceUp,
1728
- onFocus: (e) => {
1729
- e.target.style.borderColor = t.accent;
1730
- },
1731
- onBlur: (e) => {
1732
- if (!isListening && !isTranscribing)
1733
- e.target.style.borderColor = t.inputBorder;
1734
- },
1735
- autoFocus: true
1736
- }
1737
- ),
1738
- (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1739
- "span",
1673
+ children: [
1674
+ getTypeLabel(reportType),
1675
+ " sent. Thank you!"
1676
+ ]
1677
+ }
1678
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1679
+ step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1680
+ "div",
1740
1681
  {
1741
1682
  style: {
1742
- position: "absolute",
1743
- bottom: "10px",
1744
- left: "10px",
1745
- display: "inline-flex",
1746
- alignItems: "center",
1747
- gap: "4px",
1748
- fontSize: "10px",
1749
- fontWeight: 700,
1750
- letterSpacing: "0.04em",
1751
- color: isTranscribing ? "#f59e0b" : "#ef4444",
1752
- pointerEvents: "none",
1753
- zIndex: 1
1683
+ display: "grid",
1684
+ gridTemplateColumns: "1fr 1fr",
1685
+ gap: "8px"
1754
1686
  },
1755
- children: [
1756
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1757
- "span",
1758
- {
1759
- style: {
1760
- width: "6px",
1761
- height: "6px",
1762
- borderRadius: "50%",
1763
- backgroundColor: "currentColor",
1764
- animation: "gg-pulse 1.2s ease-in-out infinite",
1765
- display: "inline-block",
1766
- flexShrink: 0
1767
- }
1768
- }
1769
- ),
1770
- isTranscribing ? "Transcribing\u2026" : "REC",
1771
- isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1772
- "span",
1773
- {
1774
- style: {
1775
- display: "inline-flex",
1776
- alignItems: "flex-end",
1777
- gap: "2px",
1778
- height: "14px",
1779
- marginLeft: "3px"
1780
- },
1781
- children: [
1782
- { anim: "gg-b1", dur: "0.6s", delay: "0s" },
1783
- {
1784
- anim: "gg-b2",
1785
- dur: "0.5s",
1786
- delay: "0.1s"
1787
- },
1788
- {
1789
- anim: "gg-b3",
1790
- dur: "0.7s",
1791
- delay: "0.05s"
1792
- },
1793
- {
1794
- anim: "gg-b4",
1795
- dur: "0.55s",
1796
- delay: "0.15s"
1797
- }
1798
- ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1687
+ children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1688
+ "button",
1689
+ {
1690
+ type: "button",
1691
+ "data-gg-type": type,
1692
+ onClick: () => {
1693
+ setReportType(type);
1694
+ setStep(2);
1695
+ },
1696
+ style: {
1697
+ display: "flex",
1698
+ flexDirection: "column",
1699
+ alignItems: "center",
1700
+ gap: "8px",
1701
+ padding: "16px 8px",
1702
+ borderRadius: "8px",
1703
+ border: `1px solid ${t.inputBorder}`,
1704
+ background: t.inputBg,
1705
+ cursor: "pointer",
1706
+ color: t.text,
1707
+ fontFamily: "inherit",
1708
+ transition: "border-color 0.15s ease"
1709
+ },
1710
+ onMouseEnter: (e) => {
1711
+ e.currentTarget.style.borderColor = t.accent;
1712
+ },
1713
+ onMouseLeave: (e) => {
1714
+ e.currentTarget.style.borderColor = t.inputBorder;
1715
+ },
1716
+ children: [
1717
+ getTypeIcon(type, t.accent),
1718
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
1719
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1799
1720
  "span",
1800
1721
  {
1801
1722
  style: {
1802
- width: "2.5px",
1803
- height: "4px",
1804
- borderRadius: "1px",
1805
- backgroundColor: "#ef4444",
1806
- animation: `${b.anim} ${b.dur} ease-in-out ${b.delay} infinite`,
1807
- display: "inline-block",
1808
- alignSelf: "center"
1809
- }
1810
- },
1811
- i
1812
- ))
1813
- }
1814
- )
1815
- ]
1816
- }
1817
- ),
1818
- enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1819
- "button",
1820
- {
1821
- type: "button",
1822
- onClick: async () => {
1823
- var _a;
1824
- if (!description.trim() || isEnhancing) return;
1825
- setIsEnhancing(true);
1826
- try {
1827
- const polished = await enhanceText2(
1828
- description,
1829
- (_a = screenshots[0]) != null ? _a : null
1830
- );
1831
- if (polished && polished !== description) {
1832
- setOriginalDescription(description);
1833
- setDescription(polished);
1834
- setIsEnhanced(true);
1835
- if (validationError)
1836
- setValidationError(null);
1837
- }
1838
- } finally {
1839
- setIsEnhancing(false);
1840
- }
1841
- },
1842
- disabled: !description.trim() || isEnhancing || isEnhanced,
1843
- style: {
1844
- position: "absolute",
1845
- top: "6px",
1846
- right: "6px",
1847
- display: "inline-flex",
1848
- alignItems: "center",
1849
- gap: "4px",
1850
- background: t.inputBg,
1851
- border: "none",
1852
- padding: "2px 6px",
1853
- borderRadius: "4px",
1854
- fontFamily: "inherit",
1855
- fontSize: "11px",
1856
- color: t.textMuted,
1857
- cursor: !description.trim() || isEnhancing ? "default" : "pointer",
1858
- opacity: !description.trim() ? 0.5 : 1,
1859
- zIndex: 1
1860
- },
1861
- title: "Polish grammar \u2014 preserves your meaning",
1862
- children: [
1863
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1864
- "svg",
1865
- {
1866
- width: "11",
1867
- height: "11",
1868
- viewBox: "0 0 24 24",
1869
- fill: "none",
1870
- "aria-hidden": "true",
1871
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1872
- "path",
1873
- {
1874
- 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",
1875
- stroke: t.textMuted,
1876
- strokeWidth: "1.5",
1877
- strokeLinejoin: "round"
1723
+ fontSize: "11px",
1724
+ color: t.textMuted,
1725
+ lineHeight: "1.3"
1726
+ },
1727
+ children: getTypeSubtitle(type)
1878
1728
  }
1879
1729
  )
1880
- }
1881
- ),
1882
- isEnhancing ? "Enhancing..." : "AI enhance"
1883
- ]
1730
+ ]
1731
+ },
1732
+ type
1733
+ ))
1884
1734
  }
1885
1735
  ),
1886
- transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1887
- "button",
1888
- {
1889
- type: "button",
1890
- onClick: () => {
1891
- void toggleVoice();
1892
- },
1893
- title: isListening ? "Stop recording" : "Speak your report",
1894
- style: {
1895
- position: "absolute",
1896
- bottom: "14px",
1897
- right: "7px",
1898
- width: "26px",
1899
- height: "26px",
1900
- display: "flex",
1901
- alignItems: "center",
1902
- justifyContent: "center",
1903
- background: "transparent",
1904
- border: `1.5px solid ${isListening ? "#ef4444" : t.inputBorder}`,
1905
- borderRadius: "6px",
1906
- color: isListening ? "#ef4444" : t.textMuted,
1907
- cursor: "pointer",
1908
- zIndex: 1,
1909
- padding: 0,
1910
- transition: "border-color 0.2s ease, color 0.2s ease"
1911
- },
1912
- children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1913
- "svg",
1736
+ step === 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1737
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
1738
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1739
+ "textarea",
1914
1740
  {
1915
- width: "12",
1916
- height: "12",
1917
- viewBox: "0 0 24 24",
1918
- fill: "currentColor",
1919
- "aria-hidden": "true",
1920
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1921
- "rect",
1922
- {
1923
- x: "6",
1924
- y: "6",
1925
- width: "12",
1926
- height: "12",
1927
- rx: "2"
1741
+ ref: textareaRef,
1742
+ value: description,
1743
+ onChange: (e) => {
1744
+ setDescription(e.target.value);
1745
+ if (validationError) setValidationError(null);
1746
+ if (isEnhanced) {
1747
+ setIsEnhanced(false);
1748
+ setOriginalDescription(null);
1928
1749
  }
1929
- )
1750
+ },
1751
+ placeholder: isTranscribing ? "Transcribing your speech\u2026" : isListening ? "Listening\u2026 speak now" : getPlaceholder(reportType, placeholderIdx, !!transcribeAudio2),
1752
+ style: {
1753
+ width: "100%",
1754
+ minHeight: "100px",
1755
+ padding: enhanceText2 ? "28px 12px 36px" : transcribeAudio2 ? "10px 12px 36px" : "10px 12px",
1756
+ borderRadius: "8px",
1757
+ border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t.accent : t.inputBorder}`,
1758
+ fontSize: "14px",
1759
+ fontFamily: "inherit",
1760
+ resize: "none",
1761
+ outline: "none",
1762
+ boxSizing: "border-box",
1763
+ color: t.text,
1764
+ backgroundColor: t.inputBg,
1765
+ transition: "border-color 0.2s ease"
1766
+ },
1767
+ onKeyDown: handleSpaceDown,
1768
+ onKeyUp: handleSpaceUp,
1769
+ onFocus: (e) => {
1770
+ e.target.style.borderColor = t.accent;
1771
+ },
1772
+ onBlur: (e) => {
1773
+ if (!isListening && !isTranscribing)
1774
+ e.target.style.borderColor = t.inputBorder;
1775
+ },
1776
+ autoFocus: true
1930
1777
  }
1931
- ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1932
- "svg",
1778
+ ),
1779
+ (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1780
+ "span",
1933
1781
  {
1934
- width: "13",
1935
- height: "13",
1936
- viewBox: "0 0 24 24",
1937
- fill: "none",
1938
- "aria-hidden": "true",
1782
+ style: {
1783
+ position: "absolute",
1784
+ bottom: "10px",
1785
+ left: "10px",
1786
+ display: "inline-flex",
1787
+ alignItems: "center",
1788
+ gap: "4px",
1789
+ fontSize: "10px",
1790
+ fontWeight: 700,
1791
+ letterSpacing: "0.04em",
1792
+ color: isTranscribing ? "#f59e0b" : "#ef4444",
1793
+ pointerEvents: "none",
1794
+ zIndex: 1
1795
+ },
1939
1796
  children: [
1940
1797
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1941
- "rect",
1798
+ "span",
1942
1799
  {
1943
- x: "9",
1944
- y: "2",
1945
- width: "6",
1946
- height: "12",
1947
- rx: "3",
1948
- stroke: "currentColor",
1949
- strokeWidth: "1.8"
1800
+ style: {
1801
+ width: "6px",
1802
+ height: "6px",
1803
+ borderRadius: "50%",
1804
+ backgroundColor: "currentColor",
1805
+ animation: "gg-pulse 1.2s ease-in-out infinite",
1806
+ display: "inline-block",
1807
+ flexShrink: 0
1808
+ }
1950
1809
  }
1951
1810
  ),
1952
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1953
- "path",
1811
+ isTranscribing ? "Transcribing\u2026" : "REC",
1812
+ isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1813
+ "span",
1954
1814
  {
1955
- d: "M5 10a7 7 0 0014 0M12 19v3M9 22h6",
1956
- stroke: "currentColor",
1957
- strokeWidth: "1.8",
1958
- strokeLinecap: "round"
1815
+ style: {
1816
+ display: "inline-flex",
1817
+ alignItems: "flex-end",
1818
+ gap: "2px",
1819
+ height: "14px",
1820
+ marginLeft: "3px"
1821
+ },
1822
+ children: [
1823
+ { anim: "gg-b1", dur: "0.6s", delay: "0s" },
1824
+ {
1825
+ anim: "gg-b2",
1826
+ dur: "0.5s",
1827
+ delay: "0.1s"
1828
+ },
1829
+ {
1830
+ anim: "gg-b3",
1831
+ dur: "0.7s",
1832
+ delay: "0.05s"
1833
+ },
1834
+ {
1835
+ anim: "gg-b4",
1836
+ dur: "0.55s",
1837
+ delay: "0.15s"
1838
+ }
1839
+ ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1840
+ "span",
1841
+ {
1842
+ style: {
1843
+ width: "2.5px",
1844
+ height: "4px",
1845
+ borderRadius: "1px",
1846
+ backgroundColor: "#ef4444",
1847
+ animation: `${b.anim} ${b.dur} ease-in-out ${b.delay} infinite`,
1848
+ display: "inline-block",
1849
+ alignSelf: "center"
1850
+ }
1851
+ },
1852
+ i
1853
+ ))
1959
1854
  }
1960
1855
  )
1961
1856
  ]
1962
1857
  }
1963
- )
1964
- }
1965
- )
1966
- ] }),
1967
- transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1968
- "div",
1969
- {
1970
- style: {
1971
- display: "flex",
1972
- alignItems: "center",
1973
- gap: "5px",
1974
- marginTop: "5px",
1975
- fontSize: "11px",
1976
- color: t.text,
1977
- opacity: 0.55,
1978
- userSelect: "none"
1979
- },
1980
- children: [
1981
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
1982
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
1983
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
1984
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
1985
- ] }),
1986
- "Hold Space to speak \u2014 we'll transcribe it"
1987
- ]
1988
- }
1989
- ),
1990
- isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1991
- "div",
1992
- {
1993
- style: {
1994
- display: "flex",
1995
- alignItems: "center",
1996
- gap: "6px",
1997
- marginTop: "6px",
1998
- padding: "6px 8px",
1999
- borderRadius: "6px",
2000
- background: isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.05)",
2001
- border: `1px solid ${t.accent}40`
2002
- },
2003
- children: [
2004
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2005
- "svg",
2006
- {
2007
- width: "12",
2008
- height: "12",
2009
- viewBox: "0 0 24 24",
2010
- fill: "none",
2011
- style: { flexShrink: 0 },
2012
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2013
- "path",
2014
- {
2015
- d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
2016
- stroke: t.accent,
2017
- strokeWidth: "1.5",
2018
- strokeLinejoin: "round"
2019
- }
2020
- )
2021
- }
2022
- ),
2023
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2024
- "span",
2025
- {
2026
- style: {
2027
- fontSize: "11px",
2028
- color: t.textMuted,
2029
- flex: 1
2030
- },
2031
- children: "AI enhanced"
2032
- }
2033
1858
  ),
2034
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1859
+ enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2035
1860
  "button",
2036
1861
  {
2037
1862
  type: "button",
2038
- onClick: () => {
2039
- setIsEnhanced(false);
2040
- setOriginalDescription(null);
1863
+ onClick: async () => {
1864
+ var _a;
1865
+ if (!description.trim() || isEnhancing) return;
1866
+ setIsEnhancing(true);
1867
+ try {
1868
+ const polished = await enhanceText2(
1869
+ description,
1870
+ (_a = screenshots[0]) != null ? _a : null
1871
+ );
1872
+ if (polished && polished !== description) {
1873
+ setOriginalDescription(description);
1874
+ setDescription(polished);
1875
+ setIsEnhanced(true);
1876
+ if (validationError)
1877
+ setValidationError(null);
1878
+ }
1879
+ } finally {
1880
+ setIsEnhancing(false);
1881
+ }
2041
1882
  },
1883
+ disabled: !description.trim() || isEnhancing || isEnhanced,
2042
1884
  style: {
2043
- padding: "2px 8px",
1885
+ position: "absolute",
1886
+ top: "6px",
1887
+ right: "6px",
1888
+ display: "inline-flex",
1889
+ alignItems: "center",
1890
+ gap: "4px",
1891
+ background: t.inputBg,
1892
+ border: "none",
1893
+ padding: "2px 6px",
2044
1894
  borderRadius: "4px",
2045
- border: `1px solid ${t.accent}`,
2046
- background: t.accent,
2047
- color: t.accentText,
1895
+ fontFamily: "inherit",
2048
1896
  fontSize: "11px",
2049
- fontWeight: 600,
2050
- cursor: "pointer",
2051
- fontFamily: "inherit"
1897
+ color: t.textMuted,
1898
+ cursor: !description.trim() || isEnhancing ? "default" : "pointer",
1899
+ opacity: !description.trim() ? 0.5 : 1,
1900
+ zIndex: 1
2052
1901
  },
2053
- children: "Keep"
1902
+ title: "Polish grammar \u2014 preserves your meaning",
1903
+ children: [
1904
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1905
+ "svg",
1906
+ {
1907
+ width: "11",
1908
+ height: "11",
1909
+ viewBox: "0 0 24 24",
1910
+ fill: "none",
1911
+ "aria-hidden": "true",
1912
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1913
+ "path",
1914
+ {
1915
+ 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",
1916
+ stroke: t.textMuted,
1917
+ strokeWidth: "1.5",
1918
+ strokeLinejoin: "round"
1919
+ }
1920
+ )
1921
+ }
1922
+ ),
1923
+ isEnhancing ? "Enhancing..." : "AI enhance"
1924
+ ]
2054
1925
  }
2055
1926
  ),
2056
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1927
+ transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2057
1928
  "button",
2058
1929
  {
2059
1930
  type: "button",
2060
1931
  onClick: () => {
2061
- setDescription(originalDescription);
2062
- setIsEnhanced(false);
2063
- setOriginalDescription(null);
1932
+ void toggleVoice();
2064
1933
  },
1934
+ title: isListening ? "Stop recording" : "Speak your report",
2065
1935
  style: {
2066
- padding: "2px 8px",
2067
- borderRadius: "4px",
2068
- border: `1px solid ${t.inputBorder}`,
1936
+ position: "absolute",
1937
+ bottom: "14px",
1938
+ right: "7px",
1939
+ width: "26px",
1940
+ height: "26px",
1941
+ display: "flex",
1942
+ alignItems: "center",
1943
+ justifyContent: "center",
2069
1944
  background: "transparent",
2070
- color: t.textMuted,
2071
- fontSize: "11px",
2072
- fontWeight: 600,
1945
+ border: `1.5px solid ${isListening ? "#ef4444" : t.inputBorder}`,
1946
+ borderRadius: "6px",
1947
+ color: isListening ? "#ef4444" : t.textMuted,
2073
1948
  cursor: "pointer",
2074
- fontFamily: "inherit"
1949
+ zIndex: 1,
1950
+ padding: 0,
1951
+ transition: "border-color 0.2s ease, color 0.2s ease"
2075
1952
  },
2076
- children: "Restore"
1953
+ children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1954
+ "svg",
1955
+ {
1956
+ width: "12",
1957
+ height: "12",
1958
+ viewBox: "0 0 24 24",
1959
+ fill: "currentColor",
1960
+ "aria-hidden": "true",
1961
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1962
+ "rect",
1963
+ {
1964
+ x: "6",
1965
+ y: "6",
1966
+ width: "12",
1967
+ height: "12",
1968
+ rx: "2"
1969
+ }
1970
+ )
1971
+ }
1972
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1973
+ "svg",
1974
+ {
1975
+ width: "13",
1976
+ height: "13",
1977
+ viewBox: "0 0 24 24",
1978
+ fill: "none",
1979
+ "aria-hidden": "true",
1980
+ children: [
1981
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1982
+ "rect",
1983
+ {
1984
+ x: "9",
1985
+ y: "2",
1986
+ width: "6",
1987
+ height: "12",
1988
+ rx: "3",
1989
+ stroke: "currentColor",
1990
+ strokeWidth: "1.8"
1991
+ }
1992
+ ),
1993
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1994
+ "path",
1995
+ {
1996
+ d: "M5 10a7 7 0 0014 0M12 19v3M9 22h6",
1997
+ stroke: "currentColor",
1998
+ strokeWidth: "1.8",
1999
+ strokeLinecap: "round"
2000
+ }
2001
+ )
2002
+ ]
2003
+ }
2004
+ )
2077
2005
  }
2078
2006
  )
2079
- ]
2080
- }
2081
- ),
2082
- voiceError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2083
- "p",
2084
- {
2085
- style: {
2086
- color: "#ef4444",
2087
- fontSize: "11px",
2088
- marginTop: "4px",
2089
- marginBottom: 0
2090
- },
2091
- children: voiceError
2092
- }
2093
- ),
2094
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
2095
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2096
- "span",
2097
- {
2098
- style: {
2099
- fontSize: "12px",
2100
- color: t.textMuted,
2101
- marginBottom: "6px",
2102
- display: "block",
2103
- fontWeight: 500
2104
- },
2105
- children: [
2106
- "Screenshots",
2107
- screenshots.length > 0 ? ` (${screenshots.length})` : ""
2108
- ]
2109
- }
2110
- ),
2111
- screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2112
- "div",
2113
- {
2114
- style: {
2115
- display: "flex",
2116
- flexWrap: "wrap",
2117
- gap: "8px",
2118
- marginBottom: "8px"
2119
- },
2120
- children: screenshots.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2121
- "div",
2007
+ ] }),
2008
+ transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2009
+ "div",
2010
+ {
2011
+ style: {
2012
+ display: "flex",
2013
+ alignItems: "center",
2014
+ gap: "5px",
2015
+ marginTop: "5px",
2016
+ fontSize: "11px",
2017
+ color: t.text,
2018
+ opacity: 0.55,
2019
+ userSelect: "none"
2020
+ },
2021
+ children: [
2022
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
2023
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
2024
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
2025
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
2026
+ ] }),
2027
+ "Hold Space to speak \u2014 we'll transcribe it"
2028
+ ]
2029
+ }
2030
+ ),
2031
+ isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2032
+ "div",
2033
+ {
2034
+ style: {
2035
+ display: "flex",
2036
+ alignItems: "center",
2037
+ gap: "6px",
2038
+ marginTop: "6px",
2039
+ padding: "6px 8px",
2040
+ borderRadius: "6px",
2041
+ background: isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.05)",
2042
+ border: `1px solid ${t.accent}40`
2043
+ },
2044
+ children: [
2045
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2046
+ "svg",
2047
+ {
2048
+ width: "12",
2049
+ height: "12",
2050
+ viewBox: "0 0 24 24",
2051
+ fill: "none",
2052
+ style: { flexShrink: 0 },
2053
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2054
+ "path",
2055
+ {
2056
+ d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
2057
+ stroke: t.accent,
2058
+ strokeWidth: "1.5",
2059
+ strokeLinejoin: "round"
2060
+ }
2061
+ )
2062
+ }
2063
+ ),
2064
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2065
+ "span",
2066
+ {
2067
+ style: {
2068
+ fontSize: "11px",
2069
+ color: t.textMuted,
2070
+ flex: 1
2071
+ },
2072
+ children: "AI enhanced"
2073
+ }
2074
+ ),
2075
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2076
+ "button",
2077
+ {
2078
+ type: "button",
2079
+ onClick: () => {
2080
+ setIsEnhanced(false);
2081
+ setOriginalDescription(null);
2082
+ },
2083
+ style: {
2084
+ padding: "2px 8px",
2085
+ borderRadius: "4px",
2086
+ border: `1px solid ${t.accent}`,
2087
+ background: t.accent,
2088
+ color: t.accentText,
2089
+ fontSize: "11px",
2090
+ fontWeight: 600,
2091
+ cursor: "pointer",
2092
+ fontFamily: "inherit"
2093
+ },
2094
+ children: "Keep"
2095
+ }
2096
+ ),
2097
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2098
+ "button",
2099
+ {
2100
+ type: "button",
2101
+ onClick: () => {
2102
+ setDescription(originalDescription);
2103
+ setIsEnhanced(false);
2104
+ setOriginalDescription(null);
2105
+ },
2106
+ style: {
2107
+ padding: "2px 8px",
2108
+ borderRadius: "4px",
2109
+ border: `1px solid ${t.inputBorder}`,
2110
+ background: "transparent",
2111
+ color: t.textMuted,
2112
+ fontSize: "11px",
2113
+ fontWeight: 600,
2114
+ cursor: "pointer",
2115
+ fontFamily: "inherit"
2116
+ },
2117
+ children: "Restore"
2118
+ }
2119
+ )
2120
+ ]
2121
+ }
2122
+ ),
2123
+ voiceError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2124
+ "p",
2125
+ {
2126
+ style: {
2127
+ color: "#ef4444",
2128
+ fontSize: "11px",
2129
+ marginTop: "4px",
2130
+ marginBottom: 0
2131
+ },
2132
+ children: voiceError
2133
+ }
2134
+ ),
2135
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
2136
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2137
+ "span",
2122
2138
  {
2123
2139
  style: {
2124
- position: "relative",
2125
- width: "56px",
2126
- height: "56px"
2140
+ fontSize: "12px",
2141
+ color: t.textMuted,
2142
+ marginBottom: "6px",
2143
+ display: "block",
2144
+ fontWeight: 500
2127
2145
  },
2128
2146
  children: [
2129
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2130
- "img",
2131
- {
2132
- src,
2133
- alt: `Screenshot ${i + 1}`,
2134
- onClick: () => setPreviewIndex(i),
2135
- style: {
2136
- width: "100%",
2137
- height: "100%",
2138
- borderRadius: "6px",
2139
- border: `1px solid ${t.border}`,
2140
- objectFit: "cover",
2141
- objectPosition: "top",
2142
- cursor: "zoom-in",
2143
- display: "block"
2144
- }
2145
- }
2146
- ),
2147
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2148
- "button",
2149
- {
2150
- type: "button",
2151
- onClick: () => setScreenshots(
2152
- (prev) => prev.filter((_, idx) => idx !== i)
2147
+ "Screenshots",
2148
+ screenshots.length > 0 ? ` (${screenshots.length})` : ""
2149
+ ]
2150
+ }
2151
+ ),
2152
+ screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2153
+ "div",
2154
+ {
2155
+ style: {
2156
+ display: "flex",
2157
+ flexWrap: "wrap",
2158
+ gap: "8px",
2159
+ marginBottom: "8px"
2160
+ },
2161
+ children: screenshots.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2162
+ "div",
2163
+ {
2164
+ style: {
2165
+ position: "relative",
2166
+ width: "56px",
2167
+ height: "56px"
2168
+ },
2169
+ children: [
2170
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2171
+ "img",
2172
+ {
2173
+ src,
2174
+ alt: `Screenshot ${i + 1}`,
2175
+ onClick: () => setPreviewIndex(i),
2176
+ style: {
2177
+ width: "100%",
2178
+ height: "100%",
2179
+ borderRadius: "6px",
2180
+ border: `1px solid ${t.border}`,
2181
+ objectFit: "cover",
2182
+ objectPosition: "top",
2183
+ cursor: "zoom-in",
2184
+ display: "block"
2185
+ }
2186
+ }
2153
2187
  ),
2154
- "aria-label": `Remove screenshot ${i + 1}`,
2155
- style: {
2156
- position: "absolute",
2157
- top: "-6px",
2158
- right: "-6px",
2159
- width: "17px",
2160
- height: "17px",
2161
- borderRadius: "50%",
2162
- border: "none",
2163
- background: "#ef4444",
2164
- color: "#fff",
2165
- fontSize: "11px",
2166
- lineHeight: 1,
2167
- padding: 0,
2168
- cursor: "pointer",
2169
- display: "flex",
2170
- alignItems: "center",
2171
- justifyContent: "center"
2172
- },
2173
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2174
- "svg",
2188
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2189
+ "button",
2175
2190
  {
2176
- width: "8",
2177
- height: "8",
2178
- viewBox: "0 0 10 10",
2179
- fill: "none",
2191
+ type: "button",
2192
+ onClick: () => setScreenshots(
2193
+ (prev) => prev.filter((_, idx) => idx !== i)
2194
+ ),
2195
+ "aria-label": `Remove screenshot ${i + 1}`,
2196
+ style: {
2197
+ position: "absolute",
2198
+ top: "-6px",
2199
+ right: "-6px",
2200
+ width: "17px",
2201
+ height: "17px",
2202
+ borderRadius: "50%",
2203
+ border: "none",
2204
+ background: "#ef4444",
2205
+ color: "#fff",
2206
+ fontSize: "11px",
2207
+ lineHeight: 1,
2208
+ padding: 0,
2209
+ cursor: "pointer",
2210
+ display: "flex",
2211
+ alignItems: "center",
2212
+ justifyContent: "center"
2213
+ },
2180
2214
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2181
- "path",
2215
+ "svg",
2182
2216
  {
2183
- d: "M1 1L9 9M9 1L1 9",
2184
- stroke: "currentColor",
2185
- strokeWidth: "1.5",
2186
- strokeLinecap: "round"
2217
+ width: "8",
2218
+ height: "8",
2219
+ viewBox: "0 0 10 10",
2220
+ fill: "none",
2221
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2222
+ "path",
2223
+ {
2224
+ d: "M1 1L9 9M9 1L1 9",
2225
+ stroke: "currentColor",
2226
+ strokeWidth: "1.5",
2227
+ strokeLinecap: "round"
2228
+ }
2229
+ )
2187
2230
  }
2188
2231
  )
2189
2232
  }
2190
- )
2191
- }
2192
- ),
2193
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2194
- "button",
2195
- {
2196
- type: "button",
2197
- onClick: () => setAnnotatingIndex(i),
2198
- "aria-label": `Annotate screenshot ${i + 1}`,
2199
- title: "Annotate",
2200
- style: {
2201
- position: "absolute",
2202
- top: "50%",
2203
- left: "50%",
2204
- transform: "translate(-50%, -50%)",
2205
- width: "24px",
2206
- height: "24px",
2207
- borderRadius: "50%",
2208
- border: "none",
2209
- background: t.accent,
2210
- color: t.accentText,
2211
- padding: 0,
2212
- cursor: "pointer",
2213
- display: "flex",
2214
- alignItems: "center",
2215
- justifyContent: "center",
2216
- boxShadow: "0 2px 8px rgba(0,0,0,0.45)"
2217
- },
2218
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2219
- "svg",
2233
+ ),
2234
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2235
+ "button",
2220
2236
  {
2221
- width: "12",
2222
- height: "12",
2223
- viewBox: "0 0 24 24",
2224
- fill: "none",
2237
+ type: "button",
2238
+ onClick: () => setAnnotatingIndex(i),
2239
+ "aria-label": `Annotate screenshot ${i + 1}`,
2240
+ title: "Annotate",
2241
+ style: {
2242
+ position: "absolute",
2243
+ top: "50%",
2244
+ left: "50%",
2245
+ transform: "translate(-50%, -50%)",
2246
+ width: "24px",
2247
+ height: "24px",
2248
+ borderRadius: "50%",
2249
+ border: "none",
2250
+ background: t.accent,
2251
+ color: t.accentText,
2252
+ padding: 0,
2253
+ cursor: "pointer",
2254
+ display: "flex",
2255
+ alignItems: "center",
2256
+ justifyContent: "center",
2257
+ boxShadow: "0 2px 8px rgba(0,0,0,0.45)"
2258
+ },
2225
2259
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2226
- "path",
2260
+ "svg",
2227
2261
  {
2228
- d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
2229
- stroke: "currentColor",
2230
- strokeWidth: "2.2",
2231
- strokeLinecap: "round",
2232
- strokeLinejoin: "round"
2262
+ width: "12",
2263
+ height: "12",
2264
+ viewBox: "0 0 24 24",
2265
+ fill: "none",
2266
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2267
+ "path",
2268
+ {
2269
+ d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
2270
+ stroke: "currentColor",
2271
+ strokeWidth: "2.2",
2272
+ strokeLinecap: "round",
2273
+ strokeLinejoin: "round"
2274
+ }
2275
+ )
2233
2276
  }
2234
2277
  )
2235
2278
  }
2236
2279
  )
2280
+ ]
2281
+ },
2282
+ i
2283
+ ))
2284
+ }
2285
+ ),
2286
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2287
+ "div",
2288
+ {
2289
+ onClick: () => {
2290
+ var _a;
2291
+ return (_a = fileInputRef.current) == null ? void 0 : _a.click();
2292
+ },
2293
+ onDrop: (e) => {
2294
+ e.preventDefault();
2295
+ setScreenshotDragOver(false);
2296
+ const files = Array.from(
2297
+ e.dataTransfer.files
2298
+ ).filter((f) => f.type.startsWith("image/"));
2299
+ files.forEach((file) => {
2300
+ const reader = new FileReader();
2301
+ reader.onload = () => setScreenshots((prev) => [
2302
+ ...prev,
2303
+ reader.result
2304
+ ]);
2305
+ reader.readAsDataURL(file);
2306
+ });
2307
+ },
2308
+ onDragOver: (e) => {
2309
+ e.preventDefault();
2310
+ setScreenshotDragOver(true);
2311
+ },
2312
+ onDragLeave: () => setScreenshotDragOver(false),
2313
+ style: {
2314
+ border: `1.5px dashed ${screenshotDragOver ? t.accent : t.inputBorder}`,
2315
+ borderRadius: "8px",
2316
+ padding: screenshots.length > 0 ? "8px 12px" : "18px 12px",
2317
+ textAlign: "center",
2318
+ cursor: "pointer",
2319
+ background: screenshotDragOver ? isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.04)" : "transparent",
2320
+ transition: "border-color 0.15s ease, background 0.15s ease"
2321
+ },
2322
+ children: screenshots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2323
+ "p",
2324
+ {
2325
+ style: {
2326
+ margin: 0,
2327
+ fontSize: "11px",
2328
+ fontWeight: 500,
2329
+ color: t.textMuted
2330
+ },
2331
+ children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
2332
+ }
2333
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2334
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2335
+ "svg",
2336
+ {
2337
+ width: "22",
2338
+ height: "22",
2339
+ viewBox: "0 0 24 24",
2340
+ fill: "none",
2341
+ style: {
2342
+ margin: "0 auto 6px",
2343
+ display: "block",
2344
+ opacity: 0.45
2345
+ },
2346
+ children: [
2347
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2348
+ "rect",
2349
+ {
2350
+ x: "3",
2351
+ y: "3",
2352
+ width: "18",
2353
+ height: "18",
2354
+ rx: "2",
2355
+ stroke: t.textMuted,
2356
+ strokeWidth: "1.5"
2357
+ }
2358
+ ),
2359
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2360
+ "circle",
2361
+ {
2362
+ cx: "8.5",
2363
+ cy: "8.5",
2364
+ r: "1.5",
2365
+ stroke: t.textMuted,
2366
+ strokeWidth: "1.5"
2367
+ }
2368
+ ),
2369
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2370
+ "path",
2371
+ {
2372
+ d: "M21 15l-5-5L5 21",
2373
+ stroke: t.textMuted,
2374
+ strokeWidth: "1.5",
2375
+ strokeLinecap: "round",
2376
+ strokeLinejoin: "round"
2377
+ }
2378
+ )
2379
+ ]
2380
+ }
2381
+ ),
2382
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2383
+ "p",
2384
+ {
2385
+ style: {
2386
+ margin: 0,
2387
+ fontSize: "12px",
2388
+ fontWeight: 600,
2389
+ color: t.text
2390
+ },
2391
+ children: screenshotDragOver ? "Drop to attach" : "Add screenshots"
2392
+ }
2393
+ ),
2394
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2395
+ "p",
2396
+ {
2397
+ style: {
2398
+ margin: "3px 0 0",
2399
+ fontSize: "11px",
2400
+ color: t.textMuted
2401
+ },
2402
+ children: "Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
2237
2403
  }
2238
2404
  )
2239
- ]
2240
- },
2241
- i
2242
- ))
2243
- }
2244
- ),
2245
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2246
- "div",
2247
- {
2248
- onClick: () => {
2249
- var _a;
2250
- return (_a = fileInputRef.current) == null ? void 0 : _a.click();
2251
- },
2252
- onDrop: (e) => {
2253
- e.preventDefault();
2254
- setScreenshotDragOver(false);
2255
- const files = Array.from(
2256
- e.dataTransfer.files
2257
- ).filter((f) => f.type.startsWith("image/"));
2258
- files.forEach((file) => {
2259
- const reader = new FileReader();
2260
- reader.onload = () => setScreenshots((prev) => [
2261
- ...prev,
2262
- reader.result
2263
- ]);
2264
- reader.readAsDataURL(file);
2265
- });
2266
- },
2267
- onDragOver: (e) => {
2268
- e.preventDefault();
2269
- setScreenshotDragOver(true);
2270
- },
2271
- onDragLeave: () => setScreenshotDragOver(false),
2272
- style: {
2273
- border: `1.5px dashed ${screenshotDragOver ? t.accent : t.inputBorder}`,
2274
- borderRadius: "8px",
2275
- padding: screenshots.length > 0 ? "8px 12px" : "18px 12px",
2276
- textAlign: "center",
2277
- cursor: "pointer",
2278
- background: screenshotDragOver ? isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.04)" : "transparent",
2279
- transition: "border-color 0.15s ease, background 0.15s ease"
2280
- },
2281
- children: screenshots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2282
- "p",
2405
+ ] })
2406
+ }
2407
+ )
2408
+ ] }),
2409
+ showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
2410
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2411
+ "span",
2283
2412
  {
2284
2413
  style: {
2285
- margin: 0,
2286
- fontSize: "11px",
2287
- fontWeight: 500,
2288
- color: t.textMuted
2414
+ fontSize: "12px",
2415
+ color: t.textMuted,
2416
+ marginBottom: "6px",
2417
+ display: "block"
2289
2418
  },
2290
- children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
2419
+ children: "Severity"
2291
2420
  }
2292
- ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2293
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2294
- "svg",
2295
- {
2296
- width: "22",
2297
- height: "22",
2298
- viewBox: "0 0 24 24",
2299
- fill: "none",
2300
- style: {
2301
- margin: "0 auto 6px",
2302
- display: "block",
2303
- opacity: 0.45
2304
- },
2305
- children: [
2306
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2307
- "rect",
2308
- {
2309
- x: "3",
2310
- y: "3",
2311
- width: "18",
2312
- height: "18",
2313
- rx: "2",
2314
- stroke: t.textMuted,
2315
- strokeWidth: "1.5"
2316
- }
2317
- ),
2318
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2319
- "circle",
2320
- {
2321
- cx: "8.5",
2322
- cy: "8.5",
2323
- r: "1.5",
2324
- stroke: t.textMuted,
2325
- strokeWidth: "1.5"
2326
- }
2327
- ),
2328
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2329
- "path",
2330
- {
2331
- d: "M21 15l-5-5L5 21",
2332
- stroke: t.textMuted,
2333
- strokeWidth: "1.5",
2334
- strokeLinecap: "round",
2335
- strokeLinejoin: "round"
2336
- }
2337
- )
2338
- ]
2339
- }
2340
- ),
2341
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2342
- "p",
2343
- {
2344
- style: {
2345
- margin: 0,
2346
- fontSize: "12px",
2347
- fontWeight: 600,
2348
- color: t.text
2349
- },
2350
- children: screenshotDragOver ? "Drop to attach" : "Add screenshots"
2351
- }
2352
- ),
2353
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2354
- "p",
2355
- {
2356
- style: {
2357
- margin: "3px 0 0",
2358
- fontSize: "11px",
2359
- color: t.textMuted
2360
- },
2361
- children: "Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
2362
- }
2363
- )
2364
- ] })
2365
- }
2366
- )
2367
- ] }),
2368
- showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
2369
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2370
- "span",
2371
- {
2372
- style: {
2373
- fontSize: "12px",
2374
- color: t.textMuted,
2375
- marginBottom: "6px",
2376
- display: "block"
2377
- },
2378
- children: "Severity"
2379
- }
2380
- ),
2381
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2382
- "button",
2383
- {
2384
- type: "button",
2385
- onClick: () => setSeverity(s),
2386
- style: {
2387
- flex: 1,
2388
- padding: "6px 0",
2389
- borderRadius: "6px",
2390
- border: `1px solid ${severity === s ? t.accent : t.inputBorder}`,
2391
- background: severity === s ? t.accent : "transparent",
2392
- color: severity === s ? t.accentText : t.text,
2393
- fontSize: "12px",
2394
- fontWeight: 600,
2395
- cursor: "pointer",
2396
- fontFamily: "inherit",
2397
- textTransform: "capitalize",
2398
- transition: "all 0.15s ease"
2399
- },
2400
- children: s
2401
- },
2402
- s
2403
- )) })
2404
- ] }),
2405
- validationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2406
- "p",
2407
- {
2408
- style: {
2409
- color: "#ef4444",
2410
- fontSize: "12px",
2411
- marginTop: "6px"
2412
- },
2413
- children: validationError
2414
- }
2415
- ),
2416
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2417
- "button",
2418
- {
2419
- type: "button",
2420
- onClick: handleSubmit,
2421
- disabled: !description.trim() || isSubmitting,
2422
- style: {
2423
- marginTop: "12px",
2424
- width: "100%",
2425
- padding: "10px",
2426
- borderRadius: "8px",
2427
- border: "none",
2428
- backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
2429
- color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
2430
- fontSize: "14px",
2431
- fontWeight: 600,
2432
- cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
2433
- fontFamily: "inherit",
2434
- transition: "background-color 0.15s ease"
2435
- },
2436
- children: isSubmitting ? "Sending..." : "Send Report"
2437
- }
2438
- )
2439
- ] })
2440
- ] }) }),
2421
+ ),
2422
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2423
+ "button",
2424
+ {
2425
+ type: "button",
2426
+ onClick: () => setSeverity(s),
2427
+ style: {
2428
+ flex: 1,
2429
+ padding: "6px 0",
2430
+ borderRadius: "6px",
2431
+ border: `1px solid ${severity === s ? t.accent : t.inputBorder}`,
2432
+ background: severity === s ? t.accent : "transparent",
2433
+ color: severity === s ? t.accentText : t.text,
2434
+ fontSize: "12px",
2435
+ fontWeight: 600,
2436
+ cursor: "pointer",
2437
+ fontFamily: "inherit",
2438
+ textTransform: "capitalize",
2439
+ transition: "all 0.15s ease"
2440
+ },
2441
+ children: s
2442
+ },
2443
+ s
2444
+ )) })
2445
+ ] }),
2446
+ validationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2447
+ "p",
2448
+ {
2449
+ style: {
2450
+ color: "#ef4444",
2451
+ fontSize: "12px",
2452
+ marginTop: "6px"
2453
+ },
2454
+ children: validationError
2455
+ }
2456
+ ),
2457
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2458
+ "button",
2459
+ {
2460
+ type: "button",
2461
+ onClick: handleSubmit,
2462
+ disabled: !description.trim() || isSubmitting,
2463
+ style: {
2464
+ marginTop: "12px",
2465
+ width: "100%",
2466
+ padding: "10px",
2467
+ borderRadius: "8px",
2468
+ border: "none",
2469
+ backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
2470
+ color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
2471
+ fontSize: "14px",
2472
+ fontWeight: 600,
2473
+ cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
2474
+ fontFamily: "inherit",
2475
+ transition: "background-color 0.15s ease"
2476
+ },
2477
+ children: isSubmitting ? "Sending..." : "Send Report"
2478
+ }
2479
+ )
2480
+ ] })
2481
+ ] })
2482
+ }
2483
+ ),
2441
2484
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2442
2485
  "div",
2443
2486
  {