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