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