@gridui/markdown 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# @gridui/markdown
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Render Markdown content using the existing GridUI theme. Import `Markdown` from
+`@gridui/markdown`; load `@gridui/theme/styles.css` before
+`@gridui/markdown/styles.css`. Consumers do not need a styling compiler.
+
+```tsx
+import "@gridui/theme/styles.css";
+import "@gridui/markdown/styles.css";
+import { Markdown } from "@gridui/markdown";
+
+<Markdown streaming={isReceiving}>{responseText}</Markdown>
+```
+
+Pass the complete current text snapshot as `children`. Updates support unfinished
+fenced code and other CommonMark syntax through `react-markdown`; GFM tables,
+task lists, strikethrough and autolinks are enabled. `streaming` exposes
+`aria-busy` without announcing every token. Applications own transport, buffering,
+throttling, completion announcements, and scroll following. Parsing is per
+snapshot, not an incremental parser or a network stream implementation.
+
+Raw HTML is skipped. URLs pass through react-markdown's safe default transform;
+there is no raw-HTML or unsafe URL-transform escape hatch. `components` can
+replace semantic renderers, including code, links and images. Those trusted
+renderers own their output and accessibility; never inject untrusted HTML.
+Images use the supplied URLs, so the application owns remote-media policy.
+
+Use `[1](#citation:guide)` with
+`citations={[{ id: "guide", title: "Guide", href: "https://example.com" }]}`
+to resolve application-supplied citations. IDs must be nonempty and unique.
+Unknown citations and rejected URLs render without an active link. A custom
+link renderer can compose the application's existing citation presentation.
+
+Compose messages with native `article`/heading elements and `@gridui/follow-scroll`.
+Keep author identity, timestamps, message actions, retries and persistence in the
+application. The Streaming story demonstrates successive response snapshots.
+
+See [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/markdown/.changeset/history).

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Markdown
+ * @namespace Root
+ * @description Index
+ */
+export type { MarkdownCitation, MarkdownComponents, MarkdownProps } from "./markdown/markdown";
+export { Markdown } from "./markdown/markdown";

package/dist/index.js

@@ -0,0 +1,76 @@
+// src/markdown/markdown.tsx
+import { cn } from "@gridui/style-utils";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx } from "react/jsx-runtime";
+var defaultComponents = {
+  a: ({ node: _node, href, children, ...anchorProps }) => {
+    return href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...anchorProps,
+        href,
+        children
+      }
+    ) : /* @__PURE__ */ jsx("span", { children });
+  },
+  img: ({ node: _node, src, alt, ...imageProps }) => {
+    return src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...imageProps,
+        src,
+        alt: alt ?? ""
+      }
+    ) : /* @__PURE__ */ jsx("span", { children: alt });
+  }
+};
+var Markdown = (props) => {
+  const { children, streaming = false, components, citations = [], className, ...restProps } = props;
+  const sources = new Map(citations.map((citation) => {
+    return [
+      citation.id,
+      citation
+    ];
+  }));
+  if (sources.size !== citations.length || citations.some((citation) => {
+    return !citation.id;
+  })) {
+    throw new Error("Markdown citation IDs must be nonempty and unique.");
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      className: cn("gridui-markdown", className),
+      "aria-busy": streaming || void 0,
+      "data-streaming": streaming || void 0,
+      children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          skipHtml: true,
+          remarkPlugins: [remarkGfm],
+          urlTransform: (url, key, node) => {
+            if (url.startsWith("#citation:")) {
+              const citation = sources.get(url.slice("#citation:".length));
+              if (citation && key === "href") {
+                node.properties.title = citation.title;
+              }
+              return citation ? defaultUrlTransform(citation.href) : "";
+            }
+            return defaultUrlTransform(url);
+          },
+          components: {
+            ...defaultComponents,
+            ...components
+          },
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  Markdown
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/markdown/markdown.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Markdown\n * @namespace Markdown\n * @description Markdown\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\nimport ReactMarkdown, { type Components, defaultUrlTransform } from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\n\nexport type MarkdownComponents = Components;\n\nexport type MarkdownCitation = {\n    readonly id: string;\n    readonly title: string;\n    readonly href: string;\n};\n\nexport type MarkdownProps = Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"dangerouslySetInnerHTML\"> & {\n    readonly children: string;\n    readonly streaming?: boolean;\n    readonly components?: MarkdownComponents;\n    readonly citations?: readonly MarkdownCitation[];\n};\n\nconst defaultComponents: MarkdownComponents = {\n    a: ({ node: _node, href, children, ...anchorProps }) => {\n        return href ? (<a\n            {...anchorProps}\n            href={href}\n        >\n            {children}\n        </a>) : (<span>\n            {children}\n        </span>);\n    },\n    img: ({ node: _node, src, alt, ...imageProps }) => {\n        return src ? (<img\n            {...imageProps}\n            src={src}\n            alt={alt ?? \"\"}\n        />) : (<span>\n            {alt}\n        </span>);\n    },\n};\n\n/** Renders the current document snapshot; transport and update scheduling stay with the host. */\nexport const Markdown: FC<MarkdownProps> = (props: MarkdownProps) => {\n    const { children, streaming = false, components, citations = [], className, ...restProps } = props;\n    const sources = new Map(citations.map((citation) => {\n        return [\n            citation.id,\n            citation,\n        ];\n    }));\n    if (sources.size !== citations.length || citations.some((citation) => {\n        return !citation.id;\n    })) {\n        throw new Error(\"Markdown citation IDs must be nonempty and unique.\");\n    }\n    return (<div\n        {...restProps}\n        className={cn(\"gridui-markdown\", className)}\n        aria-busy={streaming || undefined}\n        data-streaming={streaming || undefined}\n    >\n        <ReactMarkdown\n            skipHtml\n            remarkPlugins={[remarkGfm]}\n            urlTransform={(url, key, node) => {\n                if (url.startsWith(\"#citation:\")) {\n                    const citation = sources.get(url.slice(\"#citation:\".length));\n                    if (citation && key === \"href\") {\n                        node.properties.title = citation.title;\n                    }\n                    return citation ? defaultUrlTransform(citation.href) : \"\";\n                }\n                return defaultUrlTransform(url);\n            }}\n            components={{\n                ...defaultComponents,\n                ...components,\n            }}\n        >\n            {children}\n        </ReactMarkdown>\n    </div>);\n};\n"],
+  "mappings": ";AAOA,SAAS,UAAU;AAEnB,OAAO,iBAAkC,2BAA2B;AACpE,OAAO,eAAe;AAmBC;AAFvB,IAAM,oBAAwC;AAAA,EAC1C,GAAG,CAAC,EAAE,MAAM,OAAO,MAAM,UAAU,GAAG,YAAY,MAAM;AACpD,WAAO,OAAQ;AAAA,MAAC;AAAA;AAAA,QACX,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACL,IAAS,oBAAC,UACL,UACL;AAAA,EACJ;AAAA,EACA,KAAK,CAAC,EAAE,MAAM,OAAO,KAAK,KAAK,GAAG,WAAW,MAAM;AAC/C,WAAO,MAAO;AAAA,MAAC;AAAA;AAAA,QACV,GAAG;AAAA,QACJ;AAAA,QACA,KAAK,OAAO;AAAA;AAAA,IAChB,IAAO,oBAAC,UACH,eACL;AAAA,EACJ;AACJ;AAGO,IAAM,WAA8B,CAAC,UAAyB;AACjE,QAAM,EAAE,UAAU,YAAY,OAAO,YAAY,YAAY,CAAC,GAAG,WAAW,GAAG,UAAU,IAAI;AAC7F,QAAM,UAAU,IAAI,IAAI,UAAU,IAAI,CAAC,aAAa;AAChD,WAAO;AAAA,MACH,SAAS;AAAA,MACT;AAAA,IACJ;AAAA,EACJ,CAAC,CAAC;AACF,MAAI,QAAQ,SAAS,UAAU,UAAU,UAAU,KAAK,CAAC,aAAa;AAClE,WAAO,CAAC,SAAS;AAAA,EACrB,CAAC,GAAG;AACA,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACxE;AACA,SAAQ;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,aAAW,aAAa;AAAA,MACxB,kBAAgB,aAAa;AAAA,MAE7B;AAAA,QAAC;AAAA;AAAA,UACG,UAAQ;AAAA,UACR,eAAe,CAAC,SAAS;AAAA,UACzB,cAAc,CAAC,KAAK,KAAK,SAAS;AAC9B,gBAAI,IAAI,WAAW,YAAY,GAAG;AAC9B,oBAAM,WAAW,QAAQ,IAAI,IAAI,MAAM,aAAa,MAAM,CAAC;AAC3D,kBAAI,YAAY,QAAQ,QAAQ;AAC5B,qBAAK,WAAW,QAAQ,SAAS;AAAA,cACrC;AACA,qBAAO,WAAW,oBAAoB,SAAS,IAAI,IAAI;AAAA,YAC3D;AACA,mBAAO,oBAAoB,GAAG;AAAA,UAClC;AAAA,UACA,YAAY;AAAA,YACR,GAAG;AAAA,YACH,GAAG;AAAA,UACP;AAAA,UAEC;AAAA;AAAA,MACL;AAAA;AAAA,EACJ;AACJ;",
+  "names": []
+}

package/dist/markdown/markdown.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author WMXPY
+ * @package Markdown
+ * @namespace Markdown
+ * @description Markdown
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+import { type Components } from "react-markdown";
+export type MarkdownComponents = Components;
+export type MarkdownCitation = {
+    readonly id: string;
+    readonly title: string;
+    readonly href: string;
+};
+export type MarkdownProps = Omit<ComponentPropsWithRef<"div">, "children" | "dangerouslySetInnerHTML"> & {
+    readonly children: string;
+    readonly streaming?: boolean;
+    readonly components?: MarkdownComponents;
+    readonly citations?: readonly MarkdownCitation[];
+};
+/** Renders the current document snapshot; transport and update scheduling stay with the host. */
+export declare const Markdown: FC<MarkdownProps>;

package/dist/styles.css

@@ -0,0 +1,85 @@
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities;
+@layer utilities;
+@layer components {
+  .gridui-markdown {
+    overflow-wrap: anywhere;
+    color: var(--gridui-foreground);
+    line-height: 1.6;
+  }
+  .gridui-markdown > :first-child {
+    margin-block-start: 0;
+  }
+  .gridui-markdown > :last-child {
+    margin-block-end: 0;
+  }
+  .gridui-markdown :where(p, ul, ol, pre, blockquote, table) {
+    margin-block: var(--gridui-space-16);
+  }
+  .gridui-markdown :where(ul, ol) {
+    padding-inline-start: var(--gridui-space-24);
+  }
+  .gridui-markdown ul {
+    list-style: disc;
+  }
+  .gridui-markdown ol {
+    list-style: decimal;
+  }
+  .gridui-markdown :where(h1, h2, h3, h4, h5, h6) {
+    margin-block: var(--gridui-space-24) var(--gridui-space-8);
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .gridui-markdown h1 {
+    font-size: 1.75em;
+  }
+  .gridui-markdown h2 {
+    font-size: 1.5em;
+  }
+  .gridui-markdown h3 {
+    font-size: 1.25em;
+  }
+  .gridui-markdown a {
+    color: var(--gridui-link);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .gridui-markdown :where(pre, code) {
+    font-family: monospace;
+    background: var(--gridui-surface);
+  }
+  .gridui-markdown pre {
+    overflow: auto;
+    padding: var(--gridui-space-16);
+    border: 1px solid var(--gridui-border);
+    white-space: pre;
+  }
+  .gridui-markdown :not(pre) > code {
+    padding-inline: var(--gridui-space-4);
+  }
+  .gridui-markdown blockquote {
+    padding-inline-start: var(--gridui-space-16);
+    border-inline-start: 2px solid var(--gridui-border);
+    color: var(--gridui-muted);
+  }
+  .gridui-markdown table {
+    display: block;
+    max-width: 100%;
+    overflow: auto;
+    border-collapse: collapse;
+  }
+  .gridui-markdown :where(th, td) {
+    padding: var(--gridui-space-8) var(--gridui-space-12);
+    border: 1px solid var(--gridui-border);
+    text-align: start;
+  }
+  .gridui-markdown img {
+    max-width: 100%;
+    height: auto;
+  }
+  .gridui-markdown hr {
+    border: 0;
+    border-block-start: 1px solid var(--gridui-border);
+    margin-block: var(--gridui-space-24);
+  }
+}

package/docs/catalog.json

@@ -0,0 +1,40 @@
+{
+  "schemaVersion": 1,
+  "name": "@gridui/markdown",
+  "version": "1.0.1",
+  "category": "core",
+  "description": "GridUI React Markdown content with streaming updates",
+  "usage": "Render Markdown content using the existing GridUI theme. Import `Markdown` from `@gridui/markdown`; load `@gridui/theme/styles.css` before `@gridui/markdown/styles.css`. Consumers do not need a styling compiler.",
+  "documentation": [
+    "README.md"
+  ],
+  "exports": [
+    {
+      "name": "Markdown",
+      "kind": "component",
+      "importPath": "@gridui/markdown"
+    },
+    {
+      "name": "MarkdownCitation",
+      "kind": "type",
+      "importPath": "@gridui/markdown"
+    },
+    {
+      "name": "MarkdownComponents",
+      "kind": "type",
+      "importPath": "@gridui/markdown"
+    },
+    {
+      "name": "MarkdownProps",
+      "kind": "type",
+      "importPath": "@gridui/markdown"
+    }
+  ],
+  "styles": [
+    "@gridui/theme/styles.css",
+    "@gridui/markdown/styles.css"
+  ],
+  "examples": [
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/markdown/stories/markdown.stories.tsx"
+  ]
+}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@gridui/markdown",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "GridUI React Markdown content with streaming updates",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@gridui/style-utils": "^2.2.2",
+    "@gridui/theme": "^2.5.3",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0-internal",
+    "@jest/globals": "30.5.2",
+    "@storybook/react-vite": "10.6.6",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.6",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest",
+    "coverage": "jest --coverage"
+  }
 }