clio-design-system 0.2.0 → 0.4.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/dist/index.cjs +157 -124
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -7
- package/dist/index.d.ts +7 -7
- package/dist/index.js +121 -88
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -722,9 +722,9 @@ function TopicRow({
|
|
|
722
722
|
);
|
|
723
723
|
}
|
|
724
724
|
|
|
725
|
-
// src/components/
|
|
725
|
+
// src/components/ConceptRow/ConceptRow.tsx
|
|
726
726
|
import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
727
|
-
function
|
|
727
|
+
function ConceptRow({
|
|
728
728
|
title,
|
|
729
729
|
meta,
|
|
730
730
|
selected = false,
|
|
@@ -1449,22 +1449,55 @@ function CardHeader({
|
|
|
1449
1449
|
] });
|
|
1450
1450
|
}
|
|
1451
1451
|
|
|
1452
|
+
// src/internal/MathText.tsx
|
|
1453
|
+
import { Fragment } from "react";
|
|
1454
|
+
import katex from "katex";
|
|
1455
|
+
import { Fragment as Fragment2, jsx as jsx23 } from "react/jsx-runtime";
|
|
1456
|
+
function katexHtml(tex, displayMode) {
|
|
1457
|
+
return katex.renderToString(tex, { displayMode, throwOnError: false });
|
|
1458
|
+
}
|
|
1459
|
+
var SEGMENT = /(\$\$[\s\S]+?\$\$|\$[^$\n]+?\$)/g;
|
|
1460
|
+
function MathText({ text }) {
|
|
1461
|
+
const parts = text.split(SEGMENT);
|
|
1462
|
+
return /* @__PURE__ */ jsx23(Fragment2, { children: parts.map((part, i) => {
|
|
1463
|
+
if (part.length >= 4 && part.startsWith("$$") && part.endsWith("$$")) {
|
|
1464
|
+
return /* @__PURE__ */ jsx23(
|
|
1465
|
+
"span",
|
|
1466
|
+
{
|
|
1467
|
+
dangerouslySetInnerHTML: { __html: katexHtml(part.slice(2, -2), true) }
|
|
1468
|
+
},
|
|
1469
|
+
i
|
|
1470
|
+
);
|
|
1471
|
+
}
|
|
1472
|
+
if (part.length >= 2 && part.startsWith("$") && part.endsWith("$")) {
|
|
1473
|
+
return /* @__PURE__ */ jsx23(
|
|
1474
|
+
"span",
|
|
1475
|
+
{
|
|
1476
|
+
dangerouslySetInnerHTML: { __html: katexHtml(part.slice(1, -1), false) }
|
|
1477
|
+
},
|
|
1478
|
+
i
|
|
1479
|
+
);
|
|
1480
|
+
}
|
|
1481
|
+
return /* @__PURE__ */ jsx23(Fragment, { children: part }, i);
|
|
1482
|
+
}) });
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1452
1485
|
// src/components/TextBlock/TextBlock.tsx
|
|
1453
|
-
import { jsx as
|
|
1486
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1454
1487
|
function TextBlock({ text, style, ...rest }) {
|
|
1455
|
-
return /* @__PURE__ */
|
|
1488
|
+
return /* @__PURE__ */ jsx24("p", { ...rest, style: { margin: "18px 0", color: "var(--color-text-body)", textWrap: "pretty", ...style }, children: /* @__PURE__ */ jsx24(MathText, { text }) });
|
|
1456
1489
|
}
|
|
1457
1490
|
|
|
1458
1491
|
// src/components/EquationBlock/EquationBlock.tsx
|
|
1459
1492
|
import { useMemo } from "react";
|
|
1460
|
-
import
|
|
1461
|
-
import { jsx as
|
|
1493
|
+
import katex2 from "katex";
|
|
1494
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1462
1495
|
function EquationBlock({ tex, style, ...rest }) {
|
|
1463
1496
|
const html = useMemo(
|
|
1464
|
-
() =>
|
|
1497
|
+
() => katex2.renderToString(tex, { displayMode: true, throwOnError: false }),
|
|
1465
1498
|
[tex]
|
|
1466
1499
|
);
|
|
1467
|
-
return /* @__PURE__ */
|
|
1500
|
+
return /* @__PURE__ */ jsx25(
|
|
1468
1501
|
"div",
|
|
1469
1502
|
{
|
|
1470
1503
|
...rest,
|
|
@@ -1475,7 +1508,7 @@ function EquationBlock({ tex, style, ...rest }) {
|
|
|
1475
1508
|
}
|
|
1476
1509
|
|
|
1477
1510
|
// src/components/IntuitionCallout/IntuitionCallout.tsx
|
|
1478
|
-
import { jsx as
|
|
1511
|
+
import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1479
1512
|
function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
1480
1513
|
return /* @__PURE__ */ jsxs13(
|
|
1481
1514
|
"div",
|
|
@@ -1492,15 +1525,15 @@ function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
|
1492
1525
|
...style
|
|
1493
1526
|
},
|
|
1494
1527
|
children: [
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
text
|
|
1528
|
+
/* @__PURE__ */ jsx26("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 }),
|
|
1529
|
+
/* @__PURE__ */ jsx26(MathText, { text })
|
|
1497
1530
|
]
|
|
1498
1531
|
}
|
|
1499
1532
|
);
|
|
1500
1533
|
}
|
|
1501
1534
|
|
|
1502
1535
|
// src/components/WalkthroughCard/WalkthroughCard.tsx
|
|
1503
|
-
import { jsx as
|
|
1536
|
+
import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1504
1537
|
function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...rest }) {
|
|
1505
1538
|
const visible = steps.slice(0, currentStep + 1);
|
|
1506
1539
|
const atStart = currentStep === 0;
|
|
@@ -1520,8 +1553,8 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1520
1553
|
children: [
|
|
1521
1554
|
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }, children: [
|
|
1522
1555
|
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "baseline", gap: 10 }, children: [
|
|
1523
|
-
/* @__PURE__ */
|
|
1524
|
-
/* @__PURE__ */
|
|
1556
|
+
/* @__PURE__ */ jsx27("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "WALKTHROUGH" }),
|
|
1557
|
+
/* @__PURE__ */ jsx27("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1525
1558
|
] }),
|
|
1526
1559
|
/* @__PURE__ */ jsxs14("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-text-faint)", whiteSpace: "nowrap" }, children: [
|
|
1527
1560
|
"STEP ",
|
|
@@ -1530,7 +1563,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1530
1563
|
steps.length
|
|
1531
1564
|
] })
|
|
1532
1565
|
] }),
|
|
1533
|
-
/* @__PURE__ */
|
|
1566
|
+
/* @__PURE__ */ jsx27("div", { "aria-live": "polite", children: visible.map((s, i) => /* @__PURE__ */ jsxs14(
|
|
1534
1567
|
"div",
|
|
1535
1568
|
{
|
|
1536
1569
|
style: {
|
|
@@ -1542,7 +1575,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1542
1575
|
opacity: i === currentStep ? 1 : 0.65
|
|
1543
1576
|
},
|
|
1544
1577
|
children: [
|
|
1545
|
-
/* @__PURE__ */
|
|
1578
|
+
/* @__PURE__ */ jsx27(
|
|
1546
1579
|
"span",
|
|
1547
1580
|
{
|
|
1548
1581
|
style: {
|
|
@@ -1562,15 +1595,15 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1562
1595
|
}
|
|
1563
1596
|
),
|
|
1564
1597
|
/* @__PURE__ */ jsxs14("div", { style: { minWidth: 0 }, children: [
|
|
1565
|
-
/* @__PURE__ */
|
|
1566
|
-
/* @__PURE__ */
|
|
1598
|
+
/* @__PURE__ */ jsx27("div", { style: { textAlign: "center", fontSize: 15, color: "var(--color-text-primary)" }, children: /* @__PURE__ */ jsx27(MathText, { text: `$$${s.tex}$$` }) }),
|
|
1599
|
+
/* @__PURE__ */ jsx27("div", { style: { fontSize: "var(--font-size-base)", color: "var(--color-text-muted)", textAlign: "center" }, children: /* @__PURE__ */ jsx27(MathText, { text: s.note }) })
|
|
1567
1600
|
] })
|
|
1568
1601
|
]
|
|
1569
1602
|
},
|
|
1570
1603
|
i
|
|
1571
1604
|
)) }),
|
|
1572
1605
|
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 }, children: [
|
|
1573
|
-
/* @__PURE__ */
|
|
1606
|
+
/* @__PURE__ */ jsx27(
|
|
1574
1607
|
"button",
|
|
1575
1608
|
{
|
|
1576
1609
|
type: "button",
|
|
@@ -1589,7 +1622,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1589
1622
|
children: "\u2039 Back"
|
|
1590
1623
|
}
|
|
1591
1624
|
),
|
|
1592
|
-
/* @__PURE__ */
|
|
1625
|
+
/* @__PURE__ */ jsx27(
|
|
1593
1626
|
"button",
|
|
1594
1627
|
{
|
|
1595
1628
|
type: "button",
|
|
@@ -1615,15 +1648,15 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1615
1648
|
}
|
|
1616
1649
|
|
|
1617
1650
|
// src/components/CodeCard/CodeCard.tsx
|
|
1618
|
-
import { jsx as
|
|
1651
|
+
import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1619
1652
|
function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...rest }) {
|
|
1620
1653
|
return /* @__PURE__ */ jsxs15("div", { ...rest, style: { background: "var(--color-surface-code)", borderRadius: "var(--radius-card)", margin: "24px 0", overflow: "hidden", ...style }, children: [
|
|
1621
1654
|
/* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "baseline", gap: 10, padding: "12px 18px", minWidth: 0 }, children: [
|
|
1622
|
-
/* @__PURE__ */
|
|
1623
|
-
/* @__PURE__ */
|
|
1624
|
-
/* @__PURE__ */
|
|
1625
|
-
/* @__PURE__ */
|
|
1626
|
-
/* @__PURE__ */
|
|
1655
|
+
/* @__PURE__ */ jsx28("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" }),
|
|
1656
|
+
/* @__PURE__ */ jsx28("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "#EDEBE3", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title }),
|
|
1657
|
+
/* @__PURE__ */ jsx28("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-500)", whiteSpace: "nowrap", flexShrink: 0 }, children: lang }),
|
|
1658
|
+
/* @__PURE__ */ jsx28("span", { style: { flex: 1, minWidth: 4 } }),
|
|
1659
|
+
/* @__PURE__ */ jsx28(
|
|
1627
1660
|
"button",
|
|
1628
1661
|
{
|
|
1629
1662
|
type: "button",
|
|
@@ -1633,12 +1666,12 @@ function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...res
|
|
|
1633
1666
|
}
|
|
1634
1667
|
)
|
|
1635
1668
|
] }),
|
|
1636
|
-
/* @__PURE__ */
|
|
1669
|
+
/* @__PURE__ */ jsx28("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 })
|
|
1637
1670
|
] });
|
|
1638
1671
|
}
|
|
1639
1672
|
|
|
1640
1673
|
// src/components/TableCard/TableCard.tsx
|
|
1641
|
-
import { jsx as
|
|
1674
|
+
import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1642
1675
|
var srOnly = {
|
|
1643
1676
|
position: "absolute",
|
|
1644
1677
|
width: 1,
|
|
@@ -1658,11 +1691,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1658
1691
|
style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 18px", ...style },
|
|
1659
1692
|
children: [
|
|
1660
1693
|
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1661
|
-
/* @__PURE__ */
|
|
1662
|
-
/* @__PURE__ */
|
|
1694
|
+
/* @__PURE__ */ jsx29("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "COMPARE" }),
|
|
1695
|
+
/* @__PURE__ */ jsx29("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1663
1696
|
] }),
|
|
1664
1697
|
/* @__PURE__ */ jsxs16("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "var(--font-size-base)" }, children: [
|
|
1665
|
-
/* @__PURE__ */
|
|
1698
|
+
/* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsx29("tr", { children: header.map((h, i) => /* @__PURE__ */ jsx29(
|
|
1666
1699
|
"th",
|
|
1667
1700
|
{
|
|
1668
1701
|
scope: "col",
|
|
@@ -1675,11 +1708,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1675
1708
|
fontSize: i === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1676
1709
|
borderBottom: "1px solid var(--border-subtle)"
|
|
1677
1710
|
},
|
|
1678
|
-
children: h
|
|
1711
|
+
children: h ? /* @__PURE__ */ jsx29(MathText, { text: h }) : /* @__PURE__ */ jsx29("span", { style: srOnly, children: "Row label" })
|
|
1679
1712
|
},
|
|
1680
1713
|
i
|
|
1681
1714
|
)) }) }),
|
|
1682
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsx29("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ jsx29("tr", { children: r.map((c, ci) => {
|
|
1683
1716
|
const cellStyle = {
|
|
1684
1717
|
padding: "8px 10px",
|
|
1685
1718
|
color: ci === 0 ? "var(--color-text-muted)" : "var(--color-text-secondary)",
|
|
@@ -1687,7 +1720,7 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1687
1720
|
fontSize: ci === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1688
1721
|
borderBottom: ri === rows.length - 1 ? "none" : "1px solid var(--border-subtle)"
|
|
1689
1722
|
};
|
|
1690
|
-
return ci === 0 ? /* @__PURE__ */
|
|
1723
|
+
return ci === 0 ? /* @__PURE__ */ jsx29("th", { scope: "row", style: { ...cellStyle, textAlign: "left", fontWeight: 400 }, children: /* @__PURE__ */ jsx29(MathText, { text: c }) }, ci) : /* @__PURE__ */ jsx29("td", { style: cellStyle, children: /* @__PURE__ */ jsx29(MathText, { text: c }) }, ci);
|
|
1691
1724
|
}) }, ri)) })
|
|
1692
1725
|
] })
|
|
1693
1726
|
]
|
|
@@ -1697,7 +1730,7 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1697
1730
|
|
|
1698
1731
|
// src/components/QuizCard/QuizCard.tsx
|
|
1699
1732
|
import { useId as useId3 } from "react";
|
|
1700
|
-
import { jsx as
|
|
1733
|
+
import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1701
1734
|
function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
|
|
1702
1735
|
const answerId = useId3();
|
|
1703
1736
|
return /* @__PURE__ */ jsxs17(
|
|
@@ -1714,11 +1747,11 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1714
1747
|
},
|
|
1715
1748
|
children: [
|
|
1716
1749
|
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
|
|
1717
|
-
/* @__PURE__ */
|
|
1718
|
-
/* @__PURE__ */
|
|
1750
|
+
/* @__PURE__ */ jsx30("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "CHECKPOINT" }),
|
|
1751
|
+
/* @__PURE__ */ jsx30("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap" }, children: "Still with it?" })
|
|
1719
1752
|
] }),
|
|
1720
|
-
/* @__PURE__ */
|
|
1721
|
-
/* @__PURE__ */
|
|
1753
|
+
/* @__PURE__ */ jsx30("p", { style: { margin: "0 0 10px", fontSize: "var(--font-size-lg)", color: "var(--color-text-body)" }, children: /* @__PURE__ */ jsx30(MathText, { text: question }) }),
|
|
1754
|
+
/* @__PURE__ */ jsx30(
|
|
1722
1755
|
"button",
|
|
1723
1756
|
{
|
|
1724
1757
|
type: "button",
|
|
@@ -1729,7 +1762,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1729
1762
|
children: quizLabel
|
|
1730
1763
|
}
|
|
1731
1764
|
),
|
|
1732
|
-
/* @__PURE__ */
|
|
1765
|
+
/* @__PURE__ */ jsx30(
|
|
1733
1766
|
"button",
|
|
1734
1767
|
{
|
|
1735
1768
|
type: "button",
|
|
@@ -1738,7 +1771,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1738
1771
|
children: addFlashLabel
|
|
1739
1772
|
}
|
|
1740
1773
|
),
|
|
1741
|
-
answerOpen && /* @__PURE__ */
|
|
1774
|
+
answerOpen && /* @__PURE__ */ jsx30(
|
|
1742
1775
|
"div",
|
|
1743
1776
|
{
|
|
1744
1777
|
id: answerId,
|
|
@@ -1751,7 +1784,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1751
1784
|
fontSize: "var(--font-size-base)",
|
|
1752
1785
|
color: "var(--color-text-secondary)"
|
|
1753
1786
|
},
|
|
1754
|
-
children: answer
|
|
1787
|
+
children: /* @__PURE__ */ jsx30(MathText, { text: answer })
|
|
1755
1788
|
}
|
|
1756
1789
|
)
|
|
1757
1790
|
]
|
|
@@ -1760,27 +1793,27 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1760
1793
|
}
|
|
1761
1794
|
|
|
1762
1795
|
// src/components/ImageCard/ImageCard.tsx
|
|
1763
|
-
import { jsx as
|
|
1796
|
+
import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1764
1797
|
function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230, caption, style, ...rest }) {
|
|
1765
1798
|
return /* @__PURE__ */ jsxs18("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: [
|
|
1766
1799
|
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1767
|
-
/* @__PURE__ */
|
|
1768
|
-
/* @__PURE__ */
|
|
1800
|
+
/* @__PURE__ */ jsx31("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: label }),
|
|
1801
|
+
/* @__PURE__ */ jsx31("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1769
1802
|
] }),
|
|
1770
|
-
/* @__PURE__ */
|
|
1771
|
-
caption && /* @__PURE__ */
|
|
1803
|
+
/* @__PURE__ */ jsx31("image-slot", { id: slotId, shape: "rounded", radius: "10", placeholder, style: { width: "100%", height, display: "block" } }),
|
|
1804
|
+
caption && /* @__PURE__ */ jsx31("div", { style: { marginTop: 8, fontSize: "var(--font-size-md)", color: "var(--color-text-muted)", textAlign: "center" }, children: caption })
|
|
1772
1805
|
] });
|
|
1773
1806
|
}
|
|
1774
1807
|
|
|
1775
1808
|
// src/components/RelatedCard/RelatedCard.tsx
|
|
1776
1809
|
import { createElement } from "react";
|
|
1777
|
-
import { jsx as
|
|
1810
|
+
import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1778
1811
|
function RelatedCard({ items, style, ...rest }) {
|
|
1779
1812
|
return /* @__PURE__ */ jsxs19("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
|
|
1780
|
-
/* @__PURE__ */
|
|
1781
|
-
/* @__PURE__ */
|
|
1813
|
+
/* @__PURE__ */ jsx32("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ jsx32("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "RELATED" }) }),
|
|
1814
|
+
/* @__PURE__ */ jsx32("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((it, i) => {
|
|
1782
1815
|
const Element = it.as ?? (it.href ? "a" : "button");
|
|
1783
|
-
return /* @__PURE__ */
|
|
1816
|
+
return /* @__PURE__ */ jsx32("li", { children: createElement(
|
|
1784
1817
|
Element,
|
|
1785
1818
|
{
|
|
1786
1819
|
type: Element === "button" ? "button" : void 0,
|
|
@@ -1803,35 +1836,35 @@ function RelatedCard({ items, style, ...rest }) {
|
|
|
1803
1836
|
textDecoration: "none"
|
|
1804
1837
|
}
|
|
1805
1838
|
},
|
|
1806
|
-
/* @__PURE__ */
|
|
1807
|
-
/* @__PURE__ */
|
|
1808
|
-
/* @__PURE__ */
|
|
1839
|
+
/* @__PURE__ */ jsx32("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: it.color, flexShrink: 0 } }),
|
|
1840
|
+
/* @__PURE__ */ jsx32("span", { style: { flex: 1 }, children: it.label }),
|
|
1841
|
+
/* @__PURE__ */ jsx32("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" })
|
|
1809
1842
|
) }, i);
|
|
1810
1843
|
}) })
|
|
1811
1844
|
] });
|
|
1812
1845
|
}
|
|
1813
1846
|
|
|
1814
1847
|
// src/components/ReferencesCard/ReferencesCard.tsx
|
|
1815
|
-
import { jsx as
|
|
1848
|
+
import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1816
1849
|
function ReferencesCard({ items, style, ...rest }) {
|
|
1817
1850
|
return /* @__PURE__ */ jsxs20("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
|
|
1818
|
-
/* @__PURE__ */
|
|
1819
|
-
/* @__PURE__ */
|
|
1820
|
-
/* @__PURE__ */
|
|
1821
|
-
/* @__PURE__ */
|
|
1851
|
+
/* @__PURE__ */ jsx33("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ jsx33("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "REFERENCES" }) }),
|
|
1852
|
+
/* @__PURE__ */ jsx33("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((t, i) => /* @__PURE__ */ jsxs20("li", { style: { display: "flex", alignItems: "baseline", gap: 8, fontSize: "var(--font-size-base)" }, children: [
|
|
1853
|
+
/* @__PURE__ */ jsx33("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" }),
|
|
1854
|
+
/* @__PURE__ */ jsx33("span", { style: { color: "var(--color-text-secondary)" }, children: t })
|
|
1822
1855
|
] }, i)) })
|
|
1823
1856
|
] });
|
|
1824
1857
|
}
|
|
1825
1858
|
|
|
1826
1859
|
// src/components/AnnotationPanel/AnnotationPanel.tsx
|
|
1827
1860
|
import { useId as useId4 } from "react";
|
|
1828
|
-
import { jsx as
|
|
1861
|
+
import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1829
1862
|
function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
|
|
1830
1863
|
const labelId = useId4();
|
|
1831
1864
|
if (!open) return null;
|
|
1832
1865
|
return /* @__PURE__ */ jsxs21("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: [
|
|
1833
|
-
/* @__PURE__ */
|
|
1834
|
-
/* @__PURE__ */
|
|
1866
|
+
/* @__PURE__ */ jsx34("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" }),
|
|
1867
|
+
/* @__PURE__ */ jsx34(
|
|
1835
1868
|
"textarea",
|
|
1836
1869
|
{
|
|
1837
1870
|
"aria-labelledby": labelId,
|
|
@@ -1847,7 +1880,7 @@ function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own ta
|
|
|
1847
1880
|
}
|
|
1848
1881
|
|
|
1849
1882
|
// src/components/AnnotationToggle/AnnotationToggle.tsx
|
|
1850
|
-
import { jsx as
|
|
1883
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
1851
1884
|
function AnnotationToggle({
|
|
1852
1885
|
hasText = false,
|
|
1853
1886
|
open = false,
|
|
@@ -1861,7 +1894,7 @@ function AnnotationToggle({
|
|
|
1861
1894
|
}) {
|
|
1862
1895
|
const { active, interactionHandlers } = useHover({ onMouseEnter, onMouseLeave, onFocus, onBlur });
|
|
1863
1896
|
const visible = hot || open || hasText || active;
|
|
1864
|
-
return /* @__PURE__ */
|
|
1897
|
+
return /* @__PURE__ */ jsx35(
|
|
1865
1898
|
"button",
|
|
1866
1899
|
{
|
|
1867
1900
|
type: "button",
|
|
@@ -1886,7 +1919,7 @@ function AnnotationToggle({
|
|
|
1886
1919
|
}
|
|
1887
1920
|
|
|
1888
1921
|
// src/components/McqOption/McqOption.tsx
|
|
1889
|
-
import { jsx as
|
|
1922
|
+
import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1890
1923
|
var STATE_TEXT = { correct: "Correct", wrong: "Incorrect" };
|
|
1891
1924
|
function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
1892
1925
|
let border = "var(--border-medium)";
|
|
@@ -1929,9 +1962,9 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1929
1962
|
boxSizing: "border-box"
|
|
1930
1963
|
},
|
|
1931
1964
|
children: [
|
|
1932
|
-
/* @__PURE__ */
|
|
1965
|
+
/* @__PURE__ */ jsx36("span", { style: { flex: 1, minWidth: 0, textWrap: "pretty" }, children: /* @__PURE__ */ jsx36(MathText, { text: label }) }),
|
|
1933
1966
|
mark && /* @__PURE__ */ jsxs22("span", { style: { fontWeight: 700, flexShrink: 0 }, children: [
|
|
1934
|
-
/* @__PURE__ */
|
|
1967
|
+
/* @__PURE__ */ jsx36("span", { "aria-hidden": "true", children: mark }),
|
|
1935
1968
|
/* @__PURE__ */ jsxs22(
|
|
1936
1969
|
"span",
|
|
1937
1970
|
{
|
|
@@ -1961,12 +1994,12 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1961
1994
|
}
|
|
1962
1995
|
|
|
1963
1996
|
// src/components/FillBlankInput/FillBlankInput.tsx
|
|
1964
|
-
import { jsx as
|
|
1997
|
+
import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1965
1998
|
function FillBlankInput({ value, onChange, checked = false, correct = false, onCheck, resultLabel, style, ...rest }) {
|
|
1966
1999
|
const borderColor = checked ? correct ? "var(--color-success-border)" : "var(--color-danger-border)" : "var(--border-medium)";
|
|
1967
2000
|
return /* @__PURE__ */ jsxs23("div", { ...rest, style, children: [
|
|
1968
2001
|
/* @__PURE__ */ jsxs23("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
|
|
1969
|
-
/* @__PURE__ */
|
|
2002
|
+
/* @__PURE__ */ jsx37(
|
|
1970
2003
|
TextInput,
|
|
1971
2004
|
{
|
|
1972
2005
|
value,
|
|
@@ -1977,7 +2010,7 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
1977
2010
|
style: { flex: 1, border: `1px solid ${borderColor}`, background: "var(--color-background)", fontSize: "var(--font-size-lg)" }
|
|
1978
2011
|
}
|
|
1979
2012
|
),
|
|
1980
|
-
!checked && /* @__PURE__ */
|
|
2013
|
+
!checked && /* @__PURE__ */ jsx37(
|
|
1981
2014
|
"button",
|
|
1982
2015
|
{
|
|
1983
2016
|
type: "button",
|
|
@@ -1987,12 +2020,12 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
1987
2020
|
}
|
|
1988
2021
|
)
|
|
1989
2022
|
] }),
|
|
1990
|
-
checked && /* @__PURE__ */
|
|
2023
|
+
checked && /* @__PURE__ */ jsx37("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__ */ jsx37("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 }) })
|
|
1991
2024
|
] });
|
|
1992
2025
|
}
|
|
1993
2026
|
|
|
1994
2027
|
// src/components/ScenarioBox/ScenarioBox.tsx
|
|
1995
|
-
import { jsx as
|
|
2028
|
+
import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1996
2029
|
function ScenarioBox({ text, style, ...rest }) {
|
|
1997
2030
|
return /* @__PURE__ */ jsxs24(
|
|
1998
2031
|
"div",
|
|
@@ -2000,19 +2033,19 @@ function ScenarioBox({ text, style, ...rest }) {
|
|
|
2000
2033
|
...rest,
|
|
2001
2034
|
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 },
|
|
2002
2035
|
children: [
|
|
2003
|
-
/* @__PURE__ */
|
|
2004
|
-
/* @__PURE__ */
|
|
2036
|
+
/* @__PURE__ */ jsx38("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" }),
|
|
2037
|
+
/* @__PURE__ */ jsx38("p", { style: { margin: 0, fontSize: "var(--font-size-base)", color: "var(--color-ink-700)", textWrap: "pretty" }, children: /* @__PURE__ */ jsx38(MathText, { text }) })
|
|
2005
2038
|
]
|
|
2006
2039
|
}
|
|
2007
2040
|
);
|
|
2008
2041
|
}
|
|
2009
2042
|
|
|
2010
2043
|
// src/components/Flashcard/Flashcard.tsx
|
|
2011
|
-
import { jsx as
|
|
2044
|
+
import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2012
2045
|
function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
2013
2046
|
return /* @__PURE__ */ jsxs25("div", { children: [
|
|
2014
|
-
/* @__PURE__ */
|
|
2015
|
-
/* @__PURE__ */
|
|
2047
|
+
/* @__PURE__ */ jsx39("div", { style: { textAlign: "right", marginBottom: 6 }, children: /* @__PURE__ */ jsx39("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.1em", color: "var(--color-ink-300)" }, children: boxLabel }) }),
|
|
2048
|
+
/* @__PURE__ */ jsx39(
|
|
2016
2049
|
"button",
|
|
2017
2050
|
{
|
|
2018
2051
|
type: "button",
|
|
@@ -2032,13 +2065,13 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2032
2065
|
boxShadow: "var(--shadow-sm)",
|
|
2033
2066
|
boxSizing: "border-box"
|
|
2034
2067
|
},
|
|
2035
|
-
children: /* @__PURE__ */
|
|
2036
|
-
/* @__PURE__ */
|
|
2037
|
-
/* @__PURE__ */
|
|
2038
|
-
/* @__PURE__ */
|
|
2068
|
+
children: /* @__PURE__ */ jsx39("div", { "aria-live": "polite", children: !flipped ? /* @__PURE__ */ jsxs25("div", { children: [
|
|
2069
|
+
/* @__PURE__ */ jsx39("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" }),
|
|
2070
|
+
/* @__PURE__ */ jsx39("div", { style: { fontSize: "var(--font-size-2xl)", fontWeight: 600, color: "var(--color-text-primary)", marginBottom: 14, textWrap: "pretty" }, children: /* @__PURE__ */ jsx39(MathText, { text: front }) }),
|
|
2071
|
+
/* @__PURE__ */ jsx39("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-300)", marginTop: 26 }, children: "tap to reveal" })
|
|
2039
2072
|
] }) : /* @__PURE__ */ jsxs25("div", { children: [
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2073
|
+
/* @__PURE__ */ jsx39("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" }),
|
|
2074
|
+
/* @__PURE__ */ jsx39("div", { style: { fontSize: "var(--font-size-lg)", color: "var(--color-text-tertiary)", textWrap: "pretty" }, children: /* @__PURE__ */ jsx39(MathText, { text: back }) })
|
|
2042
2075
|
] }) })
|
|
2043
2076
|
}
|
|
2044
2077
|
)
|
|
@@ -2046,7 +2079,7 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2046
2079
|
}
|
|
2047
2080
|
|
|
2048
2081
|
// src/components/RateButtons/RateButtons.tsx
|
|
2049
|
-
import { jsx as
|
|
2082
|
+
import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2050
2083
|
var buttonStyle = (border, bg, color) => ({
|
|
2051
2084
|
border: `1px solid ${border}`,
|
|
2052
2085
|
background: bg,
|
|
@@ -2059,9 +2092,9 @@ var buttonStyle = (border, bg, color) => ({
|
|
|
2059
2092
|
});
|
|
2060
2093
|
function RateButtons({ enabled = false, onAgain, onGood, onEasy, style, ...rest }) {
|
|
2061
2094
|
return /* @__PURE__ */ jsxs26("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: [
|
|
2062
|
-
/* @__PURE__ */
|
|
2063
|
-
/* @__PURE__ */
|
|
2064
|
-
/* @__PURE__ */
|
|
2095
|
+
/* @__PURE__ */ jsx40("button", { type: "button", onClick: onAgain, disabled: !enabled, style: buttonStyle("var(--color-danger-border)", "var(--color-danger-tint)", "var(--color-danger)"), children: "Again" }),
|
|
2096
|
+
/* @__PURE__ */ jsx40("button", { type: "button", onClick: onGood, disabled: !enabled, style: buttonStyle("var(--color-warning-border)", "var(--color-warning-tint)", "var(--color-warning)"), children: "Good" }),
|
|
2097
|
+
/* @__PURE__ */ jsx40("button", { type: "button", onClick: onEasy, disabled: !enabled, style: buttonStyle("var(--color-success-border)", "var(--color-success-tint)", "var(--color-success)"), children: "Easy" })
|
|
2065
2098
|
] });
|
|
2066
2099
|
}
|
|
2067
2100
|
export {
|
|
@@ -2075,6 +2108,7 @@ export {
|
|
|
2075
2108
|
CardShell,
|
|
2076
2109
|
CodeCard,
|
|
2077
2110
|
ColorSwatch,
|
|
2111
|
+
ConceptRow,
|
|
2078
2112
|
ContextMenu,
|
|
2079
2113
|
DragHandle,
|
|
2080
2114
|
EquationBlock,
|
|
@@ -2087,7 +2121,6 @@ export {
|
|
|
2087
2121
|
IntuitionCallout,
|
|
2088
2122
|
McqOption,
|
|
2089
2123
|
NavTabs,
|
|
2090
|
-
NoteRow,
|
|
2091
2124
|
QuizCard,
|
|
2092
2125
|
RateButtons,
|
|
2093
2126
|
ReferencesCard,
|