@duskmoon-dev/components 0.3.0 → 0.3.1

package/README.md

@@ -1,18 +1,26 @@
 # @duskmoon-dev/components
 
-The core React component library for Duskmoon.
+The DuskMoon React component package.
 
 ## Installation
 
 ```bash
-bun add @duskmoon-dev/components
+bun add @duskmoon-dev/components @duskmoon-dev/core react react-dom
+```
+
+Import the stylesheet once in your app:
+
+```tsx
+import "@duskmoon-dev/components/styles.css";
 ```
 
 ## Features
 
-- **TypeScript First**: Written entirely in TypeScript for excellent developer experience.
-- **Optimized for Next.js**: Compatible with Next.js 15 and React 19.
-- **Modular Exports**: Import only what you need.
+- **React 19 ready**: Components and examples target the current React runtime.
+- **TypeScript first**: Public props and helper APIs ship with declarations.
+- **Modular exports**: Import from the root package or from component subpaths.
+- **DuskMoon styling**: Component classes and CSS are backed by
+  `@duskmoon-dev/core`.
 
 ## Usage
 
@@ -25,6 +33,23 @@ export default function MyComponent() {
 }
 ```
 
+Root imports are also supported:
+
+```tsx
+import { Button, DmTable, theme } from "@duskmoon-dev/components";
+```
+
+## Public Surface
+
+- 71 standard components such as `Button`, `Table`, `Modal`, `Select`, and
+  `Typography`.
+- 21 DuskMoon workflow components such as `DmLayout`, `DmSearch`, `DmTable`,
+  `DmProTable`, and `DmToolbar`.
+- 13 infrastructure exports including `theme`, `version`,
+  `unstableSetRender`, `GetProps`, `GetRef`, and DuskMoon theme helpers.
+- Component subpath exports follow `@duskmoon-dev/components/{component-id}`,
+  for example `@duskmoon-dev/components/date-picker`.
+
 ## Development
 
 ```bash
@@ -36,4 +61,7 @@ bun run test
 
 # Typecheck
 bun run typecheck
+
+# Check parity manifest coverage
+bun run parity:components
 ```

package/dist/classes/index.d.ts

@@ -88,5 +88,6 @@ export * from "./transfer";
 export * from "./tree";
 export * from "./tree-select";
 export * from "./typography";
+export * from "./markdown";
 export * from "./upload";
 export * from "./watermark";

package/dist/classes/index.js

@@ -2577,6 +2577,18 @@ function getTypographyLinkClasses({
 }) {
   return cn(typographyLinkClass, status && typographyStatusClasses[status], disabled && typographyDisabledClass, ellipsis && typographyEllipsisClass, className);
 }
+// src/classes/markdown.ts
+var markdownBaseClass = "markdown-body";
+var markdownFrontMatterClass = "dm-front-matter";
+var markdownColorCodeClass = "dm-color-code";
+var markdownColorChipClass = "dm-color-chip";
+var markdownColorChipSwatchClass = "dm-color-chip-swatch";
+function getMarkdownClasses({
+  variant,
+  className
+}) {
+  return cn(markdownBaseClass, variant && `${markdownBaseClass}-${variant}`, className);
+}
 // src/classes/upload.ts
 var uploadBaseClass = "file-upload";
 var uploadTriggerClass = "file-upload-trigger";
@@ -3061,6 +3073,11 @@ export {
   mentionsNoOptionsClass,
   mentionsDropdownClass,
   mentionsBaseClass,
+  markdownFrontMatterClass,
+  markdownColorCodeClass,
+  markdownColorChipSwatchClass,
+  markdownColorChipClass,
+  markdownBaseClass,
   listSizeClasses,
   listItemTrailingClass,
   listItemTextClass,
@@ -3195,6 +3212,7 @@ export {
   getMentionsOptionClasses,
   getMentionsDropdownClasses,
   getMentionsClasses,
+  getMarkdownClasses,
   getListItemClasses,
   getListClasses,
   getLayoutSiderClasses,

package/dist/classes/markdown.d.ts

@@ -0,0 +1,9 @@
+export declare const markdownBaseClass = "markdown-body";
+export declare const markdownFrontMatterClass = "dm-front-matter";
+export declare const markdownColorCodeClass = "dm-color-code";
+export declare const markdownColorChipClass = "dm-color-chip";
+export declare const markdownColorChipSwatchClass = "dm-color-chip-swatch";
+export declare function getMarkdownClasses({ variant, className, }: {
+    variant?: string;
+    className?: string;
+}): string;

package/dist/components/markdown/Markdown.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { MarkdownProps } from "./Markdown.types";
+export declare const Markdown: React.ForwardRefExoticComponent<Omit<MarkdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/markdown/Markdown.types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+export type MarkdownFrontMatterMode = "render" | "hidden" | "disabled";
+export interface MarkdownProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Markdown source to render. */
+    markdown?: string;
+    /** Convert soft line endings to `<br>` elements. @default true */
+    breaks?: boolean;
+    /** Add a visual swatch to inline code containing a valid CSS color. @default true */
+    colorChips?: boolean;
+    /** Control handling of YAML front matter at the beginning of the source. @default "render" */
+    frontMatter?: MarkdownFrontMatterMode;
+    /** Optional color variant used to build the `markdown-body-{variant}` class. */
+    variant?: string;
+}

package/dist/components/markdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Markdown";
+export type * from "./Markdown.types";

package/dist/components/markdown/index.js

@@ -0,0 +1,171 @@
+"use client";
+
+// src/components/markdown/Markdown.tsx
+import { forwardRef } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/markdown.ts
+var markdownBaseClass = "markdown-body";
+var markdownFrontMatterClass = "dm-front-matter";
+var markdownColorCodeClass = "dm-color-code";
+var markdownColorChipClass = "dm-color-chip";
+var markdownColorChipSwatchClass = "dm-color-chip-swatch";
+function getMarkdownClasses({
+  variant,
+  className
+}) {
+  return cn(markdownBaseClass, variant && `${markdownBaseClass}-${variant}`, className);
+}
+
+// src/components/markdown/Markdown.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function splitFrontMatter(markdown) {
+  const source = markdown.startsWith("\uFEFF") ? markdown.slice(1) : markdown;
+  const lines = source.split(/\r?\n/);
+  if (lines.length < 2 || lines[0] !== "---")
+    return;
+  for (let index = 1;index < lines.length; index += 1) {
+    if (lines[index] === "---" || lines[index] === "...") {
+      return {
+        source: lines.slice(1, index).join(`
+`),
+        body: lines.slice(index + 1).join(`
+`)
+      };
+    }
+  }
+  return;
+}
+function numberInRange(value, minimum, maximum) {
+  if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(value))
+    return false;
+  const number = Number(value);
+  return Number.isFinite(number) && number >= minimum && number <= maximum;
+}
+function percentage(value) {
+  return value.endsWith("%") && numberInRange(value.slice(0, -1), 0, 100);
+}
+function alpha(value) {
+  return percentage(value) || numberInRange(value, 0, 1);
+}
+function isCssColor(value) {
+  if (!value || Array.from(value).some((character) => character.charCodeAt(0) > 127) || value.trim() !== value) {
+    return false;
+  }
+  if (/^#[\da-f]{3,4}(?:[\da-f]{2}){0,2}$/i.test(value))
+    return true;
+  const match = /^(rgba?|hsla?)\((.*)\)$/i.exec(value);
+  if (!match || match[2].includes("(") || match[2].includes(")"))
+    return false;
+  const name = match[1].toLowerCase();
+  const parts = match[2].split(",").map((part) => part.trim());
+  const hasAlpha = name.endsWith("a");
+  if (parts.length !== (hasAlpha ? 4 : 3))
+    return false;
+  if (name.startsWith("rgb")) {
+    const channels = parts.slice(0, 3);
+    const allPercentages = channels.every(percentage);
+    const allNumbers = channels.every((part) => numberInRange(part, 0, 255));
+    return (allPercentages || allNumbers) && (!hasAlpha || alpha(parts[3]));
+  }
+  const hue = parts[0].replace(/deg$/i, "");
+  return numberInRange(hue, 0, 360) && percentage(parts[1]) && percentage(parts[2]) && (!hasAlpha || alpha(parts[3]));
+}
+function markdownSource(markdown, mode) {
+  if (mode === "disabled")
+    return { body: markdown, source: undefined };
+  const frontMatter = splitFrontMatter(markdown);
+  return frontMatter ?? { body: markdown, source: undefined };
+}
+var Markdown = forwardRef(function Markdown2({
+  markdown = "",
+  breaks = true,
+  colorChips = true,
+  frontMatter = "render",
+  variant,
+  className,
+  ...props
+}, ref) {
+  const source = markdownSource(markdown, frontMatter);
+  const components = colorChips ? {
+    code({ children, className: codeClassName, node, ...codeProps }) {
+      const value = String(children).replace(/\n$/, "");
+      const isInline = node?.position?.start.line === node?.position?.end.line;
+      if (!isInline || !isCssColor(value)) {
+        return /* @__PURE__ */ jsx("code", {
+          className: codeClassName,
+          ...codeProps,
+          children
+        });
+      }
+      return /* @__PURE__ */ jsxs("code", {
+        className: markdownColorCodeClass,
+        ...codeProps,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("span", {
+            className: markdownColorChipClass,
+            role: "img",
+            "aria-label": `Color ${value}`,
+            children: /* @__PURE__ */ jsx("span", {
+              className: markdownColorChipSwatchClass,
+              style: { backgroundColor: value },
+              "aria-hidden": "true"
+            })
+          })
+        ]
+      });
+    }
+  } : undefined;
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: getMarkdownClasses({ variant, className }),
+    ...props,
+    children: [
+      frontMatter === "render" && source.source !== undefined ? /* @__PURE__ */ jsx("div", {
+        className: markdownFrontMatterClass,
+        children: /* @__PURE__ */ jsx("pre", {
+          children: /* @__PURE__ */ jsx("code", {
+            className: "language-yaml",
+            children: source.source
+          })
+        })
+      }) : null,
+      /* @__PURE__ */ jsx(ReactMarkdown, {
+        remarkPlugins: breaks ? [remarkGfm, remarkBreaks] : [remarkGfm],
+        components,
+        children: source.body
+      })
+    ]
+  });
+});
+export {
+  Markdown
+};

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.0";
+export declare const version = "0.3.1";

package/dist/index.d.ts

@@ -95,5 +95,6 @@ export * from "./components/transfer";
 export * from "./components/tree";
 export * from "./components/tree-select";
 export * from "./components/typography";
+export * from "./components/markdown";
 export * from "./components/upload";
 export * from "./components/watermark";

package/dist/index.js

@@ -79,7 +79,7 @@ var ThemeInitScript = () => {
 import { useCallback as useCallback2, useState as useState2 } from "react";
 
 // src/generated/version.ts
-var version = "0.3.0";
+var version = "0.3.1";
 
 // src/infrastructure.ts
 var theme = {
@@ -17498,8 +17498,149 @@ var Typography = Object.assign(TypographyRoot, {
   Paragraph,
   Link
 });
+// src/components/markdown/Markdown.tsx
+import { forwardRef as forwardRef78 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// src/classes/markdown.ts
+var markdownBaseClass = "markdown-body";
+var markdownFrontMatterClass = "dm-front-matter";
+var markdownColorCodeClass = "dm-color-code";
+var markdownColorChipClass = "dm-color-chip";
+var markdownColorChipSwatchClass = "dm-color-chip-swatch";
+function getMarkdownClasses({
+  variant,
+  className
+}) {
+  return cn(markdownBaseClass, variant && `${markdownBaseClass}-${variant}`, className);
+}
+
+// src/components/markdown/Markdown.tsx
+import { jsx as jsx92, jsxs as jsxs73 } from "react/jsx-runtime";
+function splitFrontMatter(markdown) {
+  const source = markdown.startsWith("\uFEFF") ? markdown.slice(1) : markdown;
+  const lines = source.split(/\r?\n/);
+  if (lines.length < 2 || lines[0] !== "---")
+    return;
+  for (let index = 1;index < lines.length; index += 1) {
+    if (lines[index] === "---" || lines[index] === "...") {
+      return {
+        source: lines.slice(1, index).join(`
+`),
+        body: lines.slice(index + 1).join(`
+`)
+      };
+    }
+  }
+  return;
+}
+function numberInRange(value, minimum, maximum) {
+  if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(value))
+    return false;
+  const number = Number(value);
+  return Number.isFinite(number) && number >= minimum && number <= maximum;
+}
+function percentage(value) {
+  return value.endsWith("%") && numberInRange(value.slice(0, -1), 0, 100);
+}
+function alpha(value) {
+  return percentage(value) || numberInRange(value, 0, 1);
+}
+function isCssColor(value) {
+  if (!value || Array.from(value).some((character) => character.charCodeAt(0) > 127) || value.trim() !== value) {
+    return false;
+  }
+  if (/^#[\da-f]{3,4}(?:[\da-f]{2}){0,2}$/i.test(value))
+    return true;
+  const match = /^(rgba?|hsla?)\((.*)\)$/i.exec(value);
+  if (!match || match[2].includes("(") || match[2].includes(")"))
+    return false;
+  const name = match[1].toLowerCase();
+  const parts = match[2].split(",").map((part) => part.trim());
+  const hasAlpha = name.endsWith("a");
+  if (parts.length !== (hasAlpha ? 4 : 3))
+    return false;
+  if (name.startsWith("rgb")) {
+    const channels = parts.slice(0, 3);
+    const allPercentages = channels.every(percentage);
+    const allNumbers = channels.every((part) => numberInRange(part, 0, 255));
+    return (allPercentages || allNumbers) && (!hasAlpha || alpha(parts[3]));
+  }
+  const hue = parts[0].replace(/deg$/i, "");
+  return numberInRange(hue, 0, 360) && percentage(parts[1]) && percentage(parts[2]) && (!hasAlpha || alpha(parts[3]));
+}
+function markdownSource(markdown, mode) {
+  if (mode === "disabled")
+    return { body: markdown, source: undefined };
+  const frontMatter = splitFrontMatter(markdown);
+  return frontMatter ?? { body: markdown, source: undefined };
+}
+var Markdown = forwardRef78(function Markdown2({
+  markdown = "",
+  breaks = true,
+  colorChips = true,
+  frontMatter = "render",
+  variant,
+  className,
+  ...props
+}, ref) {
+  const source = markdownSource(markdown, frontMatter);
+  const components = colorChips ? {
+    code({ children, className: codeClassName, node, ...codeProps }) {
+      const value = String(children).replace(/\n$/, "");
+      const isInline = node?.position?.start.line === node?.position?.end.line;
+      if (!isInline || !isCssColor(value)) {
+        return /* @__PURE__ */ jsx92("code", {
+          className: codeClassName,
+          ...codeProps,
+          children
+        });
+      }
+      return /* @__PURE__ */ jsxs73("code", {
+        className: markdownColorCodeClass,
+        ...codeProps,
+        children: [
+          children,
+          /* @__PURE__ */ jsx92("span", {
+            className: markdownColorChipClass,
+            role: "img",
+            "aria-label": `Color ${value}`,
+            children: /* @__PURE__ */ jsx92("span", {
+              className: markdownColorChipSwatchClass,
+              style: { backgroundColor: value },
+              "aria-hidden": "true"
+            })
+          })
+        ]
+      });
+    }
+  } : undefined;
+  return /* @__PURE__ */ jsxs73("div", {
+    ref,
+    className: getMarkdownClasses({ variant, className }),
+    ...props,
+    children: [
+      frontMatter === "render" && source.source !== undefined ? /* @__PURE__ */ jsx92("div", {
+        className: markdownFrontMatterClass,
+        children: /* @__PURE__ */ jsx92("pre", {
+          children: /* @__PURE__ */ jsx92("code", {
+            className: "language-yaml",
+            children: source.source
+          })
+        })
+      }) : null,
+      /* @__PURE__ */ jsx92(ReactMarkdown, {
+        remarkPlugins: breaks ? [remarkGfm, remarkBreaks] : [remarkGfm],
+        components,
+        children: source.body
+      })
+    ]
+  });
+});
 // src/components/upload/Upload.tsx
-import React84, { forwardRef as forwardRef78, useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState57 } from "react";
+import React85, { forwardRef as forwardRef79, useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState57 } from "react";
 
 // src/classes/upload.ts
 var uploadBaseClass = "file-upload";
@@ -17544,7 +17685,7 @@ function getUploadItemClasses({
 }
 
 // src/components/upload/Upload.tsx
-import { jsx as jsx92, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs74 } from "react/jsx-runtime";
 var LIST_IGNORE = Symbol("Upload.LIST_IGNORE");
 var uidSeed = 0;
 function nextUid() {
@@ -17711,12 +17852,12 @@ function UploadRoot({
     }
   }
   function renderTrigger() {
-    const trigger = children ?? /* @__PURE__ */ jsx92("button", {
+    const trigger = children ?? /* @__PURE__ */ jsx93("button", {
       type: "button",
       children: "Upload"
     });
     if (dragger) {
-      return /* @__PURE__ */ jsx92("div", {
+      return /* @__PURE__ */ jsx93("div", {
         className: uploadDropzoneClass,
         role: "button",
         tabIndex: disabled ? -1 : 0,
@@ -17747,8 +17888,8 @@ function UploadRoot({
         children: trigger
       });
     }
-    if (React84.isValidElement(trigger)) {
-      return React84.cloneElement(trigger, {
+    if (React85.isValidElement(trigger)) {
+      return React85.cloneElement(trigger, {
         className: joinClasses(uploadTriggerClass, trigger.props.className),
         onClick: (event) => {
           trigger.props.onClick?.(event);
@@ -17756,7 +17897,7 @@ function UploadRoot({
         }
       });
     }
-    return /* @__PURE__ */ jsx92("button", {
+    return /* @__PURE__ */ jsx93("button", {
       type: "button",
       className: uploadTriggerClass,
       disabled,
@@ -17764,7 +17905,7 @@ function UploadRoot({
       children: trigger
     });
   }
-  return /* @__PURE__ */ jsxs73("div", {
+  return /* @__PURE__ */ jsxs74("div", {
     ...props,
     ref,
     className: getUploadClasses({
@@ -17774,7 +17915,7 @@ function UploadRoot({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx92("input", {
+      /* @__PURE__ */ jsx93("input", {
         ref: inputRef,
         className: uploadInputClass,
         type: "file",
@@ -17788,37 +17929,37 @@ function UploadRoot({
         }
       }),
       renderTrigger(),
-      mergedFileList.length > 0 ? /* @__PURE__ */ jsx92("div", {
+      mergedFileList.length > 0 ? /* @__PURE__ */ jsx93("div", {
         className: getUploadListClasses({ listType }),
         children: mergedFileList.map((file) => {
           const size = formatSize(file.size);
-          return /* @__PURE__ */ jsxs73("div", {
+          return /* @__PURE__ */ jsxs74("div", {
             className: getUploadItemClasses({ status: file.status }),
             children: [
-              /* @__PURE__ */ jsxs73("div", {
+              /* @__PURE__ */ jsxs74("div", {
                 className: uploadItemInfoClass,
                 children: [
-                  /* @__PURE__ */ jsx92("button", {
+                  /* @__PURE__ */ jsx93("button", {
                     type: "button",
                     className: uploadPreviewClass,
                     disabled,
                     onClick: () => onPreview?.(file),
-                    children: /* @__PURE__ */ jsx92("span", {
+                    children: /* @__PURE__ */ jsx93("span", {
                       className: uploadItemNameClass,
                       children: file.name
                     })
                   }),
-                  size ? /* @__PURE__ */ jsx92("span", {
+                  size ? /* @__PURE__ */ jsx93("span", {
                     className: uploadItemSizeClass,
                     children: size
                   }) : null,
-                  typeof file.percent === "number" ? /* @__PURE__ */ jsx92("div", {
+                  typeof file.percent === "number" ? /* @__PURE__ */ jsx93("div", {
                     className: uploadProgressClass,
                     role: "progressbar",
                     "aria-valuemin": 0,
                     "aria-valuemax": 100,
                     "aria-valuenow": file.percent,
-                    children: /* @__PURE__ */ jsx92("div", {
+                    children: /* @__PURE__ */ jsx93("div", {
                       className: uploadProgressBarClass,
                       style: {
                         width: `${Math.max(0, Math.min(100, file.percent))}%`
@@ -17827,9 +17968,9 @@ function UploadRoot({
                   }) : null
                 ]
               }),
-              /* @__PURE__ */ jsx92("div", {
+              /* @__PURE__ */ jsx93("div", {
                 className: uploadItemActionsClass,
-                children: /* @__PURE__ */ jsx92("button", {
+                children: /* @__PURE__ */ jsx93("button", {
                   type: "button",
                   className: uploadRemoveClass,
                   disabled,
@@ -17845,9 +17986,9 @@ function UploadRoot({
     ]
   });
 }
-var UploadFrame = forwardRef78(UploadRoot);
+var UploadFrame = forwardRef79(UploadRoot);
 UploadFrame.displayName = "Upload";
-var Dragger = forwardRef78((props, ref) => /* @__PURE__ */ jsx92(UploadFrame, {
+var Dragger = forwardRef79((props, ref) => /* @__PURE__ */ jsx93(UploadFrame, {
   ...props,
   ref,
   dragger: true
@@ -17857,7 +17998,7 @@ var Upload = UploadFrame;
 Upload.Dragger = Dragger;
 Upload.LIST_IGNORE = LIST_IGNORE;
 // src/components/watermark/Watermark.tsx
-import { forwardRef as forwardRef79, useMemo as useMemo36 } from "react";
+import { forwardRef as forwardRef80, useMemo as useMemo36 } from "react";
 
 // src/classes/watermark.ts
 var watermarkBaseClass = "watermark";
@@ -17867,7 +18008,7 @@ function getWatermarkClasses({ className }) {
 }
 
 // src/components/watermark/Watermark.tsx
-import { jsx as jsx93, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs75 } from "react/jsx-runtime";
 function encodeSvg(svg) {
   return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
@@ -17889,7 +18030,7 @@ function createWatermarkSvg({
   }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${viewWidth}" height="${viewHeight}" viewBox="0 0 ${viewWidth} ${viewHeight}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="${color}" font-size="${fontSize}" font-family="${font?.fontFamily ?? "sans-serif"}" font-weight="${font?.fontWeight ?? 400}" font-style="${font?.fontStyle ?? "normal"}" transform="rotate(${rotate ?? -22} ${viewWidth / 2} ${viewHeight / 2})">${text}</text></svg>`;
 }
-var Watermark = forwardRef79(({
+var Watermark = forwardRef80(({
   children,
   className,
   content,
@@ -17906,17 +18047,17 @@ var Watermark = forwardRef79(({
   ...props
 }, ref) => {
   const backgroundImage = useMemo36(() => encodeSvg(createWatermarkSvg({ content, image, width, height, rotate, font })), [content, font, height, image, rotate, width]);
-  return /* @__PURE__ */ jsxs74("div", {
+  return /* @__PURE__ */ jsxs75("div", {
     ...props,
     ref,
     className: getWatermarkClasses({ className }),
     style: { position: "relative", ...style },
     children: [
-      /* @__PURE__ */ jsx93("div", {
+      /* @__PURE__ */ jsx94("div", {
         className: watermarkContentClass,
         children
       }),
-      /* @__PURE__ */ jsx93("div", {
+      /* @__PURE__ */ jsx94("div", {
         "aria-hidden": "true",
         "data-watermark-source": image ?? (typeof content === "string" || typeof content === "number" ? String(content) : undefined),
         "data-inherit": inherit || undefined,
@@ -18027,6 +18168,7 @@ export {
   MessageHolder,
   Menu,
   Mentions,
+  Markdown,
   List,
   Link,
   Layout,

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.3.0";
+var version = "0.3.1";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -23760,6 +23760,49 @@ html {
     color: var(--color-on-surface-variant);
     font-weight: 700;
   }
+
+  .dm-front-matter {
+    margin-block-end: 1rem;
+  }
+
+  .dm-color-code {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  .dm-color-chip {
+    position: relative;
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 1em;
+    height: 1em;
+    overflow: hidden;
+    border: 1px solid
+      color-mix(
+        in oklch,
+        var(--color-base-content, #111827) 56%,
+        var(--color-surface, #ffffff)
+      );
+    border-radius: 3px;
+    background-color: var(--color-surface, #ffffff);
+    background-image: conic-gradient(
+      color-mix(in oklch, var(--color-base-content, #111827) 22%, transparent)
+        25%,
+      transparent 0 50%,
+      color-mix(in oklch, var(--color-base-content, #111827) 22%, transparent) 0
+        75%,
+      transparent 0
+    );
+    background-size: 6px 6px;
+  }
+
+  .dm-color-chip-swatch {
+    position: absolute;
+    inset: 0;
+  }
 }
 
 @layer components {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -383,6 +383,10 @@
       "import": "./dist/components/typography/index.js",
       "types": "./dist/components/typography/index.d.ts"
     },
+    "./markdown": {
+      "import": "./dist/components/markdown/index.js",
+      "types": "./dist/components/markdown/index.d.ts"
+    },
     "./upload": {
       "import": "./dist/components/upload/index.js",
       "types": "./dist/components/upload/index.d.ts"
@@ -445,7 +449,10 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "react-markdown": "^10.1.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@duskmoon-dev/core": "1.17.0",