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.d.cts
CHANGED
|
@@ -422,16 +422,20 @@ interface TextBlockProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'sty
|
|
|
422
422
|
declare function TextBlock({ text, style, ...rest }: TextBlockProps): react.JSX.Element;
|
|
423
423
|
|
|
424
424
|
interface EquationBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
|
|
425
|
-
/**
|
|
425
|
+
/** TeX/LaTeX source, rendered to typeset display math via bundled KaTeX. */
|
|
426
426
|
tex: string;
|
|
427
427
|
style?: CSSProperties;
|
|
428
428
|
}
|
|
429
429
|
/**
|
|
430
430
|
* EquationBlock — display-math content block. Renders bare (no card shell).
|
|
431
|
-
*
|
|
432
|
-
*
|
|
433
|
-
*
|
|
434
|
-
*
|
|
431
|
+
*
|
|
432
|
+
* Renders `tex` to typeset display math via bundled KaTeX — the consumer just
|
|
433
|
+
* passes a TeX string, no `<ka-tex>` element to register or mount. Invalid TeX
|
|
434
|
+
* renders inline as an error (never throws) so one bad equation can't crash a
|
|
435
|
+
* whole note.
|
|
436
|
+
*
|
|
437
|
+
* Requires the KaTeX stylesheet, which the design system's `styles.css` already
|
|
438
|
+
* imports — consumers importing `clio-design-system/styles.css` get it for free.
|
|
435
439
|
*/
|
|
436
440
|
declare function EquationBlock({ tex, style, ...rest }: EquationBlockProps): react.JSX.Element;
|
|
437
441
|
|
package/dist/index.d.ts
CHANGED
|
@@ -422,16 +422,20 @@ interface TextBlockProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'sty
|
|
|
422
422
|
declare function TextBlock({ text, style, ...rest }: TextBlockProps): react.JSX.Element;
|
|
423
423
|
|
|
424
424
|
interface EquationBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
|
|
425
|
-
/**
|
|
425
|
+
/** TeX/LaTeX source, rendered to typeset display math via bundled KaTeX. */
|
|
426
426
|
tex: string;
|
|
427
427
|
style?: CSSProperties;
|
|
428
428
|
}
|
|
429
429
|
/**
|
|
430
430
|
* EquationBlock — display-math content block. Renders bare (no card shell).
|
|
431
|
-
*
|
|
432
|
-
*
|
|
433
|
-
*
|
|
434
|
-
*
|
|
431
|
+
*
|
|
432
|
+
* Renders `tex` to typeset display math via bundled KaTeX — the consumer just
|
|
433
|
+
* passes a TeX string, no `<ka-tex>` element to register or mount. Invalid TeX
|
|
434
|
+
* renders inline as an error (never throws) so one bad equation can't crash a
|
|
435
|
+
* whole note.
|
|
436
|
+
*
|
|
437
|
+
* Requires the KaTeX stylesheet, which the design system's `styles.css` already
|
|
438
|
+
* imports — consumers importing `clio-design-system/styles.css` get it for free.
|
|
435
439
|
*/
|
|
436
440
|
declare function EquationBlock({ tex, style, ...rest }: EquationBlockProps): react.JSX.Element;
|
|
437
441
|
|
package/dist/index.js
CHANGED
|
@@ -1449,20 +1449,66 @@ 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
|
-
import {
|
|
1492
|
+
import { useMemo } from "react";
|
|
1493
|
+
import katex2 from "katex";
|
|
1494
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1460
1495
|
function EquationBlock({ tex, style, ...rest }) {
|
|
1461
|
-
|
|
1496
|
+
const html = useMemo(
|
|
1497
|
+
() => katex2.renderToString(tex, { displayMode: true, throwOnError: false }),
|
|
1498
|
+
[tex]
|
|
1499
|
+
);
|
|
1500
|
+
return /* @__PURE__ */ jsx25(
|
|
1501
|
+
"div",
|
|
1502
|
+
{
|
|
1503
|
+
...rest,
|
|
1504
|
+
style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style },
|
|
1505
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
1506
|
+
}
|
|
1507
|
+
);
|
|
1462
1508
|
}
|
|
1463
1509
|
|
|
1464
1510
|
// src/components/IntuitionCallout/IntuitionCallout.tsx
|
|
1465
|
-
import { jsx as
|
|
1511
|
+
import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1466
1512
|
function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
1467
1513
|
return /* @__PURE__ */ jsxs13(
|
|
1468
1514
|
"div",
|
|
@@ -1479,15 +1525,15 @@ function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
|
1479
1525
|
...style
|
|
1480
1526
|
},
|
|
1481
1527
|
children: [
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
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 })
|
|
1484
1530
|
]
|
|
1485
1531
|
}
|
|
1486
1532
|
);
|
|
1487
1533
|
}
|
|
1488
1534
|
|
|
1489
1535
|
// src/components/WalkthroughCard/WalkthroughCard.tsx
|
|
1490
|
-
import { jsx as
|
|
1536
|
+
import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1491
1537
|
function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...rest }) {
|
|
1492
1538
|
const visible = steps.slice(0, currentStep + 1);
|
|
1493
1539
|
const atStart = currentStep === 0;
|
|
@@ -1507,8 +1553,8 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1507
1553
|
children: [
|
|
1508
1554
|
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }, children: [
|
|
1509
1555
|
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "baseline", gap: 10 }, children: [
|
|
1510
|
-
/* @__PURE__ */
|
|
1511
|
-
/* @__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 })
|
|
1512
1558
|
] }),
|
|
1513
1559
|
/* @__PURE__ */ jsxs14("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-text-faint)", whiteSpace: "nowrap" }, children: [
|
|
1514
1560
|
"STEP ",
|
|
@@ -1517,7 +1563,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1517
1563
|
steps.length
|
|
1518
1564
|
] })
|
|
1519
1565
|
] }),
|
|
1520
|
-
/* @__PURE__ */
|
|
1566
|
+
/* @__PURE__ */ jsx27("div", { "aria-live": "polite", children: visible.map((s, i) => /* @__PURE__ */ jsxs14(
|
|
1521
1567
|
"div",
|
|
1522
1568
|
{
|
|
1523
1569
|
style: {
|
|
@@ -1529,7 +1575,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1529
1575
|
opacity: i === currentStep ? 1 : 0.65
|
|
1530
1576
|
},
|
|
1531
1577
|
children: [
|
|
1532
|
-
/* @__PURE__ */
|
|
1578
|
+
/* @__PURE__ */ jsx27(
|
|
1533
1579
|
"span",
|
|
1534
1580
|
{
|
|
1535
1581
|
style: {
|
|
@@ -1549,15 +1595,15 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1549
1595
|
}
|
|
1550
1596
|
),
|
|
1551
1597
|
/* @__PURE__ */ jsxs14("div", { style: { minWidth: 0 }, children: [
|
|
1552
|
-
/* @__PURE__ */
|
|
1553
|
-
/* @__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 }) })
|
|
1554
1600
|
] })
|
|
1555
1601
|
]
|
|
1556
1602
|
},
|
|
1557
1603
|
i
|
|
1558
1604
|
)) }),
|
|
1559
1605
|
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 }, children: [
|
|
1560
|
-
/* @__PURE__ */
|
|
1606
|
+
/* @__PURE__ */ jsx27(
|
|
1561
1607
|
"button",
|
|
1562
1608
|
{
|
|
1563
1609
|
type: "button",
|
|
@@ -1576,7 +1622,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1576
1622
|
children: "\u2039 Back"
|
|
1577
1623
|
}
|
|
1578
1624
|
),
|
|
1579
|
-
/* @__PURE__ */
|
|
1625
|
+
/* @__PURE__ */ jsx27(
|
|
1580
1626
|
"button",
|
|
1581
1627
|
{
|
|
1582
1628
|
type: "button",
|
|
@@ -1602,15 +1648,15 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1602
1648
|
}
|
|
1603
1649
|
|
|
1604
1650
|
// src/components/CodeCard/CodeCard.tsx
|
|
1605
|
-
import { jsx as
|
|
1651
|
+
import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1606
1652
|
function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...rest }) {
|
|
1607
1653
|
return /* @__PURE__ */ jsxs15("div", { ...rest, style: { background: "var(--color-surface-code)", borderRadius: "var(--radius-card)", margin: "24px 0", overflow: "hidden", ...style }, children: [
|
|
1608
1654
|
/* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "baseline", gap: 10, padding: "12px 18px", minWidth: 0 }, children: [
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1611
|
-
/* @__PURE__ */
|
|
1612
|
-
/* @__PURE__ */
|
|
1613
|
-
/* @__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(
|
|
1614
1660
|
"button",
|
|
1615
1661
|
{
|
|
1616
1662
|
type: "button",
|
|
@@ -1620,12 +1666,12 @@ function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...res
|
|
|
1620
1666
|
}
|
|
1621
1667
|
)
|
|
1622
1668
|
] }),
|
|
1623
|
-
/* @__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 })
|
|
1624
1670
|
] });
|
|
1625
1671
|
}
|
|
1626
1672
|
|
|
1627
1673
|
// src/components/TableCard/TableCard.tsx
|
|
1628
|
-
import { jsx as
|
|
1674
|
+
import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1629
1675
|
var srOnly = {
|
|
1630
1676
|
position: "absolute",
|
|
1631
1677
|
width: 1,
|
|
@@ -1645,11 +1691,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1645
1691
|
style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 18px", ...style },
|
|
1646
1692
|
children: [
|
|
1647
1693
|
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1648
|
-
/* @__PURE__ */
|
|
1649
|
-
/* @__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 })
|
|
1650
1696
|
] }),
|
|
1651
1697
|
/* @__PURE__ */ jsxs16("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "var(--font-size-base)" }, children: [
|
|
1652
|
-
/* @__PURE__ */
|
|
1698
|
+
/* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsx29("tr", { children: header.map((h, i) => /* @__PURE__ */ jsx29(
|
|
1653
1699
|
"th",
|
|
1654
1700
|
{
|
|
1655
1701
|
scope: "col",
|
|
@@ -1662,11 +1708,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1662
1708
|
fontSize: i === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1663
1709
|
borderBottom: "1px solid var(--border-subtle)"
|
|
1664
1710
|
},
|
|
1665
|
-
children: h
|
|
1711
|
+
children: h ? /* @__PURE__ */ jsx29(MathText, { text: h }) : /* @__PURE__ */ jsx29("span", { style: srOnly, children: "Row label" })
|
|
1666
1712
|
},
|
|
1667
1713
|
i
|
|
1668
1714
|
)) }) }),
|
|
1669
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsx29("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ jsx29("tr", { children: r.map((c, ci) => {
|
|
1670
1716
|
const cellStyle = {
|
|
1671
1717
|
padding: "8px 10px",
|
|
1672
1718
|
color: ci === 0 ? "var(--color-text-muted)" : "var(--color-text-secondary)",
|
|
@@ -1674,7 +1720,7 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1674
1720
|
fontSize: ci === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1675
1721
|
borderBottom: ri === rows.length - 1 ? "none" : "1px solid var(--border-subtle)"
|
|
1676
1722
|
};
|
|
1677
|
-
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);
|
|
1678
1724
|
}) }, ri)) })
|
|
1679
1725
|
] })
|
|
1680
1726
|
]
|
|
@@ -1684,7 +1730,7 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1684
1730
|
|
|
1685
1731
|
// src/components/QuizCard/QuizCard.tsx
|
|
1686
1732
|
import { useId as useId3 } from "react";
|
|
1687
|
-
import { jsx as
|
|
1733
|
+
import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1688
1734
|
function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
|
|
1689
1735
|
const answerId = useId3();
|
|
1690
1736
|
return /* @__PURE__ */ jsxs17(
|
|
@@ -1701,11 +1747,11 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1701
1747
|
},
|
|
1702
1748
|
children: [
|
|
1703
1749
|
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
|
|
1704
|
-
/* @__PURE__ */
|
|
1705
|
-
/* @__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?" })
|
|
1706
1752
|
] }),
|
|
1707
|
-
/* @__PURE__ */
|
|
1708
|
-
/* @__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(
|
|
1709
1755
|
"button",
|
|
1710
1756
|
{
|
|
1711
1757
|
type: "button",
|
|
@@ -1716,7 +1762,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1716
1762
|
children: quizLabel
|
|
1717
1763
|
}
|
|
1718
1764
|
),
|
|
1719
|
-
/* @__PURE__ */
|
|
1765
|
+
/* @__PURE__ */ jsx30(
|
|
1720
1766
|
"button",
|
|
1721
1767
|
{
|
|
1722
1768
|
type: "button",
|
|
@@ -1725,7 +1771,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1725
1771
|
children: addFlashLabel
|
|
1726
1772
|
}
|
|
1727
1773
|
),
|
|
1728
|
-
answerOpen && /* @__PURE__ */
|
|
1774
|
+
answerOpen && /* @__PURE__ */ jsx30(
|
|
1729
1775
|
"div",
|
|
1730
1776
|
{
|
|
1731
1777
|
id: answerId,
|
|
@@ -1738,7 +1784,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1738
1784
|
fontSize: "var(--font-size-base)",
|
|
1739
1785
|
color: "var(--color-text-secondary)"
|
|
1740
1786
|
},
|
|
1741
|
-
children: answer
|
|
1787
|
+
children: /* @__PURE__ */ jsx30(MathText, { text: answer })
|
|
1742
1788
|
}
|
|
1743
1789
|
)
|
|
1744
1790
|
]
|
|
@@ -1747,27 +1793,27 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1747
1793
|
}
|
|
1748
1794
|
|
|
1749
1795
|
// src/components/ImageCard/ImageCard.tsx
|
|
1750
|
-
import { jsx as
|
|
1796
|
+
import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1751
1797
|
function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230, caption, style, ...rest }) {
|
|
1752
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: [
|
|
1753
1799
|
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1754
|
-
/* @__PURE__ */
|
|
1755
|
-
/* @__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 })
|
|
1756
1802
|
] }),
|
|
1757
|
-
/* @__PURE__ */
|
|
1758
|
-
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 })
|
|
1759
1805
|
] });
|
|
1760
1806
|
}
|
|
1761
1807
|
|
|
1762
1808
|
// src/components/RelatedCard/RelatedCard.tsx
|
|
1763
1809
|
import { createElement } from "react";
|
|
1764
|
-
import { jsx as
|
|
1810
|
+
import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1765
1811
|
function RelatedCard({ items, style, ...rest }) {
|
|
1766
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: [
|
|
1767
|
-
/* @__PURE__ */
|
|
1768
|
-
/* @__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) => {
|
|
1769
1815
|
const Element = it.as ?? (it.href ? "a" : "button");
|
|
1770
|
-
return /* @__PURE__ */
|
|
1816
|
+
return /* @__PURE__ */ jsx32("li", { children: createElement(
|
|
1771
1817
|
Element,
|
|
1772
1818
|
{
|
|
1773
1819
|
type: Element === "button" ? "button" : void 0,
|
|
@@ -1790,35 +1836,35 @@ function RelatedCard({ items, style, ...rest }) {
|
|
|
1790
1836
|
textDecoration: "none"
|
|
1791
1837
|
}
|
|
1792
1838
|
},
|
|
1793
|
-
/* @__PURE__ */
|
|
1794
|
-
/* @__PURE__ */
|
|
1795
|
-
/* @__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" })
|
|
1796
1842
|
) }, i);
|
|
1797
1843
|
}) })
|
|
1798
1844
|
] });
|
|
1799
1845
|
}
|
|
1800
1846
|
|
|
1801
1847
|
// src/components/ReferencesCard/ReferencesCard.tsx
|
|
1802
|
-
import { jsx as
|
|
1848
|
+
import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1803
1849
|
function ReferencesCard({ items, style, ...rest }) {
|
|
1804
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: [
|
|
1805
|
-
/* @__PURE__ */
|
|
1806
|
-
/* @__PURE__ */
|
|
1807
|
-
/* @__PURE__ */
|
|
1808
|
-
/* @__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 })
|
|
1809
1855
|
] }, i)) })
|
|
1810
1856
|
] });
|
|
1811
1857
|
}
|
|
1812
1858
|
|
|
1813
1859
|
// src/components/AnnotationPanel/AnnotationPanel.tsx
|
|
1814
1860
|
import { useId as useId4 } from "react";
|
|
1815
|
-
import { jsx as
|
|
1861
|
+
import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1816
1862
|
function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
|
|
1817
1863
|
const labelId = useId4();
|
|
1818
1864
|
if (!open) return null;
|
|
1819
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: [
|
|
1820
|
-
/* @__PURE__ */
|
|
1821
|
-
/* @__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(
|
|
1822
1868
|
"textarea",
|
|
1823
1869
|
{
|
|
1824
1870
|
"aria-labelledby": labelId,
|
|
@@ -1834,7 +1880,7 @@ function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own ta
|
|
|
1834
1880
|
}
|
|
1835
1881
|
|
|
1836
1882
|
// src/components/AnnotationToggle/AnnotationToggle.tsx
|
|
1837
|
-
import { jsx as
|
|
1883
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
1838
1884
|
function AnnotationToggle({
|
|
1839
1885
|
hasText = false,
|
|
1840
1886
|
open = false,
|
|
@@ -1848,7 +1894,7 @@ function AnnotationToggle({
|
|
|
1848
1894
|
}) {
|
|
1849
1895
|
const { active, interactionHandlers } = useHover({ onMouseEnter, onMouseLeave, onFocus, onBlur });
|
|
1850
1896
|
const visible = hot || open || hasText || active;
|
|
1851
|
-
return /* @__PURE__ */
|
|
1897
|
+
return /* @__PURE__ */ jsx35(
|
|
1852
1898
|
"button",
|
|
1853
1899
|
{
|
|
1854
1900
|
type: "button",
|
|
@@ -1873,7 +1919,7 @@ function AnnotationToggle({
|
|
|
1873
1919
|
}
|
|
1874
1920
|
|
|
1875
1921
|
// src/components/McqOption/McqOption.tsx
|
|
1876
|
-
import { jsx as
|
|
1922
|
+
import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1877
1923
|
var STATE_TEXT = { correct: "Correct", wrong: "Incorrect" };
|
|
1878
1924
|
function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
1879
1925
|
let border = "var(--border-medium)";
|
|
@@ -1916,9 +1962,9 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1916
1962
|
boxSizing: "border-box"
|
|
1917
1963
|
},
|
|
1918
1964
|
children: [
|
|
1919
|
-
/* @__PURE__ */
|
|
1965
|
+
/* @__PURE__ */ jsx36("span", { style: { flex: 1, minWidth: 0, textWrap: "pretty" }, children: /* @__PURE__ */ jsx36(MathText, { text: label }) }),
|
|
1920
1966
|
mark && /* @__PURE__ */ jsxs22("span", { style: { fontWeight: 700, flexShrink: 0 }, children: [
|
|
1921
|
-
/* @__PURE__ */
|
|
1967
|
+
/* @__PURE__ */ jsx36("span", { "aria-hidden": "true", children: mark }),
|
|
1922
1968
|
/* @__PURE__ */ jsxs22(
|
|
1923
1969
|
"span",
|
|
1924
1970
|
{
|
|
@@ -1948,12 +1994,12 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1948
1994
|
}
|
|
1949
1995
|
|
|
1950
1996
|
// src/components/FillBlankInput/FillBlankInput.tsx
|
|
1951
|
-
import { jsx as
|
|
1997
|
+
import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1952
1998
|
function FillBlankInput({ value, onChange, checked = false, correct = false, onCheck, resultLabel, style, ...rest }) {
|
|
1953
1999
|
const borderColor = checked ? correct ? "var(--color-success-border)" : "var(--color-danger-border)" : "var(--border-medium)";
|
|
1954
2000
|
return /* @__PURE__ */ jsxs23("div", { ...rest, style, children: [
|
|
1955
2001
|
/* @__PURE__ */ jsxs23("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
|
|
1956
|
-
/* @__PURE__ */
|
|
2002
|
+
/* @__PURE__ */ jsx37(
|
|
1957
2003
|
TextInput,
|
|
1958
2004
|
{
|
|
1959
2005
|
value,
|
|
@@ -1964,7 +2010,7 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
1964
2010
|
style: { flex: 1, border: `1px solid ${borderColor}`, background: "var(--color-background)", fontSize: "var(--font-size-lg)" }
|
|
1965
2011
|
}
|
|
1966
2012
|
),
|
|
1967
|
-
!checked && /* @__PURE__ */
|
|
2013
|
+
!checked && /* @__PURE__ */ jsx37(
|
|
1968
2014
|
"button",
|
|
1969
2015
|
{
|
|
1970
2016
|
type: "button",
|
|
@@ -1974,12 +2020,12 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
1974
2020
|
}
|
|
1975
2021
|
)
|
|
1976
2022
|
] }),
|
|
1977
|
-
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 }) })
|
|
1978
2024
|
] });
|
|
1979
2025
|
}
|
|
1980
2026
|
|
|
1981
2027
|
// src/components/ScenarioBox/ScenarioBox.tsx
|
|
1982
|
-
import { jsx as
|
|
2028
|
+
import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1983
2029
|
function ScenarioBox({ text, style, ...rest }) {
|
|
1984
2030
|
return /* @__PURE__ */ jsxs24(
|
|
1985
2031
|
"div",
|
|
@@ -1987,19 +2033,19 @@ function ScenarioBox({ text, style, ...rest }) {
|
|
|
1987
2033
|
...rest,
|
|
1988
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 },
|
|
1989
2035
|
children: [
|
|
1990
|
-
/* @__PURE__ */
|
|
1991
|
-
/* @__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 }) })
|
|
1992
2038
|
]
|
|
1993
2039
|
}
|
|
1994
2040
|
);
|
|
1995
2041
|
}
|
|
1996
2042
|
|
|
1997
2043
|
// src/components/Flashcard/Flashcard.tsx
|
|
1998
|
-
import { jsx as
|
|
2044
|
+
import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1999
2045
|
function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
2000
2046
|
return /* @__PURE__ */ jsxs25("div", { children: [
|
|
2001
|
-
/* @__PURE__ */
|
|
2002
|
-
/* @__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(
|
|
2003
2049
|
"button",
|
|
2004
2050
|
{
|
|
2005
2051
|
type: "button",
|
|
@@ -2019,13 +2065,13 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2019
2065
|
boxShadow: "var(--shadow-sm)",
|
|
2020
2066
|
boxSizing: "border-box"
|
|
2021
2067
|
},
|
|
2022
|
-
children: /* @__PURE__ */
|
|
2023
|
-
/* @__PURE__ */
|
|
2024
|
-
/* @__PURE__ */
|
|
2025
|
-
/* @__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" })
|
|
2026
2072
|
] }) : /* @__PURE__ */ jsxs25("div", { children: [
|
|
2027
|
-
/* @__PURE__ */
|
|
2028
|
-
/* @__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 }) })
|
|
2029
2075
|
] }) })
|
|
2030
2076
|
}
|
|
2031
2077
|
)
|
|
@@ -2033,7 +2079,7 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2033
2079
|
}
|
|
2034
2080
|
|
|
2035
2081
|
// src/components/RateButtons/RateButtons.tsx
|
|
2036
|
-
import { jsx as
|
|
2082
|
+
import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2037
2083
|
var buttonStyle = (border, bg, color) => ({
|
|
2038
2084
|
border: `1px solid ${border}`,
|
|
2039
2085
|
background: bg,
|
|
@@ -2046,9 +2092,9 @@ var buttonStyle = (border, bg, color) => ({
|
|
|
2046
2092
|
});
|
|
2047
2093
|
function RateButtons({ enabled = false, onAgain, onGood, onEasy, style, ...rest }) {
|
|
2048
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: [
|
|
2049
|
-
/* @__PURE__ */
|
|
2050
|
-
/* @__PURE__ */
|
|
2051
|
-
/* @__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" })
|
|
2052
2098
|
] });
|
|
2053
2099
|
}
|
|
2054
2100
|
export {
|