clio-design-system 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,22 @@
 
 Component library for the Clio app, generated from the Clio design system in Claude Design.
 
+## Usage
+
+Import the stylesheet once at your app root — it ships the design tokens **and**
+the KaTeX styles that `EquationBlock` needs:
+
+```js
+import 'clio-design-system/styles.css';
+```
+
+`EquationBlock` renders a TeX string to typeset display math via bundled KaTeX —
+just pass `tex`, nothing to mount:
+
+```jsx
+<EquationBlock tex="x_{k+1} = x_k - \eta \nabla f(x_k)" />
+```
+
 ## Scripts
 
 - `npm run dev` — build in watch mode

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -1521,9 +1531,22 @@ function TextBlock({ text, style, ...rest }) {
 }
 
 // src/components/EquationBlock/EquationBlock.tsx
+var import_react9 = require("react");
+var import_katex = __toESM(require("katex"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function EquationBlock({ tex, style, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...rest, style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: "17px", color: "var(--color-text-primary)" }, children: tex }) });
+  const html = (0, import_react9.useMemo)(
+    () => import_katex.default.renderToString(tex, { displayMode: true, throwOnError: false }),
+    [tex]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      ...rest,
+      style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style },
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
 }
 
 // src/components/IntuitionCallout/IntuitionCallout.tsx
@@ -1748,10 +1771,10 @@ function TableCard({ title, header, rows, style, ...rest }) {
 }
 
 // src/components/QuizCard/QuizCard.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
-  const answerId = (0, import_react9.useId)();
+  const answerId = (0, import_react10.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
@@ -1825,14 +1848,14 @@ function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230,
 }
 
 // src/components/RelatedCard/RelatedCard.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function RelatedCard({ items, style, ...rest }) {
   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: 16, ...style }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__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: "RELATED" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((it, i) => {
       const Element = it.as ?? (it.href ? "a" : "button");
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: (0, import_react10.createElement)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: (0, import_react11.createElement)(
         Element,
         {
           type: Element === "button" ? "button" : void 0,
@@ -1876,10 +1899,10 @@ function ReferencesCard({ items, style, ...rest }) {
 }
 
 // src/components/AnnotationPanel/AnnotationPanel.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
-  const labelId = (0, import_react11.useId)();
+  const labelId = (0, import_react12.useId)();
   if (!open) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime33.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: [
     /* @__PURE__ */ (0, import_jsx_runtime33.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" }),