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