clio-design-system 0.1.0 → 0.3.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.
- package/README.md +16 -0
- package/dist/index.cjs +172 -116
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -5
- package/dist/index.d.ts +9 -5
- package/dist/index.js +129 -83
- package/dist/index.js.map +1 -1
- package/package.json +5 -1
- package/styles/styles.css +3 -0
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.ts
|
|
@@ -1514,22 +1524,68 @@ function CardHeader({
|
|
|
1514
1524
|
] });
|
|
1515
1525
|
}
|
|
1516
1526
|
|
|
1517
|
-
// src/
|
|
1527
|
+
// src/internal/MathText.tsx
|
|
1528
|
+
var import_react9 = require("react");
|
|
1529
|
+
var import_katex = __toESM(require("katex"), 1);
|
|
1518
1530
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1531
|
+
function katexHtml(tex, displayMode) {
|
|
1532
|
+
return import_katex.default.renderToString(tex, { displayMode, throwOnError: false });
|
|
1533
|
+
}
|
|
1534
|
+
var SEGMENT = /(\$\$[\s\S]+?\$\$|\$[^$\n]+?\$)/g;
|
|
1535
|
+
function MathText({ text }) {
|
|
1536
|
+
const parts = text.split(SEGMENT);
|
|
1537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: parts.map((part, i) => {
|
|
1538
|
+
if (part.length >= 4 && part.startsWith("$$") && part.endsWith("$$")) {
|
|
1539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1540
|
+
"span",
|
|
1541
|
+
{
|
|
1542
|
+
dangerouslySetInnerHTML: { __html: katexHtml(part.slice(2, -2), true) }
|
|
1543
|
+
},
|
|
1544
|
+
i
|
|
1545
|
+
);
|
|
1546
|
+
}
|
|
1547
|
+
if (part.length >= 2 && part.startsWith("$") && part.endsWith("$")) {
|
|
1548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1549
|
+
"span",
|
|
1550
|
+
{
|
|
1551
|
+
dangerouslySetInnerHTML: { __html: katexHtml(part.slice(1, -1), false) }
|
|
1552
|
+
},
|
|
1553
|
+
i
|
|
1554
|
+
);
|
|
1555
|
+
}
|
|
1556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react9.Fragment, { children: part }, i);
|
|
1557
|
+
}) });
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
// src/components/TextBlock/TextBlock.tsx
|
|
1561
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1519
1562
|
function TextBlock({ text, style, ...rest }) {
|
|
1520
|
-
return /* @__PURE__ */ (0,
|
|
1563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { ...rest, style: { margin: "18px 0", color: "var(--color-text-body)", textWrap: "pretty", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MathText, { text }) });
|
|
1521
1564
|
}
|
|
1522
1565
|
|
|
1523
1566
|
// src/components/EquationBlock/EquationBlock.tsx
|
|
1524
|
-
var
|
|
1567
|
+
var import_react10 = require("react");
|
|
1568
|
+
var import_katex2 = __toESM(require("katex"), 1);
|
|
1569
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1525
1570
|
function EquationBlock({ tex, style, ...rest }) {
|
|
1526
|
-
|
|
1571
|
+
const html = (0, import_react10.useMemo)(
|
|
1572
|
+
() => import_katex2.default.renderToString(tex, { displayMode: true, throwOnError: false }),
|
|
1573
|
+
[tex]
|
|
1574
|
+
);
|
|
1575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1576
|
+
"div",
|
|
1577
|
+
{
|
|
1578
|
+
...rest,
|
|
1579
|
+
style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style },
|
|
1580
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
1581
|
+
}
|
|
1582
|
+
);
|
|
1527
1583
|
}
|
|
1528
1584
|
|
|
1529
1585
|
// src/components/IntuitionCallout/IntuitionCallout.tsx
|
|
1530
|
-
var
|
|
1586
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1531
1587
|
function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
1532
|
-
return /* @__PURE__ */ (0,
|
|
1588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1533
1589
|
"div",
|
|
1534
1590
|
{
|
|
1535
1591
|
...rest,
|
|
@@ -1544,20 +1600,20 @@ function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
|
1544
1600
|
...style
|
|
1545
1601
|
},
|
|
1546
1602
|
children: [
|
|
1547
|
-
/* @__PURE__ */ (0,
|
|
1548
|
-
text
|
|
1603
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { display: "block", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.12em", color: "var(--color-warning)", marginBottom: 6 }, children: label }),
|
|
1604
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MathText, { text })
|
|
1549
1605
|
]
|
|
1550
1606
|
}
|
|
1551
1607
|
);
|
|
1552
1608
|
}
|
|
1553
1609
|
|
|
1554
1610
|
// src/components/WalkthroughCard/WalkthroughCard.tsx
|
|
1555
|
-
var
|
|
1611
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1556
1612
|
function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...rest }) {
|
|
1557
1613
|
const visible = steps.slice(0, currentStep + 1);
|
|
1558
1614
|
const atStart = currentStep === 0;
|
|
1559
1615
|
const atEnd = currentStep === steps.length - 1;
|
|
1560
|
-
return /* @__PURE__ */ (0,
|
|
1616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1561
1617
|
"div",
|
|
1562
1618
|
{
|
|
1563
1619
|
...rest,
|
|
@@ -1570,19 +1626,19 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1570
1626
|
...style
|
|
1571
1627
|
},
|
|
1572
1628
|
children: [
|
|
1573
|
-
/* @__PURE__ */ (0,
|
|
1574
|
-
/* @__PURE__ */ (0,
|
|
1575
|
-
/* @__PURE__ */ (0,
|
|
1576
|
-
/* @__PURE__ */ (0,
|
|
1629
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }, children: [
|
|
1630
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10 }, children: [
|
|
1631
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "WALKTHROUGH" }),
|
|
1632
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1577
1633
|
] }),
|
|
1578
|
-
/* @__PURE__ */ (0,
|
|
1634
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-text-faint)", whiteSpace: "nowrap" }, children: [
|
|
1579
1635
|
"STEP ",
|
|
1580
1636
|
currentStep + 1,
|
|
1581
1637
|
" OF ",
|
|
1582
1638
|
steps.length
|
|
1583
1639
|
] })
|
|
1584
1640
|
] }),
|
|
1585
|
-
/* @__PURE__ */ (0,
|
|
1641
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "aria-live": "polite", children: visible.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1586
1642
|
"div",
|
|
1587
1643
|
{
|
|
1588
1644
|
style: {
|
|
@@ -1594,7 +1650,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1594
1650
|
opacity: i === currentStep ? 1 : 0.65
|
|
1595
1651
|
},
|
|
1596
1652
|
children: [
|
|
1597
|
-
/* @__PURE__ */ (0,
|
|
1653
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1598
1654
|
"span",
|
|
1599
1655
|
{
|
|
1600
1656
|
style: {
|
|
@@ -1613,16 +1669,16 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1613
1669
|
children: i + 1
|
|
1614
1670
|
}
|
|
1615
1671
|
),
|
|
1616
|
-
/* @__PURE__ */ (0,
|
|
1617
|
-
/* @__PURE__ */ (0,
|
|
1618
|
-
/* @__PURE__ */ (0,
|
|
1672
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
1673
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { textAlign: "center", fontSize: 15, color: "var(--color-text-primary)" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MathText, { text: `$$${s.tex}$$` }) }),
|
|
1674
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: "var(--font-size-base)", color: "var(--color-text-muted)", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MathText, { text: s.note }) })
|
|
1619
1675
|
] })
|
|
1620
1676
|
]
|
|
1621
1677
|
},
|
|
1622
1678
|
i
|
|
1623
1679
|
)) }),
|
|
1624
|
-
/* @__PURE__ */ (0,
|
|
1625
|
-
/* @__PURE__ */ (0,
|
|
1680
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 }, children: [
|
|
1681
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1626
1682
|
"button",
|
|
1627
1683
|
{
|
|
1628
1684
|
type: "button",
|
|
@@ -1641,7 +1697,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1641
1697
|
children: "\u2039 Back"
|
|
1642
1698
|
}
|
|
1643
1699
|
),
|
|
1644
|
-
/* @__PURE__ */ (0,
|
|
1700
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1645
1701
|
"button",
|
|
1646
1702
|
{
|
|
1647
1703
|
type: "button",
|
|
@@ -1667,15 +1723,15 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1667
1723
|
}
|
|
1668
1724
|
|
|
1669
1725
|
// src/components/CodeCard/CodeCard.tsx
|
|
1670
|
-
var
|
|
1726
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1671
1727
|
function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...rest }) {
|
|
1672
|
-
return /* @__PURE__ */ (0,
|
|
1673
|
-
/* @__PURE__ */ (0,
|
|
1674
|
-
/* @__PURE__ */ (0,
|
|
1675
|
-
/* @__PURE__ */ (0,
|
|
1676
|
-
/* @__PURE__ */ (0,
|
|
1677
|
-
/* @__PURE__ */ (0,
|
|
1678
|
-
/* @__PURE__ */ (0,
|
|
1728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...rest, style: { background: "var(--color-surface-code)", borderRadius: "var(--radius-card)", margin: "24px 0", overflow: "hidden", ...style }, children: [
|
|
1729
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, padding: "12px 18px", minWidth: 0 }, children: [
|
|
1730
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-code-green)", whiteSpace: "nowrap", flexShrink: 0 }, children: "CODE" }),
|
|
1731
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "#EDEBE3", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title }),
|
|
1732
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-500)", whiteSpace: "nowrap", flexShrink: 0 }, children: lang }),
|
|
1733
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { flex: 1, minWidth: 4 } }),
|
|
1734
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1679
1735
|
"button",
|
|
1680
1736
|
{
|
|
1681
1737
|
type: "button",
|
|
@@ -1685,12 +1741,12 @@ function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...res
|
|
|
1685
1741
|
}
|
|
1686
1742
|
)
|
|
1687
1743
|
] }),
|
|
1688
|
-
/* @__PURE__ */ (0,
|
|
1744
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("pre", { style: { margin: 0, padding: "4px 20px 18px", overflowX: "auto", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-base)", lineHeight: "var(--line-height-relaxed)", color: "var(--color-text-on-code)", whiteSpace: "pre-wrap" }, children: code })
|
|
1689
1745
|
] });
|
|
1690
1746
|
}
|
|
1691
1747
|
|
|
1692
1748
|
// src/components/TableCard/TableCard.tsx
|
|
1693
|
-
var
|
|
1749
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1694
1750
|
var srOnly = {
|
|
1695
1751
|
position: "absolute",
|
|
1696
1752
|
width: 1,
|
|
@@ -1703,18 +1759,18 @@ var srOnly = {
|
|
|
1703
1759
|
border: 0
|
|
1704
1760
|
};
|
|
1705
1761
|
function TableCard({ title, header, rows, style, ...rest }) {
|
|
1706
|
-
return /* @__PURE__ */ (0,
|
|
1762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1707
1763
|
"div",
|
|
1708
1764
|
{
|
|
1709
1765
|
...rest,
|
|
1710
1766
|
style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 18px", ...style },
|
|
1711
1767
|
children: [
|
|
1712
|
-
/* @__PURE__ */ (0,
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
1714
|
-
/* @__PURE__ */ (0,
|
|
1768
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1769
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "COMPARE" }),
|
|
1770
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1715
1771
|
] }),
|
|
1716
|
-
/* @__PURE__ */ (0,
|
|
1717
|
-
/* @__PURE__ */ (0,
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "var(--font-size-base)" }, children: [
|
|
1773
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { children: header.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1718
1774
|
"th",
|
|
1719
1775
|
{
|
|
1720
1776
|
scope: "col",
|
|
@@ -1727,11 +1783,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1727
1783
|
fontSize: i === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1728
1784
|
borderBottom: "1px solid var(--border-subtle)"
|
|
1729
1785
|
},
|
|
1730
|
-
children: h
|
|
1786
|
+
children: h ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MathText, { text: h }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: srOnly, children: "Row label" })
|
|
1731
1787
|
},
|
|
1732
1788
|
i
|
|
1733
1789
|
)) }) }),
|
|
1734
|
-
/* @__PURE__ */ (0,
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { children: r.map((c, ci) => {
|
|
1735
1791
|
const cellStyle = {
|
|
1736
1792
|
padding: "8px 10px",
|
|
1737
1793
|
color: ci === 0 ? "var(--color-text-muted)" : "var(--color-text-secondary)",
|
|
@@ -1739,7 +1795,7 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1739
1795
|
fontSize: ci === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1740
1796
|
borderBottom: ri === rows.length - 1 ? "none" : "1px solid var(--border-subtle)"
|
|
1741
1797
|
};
|
|
1742
|
-
return ci === 0 ? /* @__PURE__ */ (0,
|
|
1798
|
+
return ci === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { scope: "row", style: { ...cellStyle, textAlign: "left", fontWeight: 400 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MathText, { text: c }) }, ci) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("td", { style: cellStyle, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MathText, { text: c }) }, ci);
|
|
1743
1799
|
}) }, ri)) })
|
|
1744
1800
|
] })
|
|
1745
1801
|
]
|
|
@@ -1748,11 +1804,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1748
1804
|
}
|
|
1749
1805
|
|
|
1750
1806
|
// src/components/QuizCard/QuizCard.tsx
|
|
1751
|
-
var
|
|
1752
|
-
var
|
|
1807
|
+
var import_react11 = require("react");
|
|
1808
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1753
1809
|
function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
|
|
1754
|
-
const answerId = (0,
|
|
1755
|
-
return /* @__PURE__ */ (0,
|
|
1810
|
+
const answerId = (0, import_react11.useId)();
|
|
1811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1756
1812
|
"div",
|
|
1757
1813
|
{
|
|
1758
1814
|
...rest,
|
|
@@ -1765,12 +1821,12 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1765
1821
|
...style
|
|
1766
1822
|
},
|
|
1767
1823
|
children: [
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
|
|
1825
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "CHECKPOINT" }),
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap" }, children: "Still with it?" })
|
|
1771
1827
|
] }),
|
|
1772
|
-
/* @__PURE__ */ (0,
|
|
1773
|
-
/* @__PURE__ */ (0,
|
|
1828
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { style: { margin: "0 0 10px", fontSize: "var(--font-size-lg)", color: "var(--color-text-body)" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MathText, { text: question }) }),
|
|
1829
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1774
1830
|
"button",
|
|
1775
1831
|
{
|
|
1776
1832
|
type: "button",
|
|
@@ -1781,7 +1837,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1781
1837
|
children: quizLabel
|
|
1782
1838
|
}
|
|
1783
1839
|
),
|
|
1784
|
-
/* @__PURE__ */ (0,
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1785
1841
|
"button",
|
|
1786
1842
|
{
|
|
1787
1843
|
type: "button",
|
|
@@ -1790,7 +1846,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1790
1846
|
children: addFlashLabel
|
|
1791
1847
|
}
|
|
1792
1848
|
),
|
|
1793
|
-
answerOpen && /* @__PURE__ */ (0,
|
|
1849
|
+
answerOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1794
1850
|
"div",
|
|
1795
1851
|
{
|
|
1796
1852
|
id: answerId,
|
|
@@ -1803,7 +1859,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1803
1859
|
fontSize: "var(--font-size-base)",
|
|
1804
1860
|
color: "var(--color-text-secondary)"
|
|
1805
1861
|
},
|
|
1806
|
-
children: answer
|
|
1862
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MathText, { text: answer })
|
|
1807
1863
|
}
|
|
1808
1864
|
)
|
|
1809
1865
|
]
|
|
@@ -1812,27 +1868,27 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1812
1868
|
}
|
|
1813
1869
|
|
|
1814
1870
|
// src/components/ImageCard/ImageCard.tsx
|
|
1815
|
-
var
|
|
1871
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1816
1872
|
function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230, caption, style, ...rest }) {
|
|
1817
|
-
return /* @__PURE__ */ (0,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1819
|
-
/* @__PURE__ */ (0,
|
|
1820
|
-
/* @__PURE__ */ (0,
|
|
1873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 20px", ...style }, children: [
|
|
1874
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1875
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: label }),
|
|
1876
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1821
1877
|
] }),
|
|
1822
|
-
/* @__PURE__ */ (0,
|
|
1823
|
-
caption && /* @__PURE__ */ (0,
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("image-slot", { id: slotId, shape: "rounded", radius: "10", placeholder, style: { width: "100%", height, display: "block" } }),
|
|
1879
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { marginTop: 8, fontSize: "var(--font-size-md)", color: "var(--color-text-muted)", textAlign: "center" }, children: caption })
|
|
1824
1880
|
] });
|
|
1825
1881
|
}
|
|
1826
1882
|
|
|
1827
1883
|
// src/components/RelatedCard/RelatedCard.tsx
|
|
1828
|
-
var
|
|
1829
|
-
var
|
|
1884
|
+
var import_react12 = require("react");
|
|
1885
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1830
1886
|
function RelatedCard({ items, style, ...rest }) {
|
|
1831
|
-
return /* @__PURE__ */ (0,
|
|
1832
|
-
/* @__PURE__ */ (0,
|
|
1833
|
-
/* @__PURE__ */ (0,
|
|
1887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "RELATED" }) }),
|
|
1889
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((it, i) => {
|
|
1834
1890
|
const Element = it.as ?? (it.href ? "a" : "button");
|
|
1835
|
-
return /* @__PURE__ */ (0,
|
|
1891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: (0, import_react12.createElement)(
|
|
1836
1892
|
Element,
|
|
1837
1893
|
{
|
|
1838
1894
|
type: Element === "button" ? "button" : void 0,
|
|
@@ -1855,35 +1911,35 @@ function RelatedCard({ items, style, ...rest }) {
|
|
|
1855
1911
|
textDecoration: "none"
|
|
1856
1912
|
}
|
|
1857
1913
|
},
|
|
1858
|
-
/* @__PURE__ */ (0,
|
|
1859
|
-
/* @__PURE__ */ (0,
|
|
1860
|
-
/* @__PURE__ */ (0,
|
|
1914
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: it.color, flexShrink: 0 } }),
|
|
1915
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { flex: 1 }, children: it.label }),
|
|
1916
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" })
|
|
1861
1917
|
) }, i);
|
|
1862
1918
|
}) })
|
|
1863
1919
|
] });
|
|
1864
1920
|
}
|
|
1865
1921
|
|
|
1866
1922
|
// src/components/ReferencesCard/ReferencesCard.tsx
|
|
1867
|
-
var
|
|
1923
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1868
1924
|
function ReferencesCard({ items, style, ...rest }) {
|
|
1869
|
-
return /* @__PURE__ */ (0,
|
|
1870
|
-
/* @__PURE__ */ (0,
|
|
1871
|
-
/* @__PURE__ */ (0,
|
|
1872
|
-
/* @__PURE__ */ (0,
|
|
1873
|
-
/* @__PURE__ */ (0,
|
|
1925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
|
|
1926
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "REFERENCES" }) }),
|
|
1927
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { style: { display: "flex", alignItems: "baseline", gap: 8, fontSize: "var(--font-size-base)" }, children: [
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" }),
|
|
1929
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: { color: "var(--color-text-secondary)" }, children: t })
|
|
1874
1930
|
] }, i)) })
|
|
1875
1931
|
] });
|
|
1876
1932
|
}
|
|
1877
1933
|
|
|
1878
1934
|
// src/components/AnnotationPanel/AnnotationPanel.tsx
|
|
1879
|
-
var
|
|
1880
|
-
var
|
|
1935
|
+
var import_react13 = require("react");
|
|
1936
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1881
1937
|
function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
|
|
1882
|
-
const labelId = (0,
|
|
1938
|
+
const labelId = (0, import_react13.useId)();
|
|
1883
1939
|
if (!open) return null;
|
|
1884
|
-
return /* @__PURE__ */ (0,
|
|
1885
|
-
/* @__PURE__ */ (0,
|
|
1886
|
-
/* @__PURE__ */ (0,
|
|
1940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { marginTop: 10, background: "var(--color-annotation-fill)", borderLeft: "3px solid var(--color-annotation-border)", borderRadius: "0 8px 8px 0", padding: "10px 14px" }, children: [
|
|
1941
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: labelId, style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.14em", color: "var(--color-annotation-label)", marginBottom: 5 }, children: "MY NOTE" }),
|
|
1942
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1887
1943
|
"textarea",
|
|
1888
1944
|
{
|
|
1889
1945
|
"aria-labelledby": labelId,
|
|
@@ -1899,7 +1955,7 @@ function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own ta
|
|
|
1899
1955
|
}
|
|
1900
1956
|
|
|
1901
1957
|
// src/components/AnnotationToggle/AnnotationToggle.tsx
|
|
1902
|
-
var
|
|
1958
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1903
1959
|
function AnnotationToggle({
|
|
1904
1960
|
hasText = false,
|
|
1905
1961
|
open = false,
|
|
@@ -1913,7 +1969,7 @@ function AnnotationToggle({
|
|
|
1913
1969
|
}) {
|
|
1914
1970
|
const { active, interactionHandlers } = useHover({ onMouseEnter, onMouseLeave, onFocus, onBlur });
|
|
1915
1971
|
const visible = hot || open || hasText || active;
|
|
1916
|
-
return /* @__PURE__ */ (0,
|
|
1972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1917
1973
|
"button",
|
|
1918
1974
|
{
|
|
1919
1975
|
type: "button",
|
|
@@ -1938,7 +1994,7 @@ function AnnotationToggle({
|
|
|
1938
1994
|
}
|
|
1939
1995
|
|
|
1940
1996
|
// src/components/McqOption/McqOption.tsx
|
|
1941
|
-
var
|
|
1997
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1942
1998
|
var STATE_TEXT = { correct: "Correct", wrong: "Incorrect" };
|
|
1943
1999
|
function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
1944
2000
|
let border = "var(--border-medium)";
|
|
@@ -1957,7 +2013,7 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1957
2013
|
color = "var(--color-danger)";
|
|
1958
2014
|
mark = "\u2715";
|
|
1959
2015
|
}
|
|
1960
|
-
return /* @__PURE__ */ (0,
|
|
2016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
1961
2017
|
"button",
|
|
1962
2018
|
{
|
|
1963
2019
|
type: "button",
|
|
@@ -1981,10 +2037,10 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1981
2037
|
boxSizing: "border-box"
|
|
1982
2038
|
},
|
|
1983
2039
|
children: [
|
|
1984
|
-
/* @__PURE__ */ (0,
|
|
1985
|
-
mark && /* @__PURE__ */ (0,
|
|
1986
|
-
/* @__PURE__ */ (0,
|
|
1987
|
-
/* @__PURE__ */ (0,
|
|
2040
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { flex: 1, minWidth: 0, textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MathText, { text: label }) }),
|
|
2041
|
+
mark && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { style: { fontWeight: 700, flexShrink: 0 }, children: [
|
|
2042
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": "true", children: mark }),
|
|
2043
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
1988
2044
|
"span",
|
|
1989
2045
|
{
|
|
1990
2046
|
style: {
|
|
@@ -2013,12 +2069,12 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
2013
2069
|
}
|
|
2014
2070
|
|
|
2015
2071
|
// src/components/FillBlankInput/FillBlankInput.tsx
|
|
2016
|
-
var
|
|
2072
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2017
2073
|
function FillBlankInput({ value, onChange, checked = false, correct = false, onCheck, resultLabel, style, ...rest }) {
|
|
2018
2074
|
const borderColor = checked ? correct ? "var(--color-success-border)" : "var(--color-danger-border)" : "var(--border-medium)";
|
|
2019
|
-
return /* @__PURE__ */ (0,
|
|
2020
|
-
/* @__PURE__ */ (0,
|
|
2021
|
-
/* @__PURE__ */ (0,
|
|
2075
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...rest, style, children: [
|
|
2076
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2022
2078
|
TextInput,
|
|
2023
2079
|
{
|
|
2024
2080
|
value,
|
|
@@ -2029,7 +2085,7 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
2029
2085
|
style: { flex: 1, border: `1px solid ${borderColor}`, background: "var(--color-background)", fontSize: "var(--font-size-lg)" }
|
|
2030
2086
|
}
|
|
2031
2087
|
),
|
|
2032
|
-
!checked && /* @__PURE__ */ (0,
|
|
2088
|
+
!checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2033
2089
|
"button",
|
|
2034
2090
|
{
|
|
2035
2091
|
type: "button",
|
|
@@ -2039,32 +2095,32 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
2039
2095
|
}
|
|
2040
2096
|
)
|
|
2041
2097
|
] }),
|
|
2042
|
-
checked && /* @__PURE__ */ (0,
|
|
2098
|
+
checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "aria-live": "polite", style: { marginTop: 12, padding: "13px 16px", borderRadius: "var(--radius-lg)", background: "var(--color-surface-sunken)", border: "1px solid var(--border-subtle)" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.1em", color: correct ? "var(--color-success)" : "var(--color-danger)" }, children: resultLabel }) })
|
|
2043
2099
|
] });
|
|
2044
2100
|
}
|
|
2045
2101
|
|
|
2046
2102
|
// src/components/ScenarioBox/ScenarioBox.tsx
|
|
2047
|
-
var
|
|
2103
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2048
2104
|
function ScenarioBox({ text, style, ...rest }) {
|
|
2049
|
-
return /* @__PURE__ */ (0,
|
|
2105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2050
2106
|
"div",
|
|
2051
2107
|
{
|
|
2052
2108
|
...rest,
|
|
2053
2109
|
style: { margin: "2px 0 12px", padding: "12px 14px", borderRadius: "var(--radius-lg)", background: "var(--color-warning-tint)", border: "1px solid var(--color-warning-border)", ...style },
|
|
2054
2110
|
children: [
|
|
2055
|
-
/* @__PURE__ */ (0,
|
|
2056
|
-
/* @__PURE__ */ (0,
|
|
2111
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { display: "block", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.12em", color: "var(--color-warning)", marginBottom: 5 }, children: "SCENARIO" }),
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { style: { margin: 0, fontSize: "var(--font-size-base)", color: "var(--color-ink-700)", textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MathText, { text }) })
|
|
2057
2113
|
]
|
|
2058
2114
|
}
|
|
2059
2115
|
);
|
|
2060
2116
|
}
|
|
2061
2117
|
|
|
2062
2118
|
// src/components/Flashcard/Flashcard.tsx
|
|
2063
|
-
var
|
|
2119
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2064
2120
|
function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
2065
|
-
return /* @__PURE__ */ (0,
|
|
2066
|
-
/* @__PURE__ */ (0,
|
|
2067
|
-
/* @__PURE__ */ (0,
|
|
2121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2122
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { textAlign: "right", marginBottom: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.1em", color: "var(--color-ink-300)" }, children: boxLabel }) }),
|
|
2123
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2068
2124
|
"button",
|
|
2069
2125
|
{
|
|
2070
2126
|
type: "button",
|
|
@@ -2084,13 +2140,13 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2084
2140
|
boxShadow: "var(--shadow-sm)",
|
|
2085
2141
|
boxSizing: "border-box"
|
|
2086
2142
|
},
|
|
2087
|
-
children: /* @__PURE__ */ (0,
|
|
2088
|
-
/* @__PURE__ */ (0,
|
|
2089
|
-
/* @__PURE__ */ (0,
|
|
2090
|
-
/* @__PURE__ */ (0,
|
|
2091
|
-
] }) : /* @__PURE__ */ (0,
|
|
2092
|
-
/* @__PURE__ */ (0,
|
|
2093
|
-
/* @__PURE__ */ (0,
|
|
2143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { "aria-live": "polite", children: !flipped ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2144
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wider)", color: "var(--color-text-faint)", marginBottom: 18 }, children: "PROMPT" }),
|
|
2145
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontSize: "var(--font-size-2xl)", fontWeight: 600, color: "var(--color-text-primary)", marginBottom: 14, textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MathText, { text: front }) }),
|
|
2146
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-300)", marginTop: 26 }, children: "tap to reveal" })
|
|
2147
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2148
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wider)", color: "var(--color-accent)", marginBottom: 18 }, children: "ANSWER" }),
|
|
2149
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontSize: "var(--font-size-lg)", color: "var(--color-text-tertiary)", textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MathText, { text: back }) })
|
|
2094
2150
|
] }) })
|
|
2095
2151
|
}
|
|
2096
2152
|
)
|
|
@@ -2098,7 +2154,7 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2098
2154
|
}
|
|
2099
2155
|
|
|
2100
2156
|
// src/components/RateButtons/RateButtons.tsx
|
|
2101
|
-
var
|
|
2157
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2102
2158
|
var buttonStyle = (border, bg, color) => ({
|
|
2103
2159
|
border: `1px solid ${border}`,
|
|
2104
2160
|
background: bg,
|
|
@@ -2110,10 +2166,10 @@ var buttonStyle = (border, bg, color) => ({
|
|
|
2110
2166
|
fontWeight: 600
|
|
2111
2167
|
});
|
|
2112
2168
|
function RateButtons({ enabled = false, onAgain, onGood, onEasy, style, ...rest }) {
|
|
2113
|
-
return /* @__PURE__ */ (0,
|
|
2114
|
-
/* @__PURE__ */ (0,
|
|
2115
|
-
/* @__PURE__ */ (0,
|
|
2116
|
-
/* @__PURE__ */ (0,
|
|
2169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { role: "group", "aria-label": "Rate your recall", ...rest, style: { display: "flex", gap: 10, justifyContent: "center", marginTop: 18, opacity: enabled ? 1 : 0.25, ...style }, children: [
|
|
2170
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: onAgain, disabled: !enabled, style: buttonStyle("var(--color-danger-border)", "var(--color-danger-tint)", "var(--color-danger)"), children: "Again" }),
|
|
2171
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: onGood, disabled: !enabled, style: buttonStyle("var(--color-warning-border)", "var(--color-warning-tint)", "var(--color-warning)"), children: "Good" }),
|
|
2172
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: onEasy, disabled: !enabled, style: buttonStyle("var(--color-success-border)", "var(--color-success-tint)", "var(--color-success)"), children: "Easy" })
|
|
2117
2173
|
] });
|
|
2118
2174
|
}
|
|
2119
2175
|
// Annotate the CommonJS export names for ESM import in node:
|