@box-kite/react 2.0.0 → 2.1.0

package/components/markdown.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("./semantics.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e){let t=/(?:^|\s)language-([\w+-]+)/.exec(e??``);return t?t[1]:``}var o=(e,t)=>function({children:n}){return(0,r.jsx)(e,{component:`markdown.heading`,variant:`level${t}`,children:n})};function s({children:e}){return(0,r.jsx)(t.P,{component:`markdown.paragraph`,children:e})}function c({children:e,href:n,title:i}){return(0,r.jsx)(t.Link,{component:`markdown.link`,props:{href:n,title:i,rel:`noreferrer`},children:e})}function l({children:e}){return(0,r.jsx)(t.Ul,{component:`markdown.list`,children:e})}function u({children:e,start:n}){return(0,r.jsx)(t.Ol,{component:`markdown.list`,variant:{ordered:!0},props:{start:n},children:e})}function d({children:e}){return(0,r.jsx)(t.Li,{component:`markdown.item`,children:e})}function f({children:e}){return(0,r.jsx)(i.default,{tag:`blockquote`,component:`markdown.quote`,children:e})}function p({children:e}){return(0,r.jsx)(i.default,{tag:`code`,component:`markdown.code`,children:e})}function m({children:e}){let t=(0,n.isValidElement)(e)?e.props:void 0,o=a(t?.className);return(0,r.jsxs)(i.default,{tag:`pre`,component:`markdown.codeBlock`,children:[o!==``&&(0,r.jsx)(i.default,{tag:`span`,component:`markdown.codeBlock.language`,children:o}),(0,r.jsx)(i.default,{tag:`code`,component:`markdown.codeBlock.code`,children:t?t.children:e})]})}function h(){return(0,r.jsx)(i.default,{tag:`hr`,component:`markdown.rule`})}function g({src:e,alt:n,title:i}){return(0,r.jsx)(t.Img,{component:`markdown.image`,props:{src:e,alt:n,title:i}})}function _({children:e}){return(0,r.jsx)(i.default,{component:`markdown.tableWrap`,children:(0,r.jsx)(i.default,{tag:`table`,component:`markdown.table`,children:e})})}var v=(e,t)=>function({children:n}){return(0,r.jsx)(i.default,{tag:e,display:t,children:n})};function y({children:e}){return(0,r.jsx)(i.default,{tag:`tr`,component:`markdown.row`,children:e})}var b=(e,t)=>function({children:n}){return(0,r.jsx)(i.default,{tag:e,component:`markdown.cell`,variant:{header:t},children:n})},x=e=>function({children:t}){return(0,r.jsx)(i.default,{tag:e,component:`markdown.inline`,variant:e===`del`?{struck:!0}:{strong:e===`strong`},children:t})};function S({checked:e}){return(0,r.jsx)(i.default,{tag:`input`,component:`markdown.checkbox`,disabled:!0,props:{type:`checkbox`,defaultChecked:e===!0}})}var C={h1:o(t.H1,1),h2:o(t.H2,2),h3:o(t.H3,3),h4:o(t.H4,4),h5:o(t.H5,5),h6:o(t.H6,6),p:s,a:c,ul:l,ol:u,li:d,blockquote:f,code:p,pre:m,hr:h,img:g,table:_,thead:v(`thead`,`table-header-group`),tbody:v(`tbody`,`table-row-group`),tr:y,th:b(`th`,!0),td:b(`td`,!1),strong:x(`strong`),em:x(`em`),del:x(`del`),input:S};exports.default=C,exports.markdownComponents=C;

package/components/markdown.d.ts

@@ -0,0 +1,55 @@
+import { ComponentType, ReactNode } from 'react';
+/**
+ * Box Kite's half of a markdown renderer: the `components` map that `react-markdown`, `streamdown` and
+ * every other renderer built on that shape already takes, with the engine's own classes in it.
+ *
+ * The dependency is deliberately **not** taken. Streamdown — the hardened streaming renderer this would
+ * otherwise wrap — asks a project for a Tailwind `@source` line pointing into its `dist/` and for
+ * shadcn's design tokens in a global stylesheet, which is the one thing this library exists not to need;
+ * and a parser is a choice an app has usually already made. So what ships is the half that is ours, and
+ * it works with whichever renderer is already there.
+ */
+/**
+ * What a renderer hands one of these components. A superset of what any single node uses, which is what
+ * makes the map assignable to `react-markdown`'s own `Components` type without importing it.
+ */
+export interface MarkdownNodeProps {
+    children?: ReactNode;
+    /** A fenced block's `language-ts`, and nothing else the map reads. */
+    className?: string;
+    href?: string;
+    src?: string;
+    alt?: string;
+    title?: string;
+    /** A task list's box. `null` is a list item that is not one. */
+    checked?: boolean | null;
+    /** Where an ordered list starts, when the source said. */
+    start?: number;
+}
+export type MarkdownComponents = Record<string, ComponentType<MarkdownNodeProps>>;
+/**
+ * Markdown rendered with Box components — the map a renderer takes, so an agent's prose is themed,
+ * restylable and needs no stylesheet.
+ *
+ * ```tsx
+ * import Markdown from 'react-markdown';
+ * import { markdownComponents } from '@box-kite/react/components/markdown';
+ *
+ * <Box component="markdown">
+ *   <Markdown components={markdownComponents}>{message}</Markdown>
+ * </Box>
+ * ```
+ *
+ * **It is a constant, not a factory, and that matters while streaming.** A map built inside render is a
+ * new set of component *types* every token, and React unmounts and rebuilds the whole tree for each one.
+ * Override a node by spreading — `{ ...markdownComponents, h1: MyHeading }` — at module scope.
+ *
+ * **Whether a URL is safe is the renderer's**, not this map's: by the time a component is called the href
+ * has already been parsed, so `urlTransform` (react-markdown) or `defaultUrlTransform` (Streamdown) is
+ * where a `javascript:` link is refused. What is set here is `rel="noreferrer"`, which costs nothing.
+ *
+ * Wrapping the renderer in `<Box component="markdown">` is what gives the block its size and colour; the
+ * nodes inherit from it, so restyling the prose is one place.
+ */
+export declare const markdownComponents: MarkdownComponents;
+export default markdownComponents;

package/components/markdown.mjs

@@ -0,0 +1,179 @@
+import { H1 as e, H2 as t, H3 as n, H4 as r, H5 as i, H6 as a, Img as o, Li as s, Link as c, Ol as l, P as u, Ul as d } from "./semantics.mjs";
+import { isValidElement as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "@box-kite/react";
+//#region src/components/markdown.tsx
+function g(e) {
+	let t = /(?:^|\s)language-([\w+-]+)/.exec(e ?? "");
+	return t ? t[1] : "";
+}
+var _ = (e, t) => function({ children: n }) {
+	return /* @__PURE__ */ p(e, {
+		component: "markdown.heading",
+		variant: `level${t}`,
+		children: n
+	});
+};
+function v({ children: e }) {
+	return /* @__PURE__ */ p(u, {
+		component: "markdown.paragraph",
+		children: e
+	});
+}
+function y({ children: e, href: t, title: n }) {
+	return /* @__PURE__ */ p(c, {
+		component: "markdown.link",
+		props: {
+			href: t,
+			title: n,
+			rel: "noreferrer"
+		},
+		children: e
+	});
+}
+function b({ children: e }) {
+	return /* @__PURE__ */ p(d, {
+		component: "markdown.list",
+		children: e
+	});
+}
+function x({ children: e, start: t }) {
+	return /* @__PURE__ */ p(l, {
+		component: "markdown.list",
+		variant: { ordered: !0 },
+		props: { start: t },
+		children: e
+	});
+}
+function S({ children: e }) {
+	return /* @__PURE__ */ p(s, {
+		component: "markdown.item",
+		children: e
+	});
+}
+function C({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "blockquote",
+		component: "markdown.quote",
+		children: e
+	});
+}
+function w({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "code",
+		component: "markdown.code",
+		children: e
+	});
+}
+function T({ children: e }) {
+	let t = f(e) ? e.props : void 0, n = g(t?.className);
+	return /* @__PURE__ */ m(h, {
+		tag: "pre",
+		component: "markdown.codeBlock",
+		children: [n !== "" && /* @__PURE__ */ p(h, {
+			tag: "span",
+			component: "markdown.codeBlock.language",
+			children: n
+		}), /* @__PURE__ */ p(h, {
+			tag: "code",
+			component: "markdown.codeBlock.code",
+			children: t ? t.children : e
+		})]
+	});
+}
+function E() {
+	return /* @__PURE__ */ p(h, {
+		tag: "hr",
+		component: "markdown.rule"
+	});
+}
+function D({ src: e, alt: t, title: n }) {
+	return /* @__PURE__ */ p(o, {
+		component: "markdown.image",
+		props: {
+			src: e,
+			alt: t,
+			title: n
+		}
+	});
+}
+function O({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		component: "markdown.tableWrap",
+		children: /* @__PURE__ */ p(h, {
+			tag: "table",
+			component: "markdown.table",
+			children: e
+		})
+	});
+}
+var k = (e, t) => function({ children: n }) {
+	return /* @__PURE__ */ p(h, {
+		tag: e,
+		display: t,
+		children: n
+	});
+};
+function A({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "tr",
+		component: "markdown.row",
+		children: e
+	});
+}
+var j = (e, t) => function({ children: n }) {
+	return /* @__PURE__ */ p(h, {
+		tag: e,
+		component: "markdown.cell",
+		variant: { header: t },
+		children: n
+	});
+}, M = (e) => function({ children: t }) {
+	return /* @__PURE__ */ p(h, {
+		tag: e,
+		component: "markdown.inline",
+		variant: e === "del" ? { struck: !0 } : { strong: e === "strong" },
+		children: t
+	});
+};
+function N({ checked: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "input",
+		component: "markdown.checkbox",
+		disabled: !0,
+		props: {
+			type: "checkbox",
+			defaultChecked: e === !0
+		}
+	});
+}
+var P = {
+	h1: _(e, 1),
+	h2: _(t, 2),
+	h3: _(n, 3),
+	h4: _(r, 4),
+	h5: _(i, 5),
+	h6: _(a, 6),
+	p: v,
+	a: y,
+	ul: b,
+	ol: x,
+	li: S,
+	blockquote: C,
+	code: w,
+	pre: T,
+	hr: E,
+	img: D,
+	table: O,
+	thead: k("thead", "table-header-group"),
+	tbody: k("tbody", "table-row-group"),
+	tr: A,
+	th: j("th", !0),
+	td: j("td", !1),
+	strong: M("strong"),
+	em: M("em"),
+	del: M("del"),
+	input: N
+};
+//#endregion
+export { P as default, P as markdownComponents };