@xyd-js/composer 0.1.0-xyd.2

package/CHANGELOG.md

@@ -0,0 +1,69 @@
+# @xyd-js/themes
+
+## 0.1.0-xyd.2
+
+### Patch Changes
+
+- test
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.18
+  - @xyd-js/content@0.1.0-xyd.16
+  - @xyd-js/context@0.1.0-xyd.2
+  - @xyd-js/core@0.1.0-xyd.15
+  - @xyd-js/uniform@0.1.0-xyd.17
+
+## 0.1.0-xyd.1
+
+### Patch Changes
+
+- update packages
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.17
+  - @xyd-js/content@0.1.0-xyd.15
+  - @xyd-js/context@0.1.0-xyd.1
+  - @xyd-js/core@0.1.0-xyd.14
+  - @xyd-js/uniform@0.1.0-xyd.16
+
+## 0.1.1-xyd.3
+
+### Patch Changes
+
+- version
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.16
+  - @xyd-js/components@0.1.0-xyd.11
+  - @xyd-js/framework@0.1.0-xyd.32
+  - @xyd-js/ui@0.1.0-xyd.16
+
+## 0.1.1-xyd.2
+
+### Patch Changes
+
+- fix again
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.15
+  - @xyd-js/components@0.1.0-xyd.10
+  - @xyd-js/framework@0.1.0-xyd.30
+  - @xyd-js/ui@0.1.0-xyd.15
+
+## 0.1.1-xyd.1
+
+### Patch Changes
+
+- fix for theme
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.14
+  - @xyd-js/components@0.1.0-xyd.9
+  - @xyd-js/framework@0.1.0-xyd.29
+  - @xyd-js/ui@0.1.0-xyd.14
+
+## 0.1.1-xyd.0
+
+### Patch Changes
+
+- refactor, ui tweaks
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.13
+  - @xyd-js/components@0.1.0-xyd.8
+  - @xyd-js/framework@0.1.0-xyd.28
+  - @xyd-js/ui@0.1.0-xyd.13

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,7 @@
+* gusto - general purpose docs theme
+
+* poetry - theme for docs with unique minimalistic design
+
+* plato - designed for API and SDK heavy products
+
+* picasso - theme used for creating a design system docs

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+declare class Composer {
+    private atlasMetaComponent;
+}
+
+export { Composer };

package/dist/index.js

@@ -0,0 +1,440 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/Composer.ts
+import * as React from "react";
+import { toMarkdown } from "mdast-util-to-markdown";
+import { mdxToMarkdown } from "mdast-util-mdx";
+import { toHast } from "mdast-util-to-hast";
+import { toHtml } from "hast-util-to-html";
+import { parse } from "@babel/parser";
+import { highlight } from "codehike/code";
+import { marked } from "marked";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { htmlToJsx } from "html-to-jsx-transform";
+
+// src/decorators.ts
+import { registerMetaComponent } from "@xyd-js/context";
+function metaComponent(name, componentName) {
+  return function(target, context) {
+    registerMetaComponent(
+      name,
+      componentName || name,
+      target
+    );
+  };
+}
+
+// src/Composer.ts
+var _atlasMetaComponent_dec, _init;
+_atlasMetaComponent_dec = [metaComponent("atlas", "Atlas")];
+var Composer = class {
+  constructor() {
+    __runInitializers(_init, 5, this);
+  }
+  async atlasMetaComponent(themeSettings, props, vars, treeChilds) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const outputVarExamples = {
+      groups: []
+    };
+    const oneExample = ((_a = vars.examples) == null ? void 0 : _a.length) === 1 && !Array.isArray(vars.examples[0]);
+    function createExampleObject(example) {
+      const highlighted = example.highlighted || example;
+      return {
+        codeblock: {
+          title: example.meta,
+          tabs: [
+            {
+              title: example.meta,
+              language: example.lang,
+              code: example.code,
+              highlighted
+            }
+          ]
+        }
+      };
+    }
+    if (oneExample) {
+      const example = (_b = vars.examples) == null ? void 0 : _b[0];
+      if (Array.isArray(example) || !example) {
+        return;
+      }
+      outputVarExamples.groups.push({
+        examples: [createExampleObject(example)]
+      });
+    } else {
+      (_c = vars.examples) == null ? void 0 : _c.forEach((item) => {
+        if (Array.isArray(item)) {
+          const groupTitle = item[0];
+          const groupExamples = item.slice(1);
+          const exampleGroup = {
+            examples: []
+          };
+          groupExamples.forEach((example) => {
+            if (example && typeof example === "object") {
+              exampleGroup.examples.push(createExampleObject(example));
+            }
+          });
+          if (exampleGroup.examples.length > 0) {
+            outputVarExamples.groups.push(exampleGroup);
+          }
+        } else if (item && typeof item === "object") {
+          const exampleGroup = {
+            examples: [createExampleObject(item)]
+          };
+          outputVarExamples.groups.push(exampleGroup);
+        }
+      });
+    }
+    const reactElements = [];
+    for (const child of treeChilds) {
+      if (isStandardMdastType(child.type)) {
+        const hast = toHast(child);
+        const html = toHtml(hast);
+        if (child.type === "heading" && child.depth === 1) {
+          const firstChild = child.children[0];
+          if (firstChild.type === "text") {
+            props.references[0].title = firstChild.value;
+          }
+        } else {
+          const jsx = htmlToJsx(html);
+          const reactTree = jsxStringToReactTree(jsx);
+          if (reactTree) {
+            reactElements.push(reactTree);
+          }
+        }
+        continue;
+      } else if (isMdxElement(child.type)) {
+        const jsxString = toMarkdown(child, {
+          extensions: [mdxToMarkdown()],
+          handlers: {
+            // TODO: find better solution how to convert such as structure?
+            list(node, parent, context) {
+              const items = node.children.map((item) => context.containerFlow(item, node)).join("\n");
+              return `<ul>
+${items}
+</ul>`;
+            },
+            listItem(node, parent, context) {
+              const content = context.containerFlow(node, parent).trim();
+              return `<li>${content}</li>`;
+            }
+          }
+        });
+        const reactTree = jsxStringToReactTree(jsxString);
+        if (reactTree) {
+          reactElements.push(reactTree);
+        }
+      }
+    }
+    const propDescription = (_e = (_d = props.references) == null ? void 0 : _d[0]) == null ? void 0 : _e.description;
+    if (propDescription) {
+      if (typeof propDescription === "string") {
+        const content = propDescription.replace(/^---[\s\S]*?---\n/, "");
+        const md = fromMarkdown(content);
+        const hast = toHast(md);
+        const html = toHtml(hast);
+        const jsx = htmlToJsx(html);
+        const reactTree = jsxStringToReactTree(jsx);
+        if (reactTree) {
+          props.references[0].description = reactTree;
+        } else {
+          props.references[0].description = content;
+        }
+      }
+    }
+    if (reactElements.length > 0) {
+      if ((_g = (_f = props.references) == null ? void 0 : _f[0]) == null ? void 0 : _g.description) {
+        reactElements.unshift(props.references[0].description);
+      }
+      const combinedReactTree = React.createElement(React.Fragment, null, ...reactElements);
+      if ((_h = props.references) == null ? void 0 : _h[0]) {
+        props.references[0].description = combinedReactTree;
+      }
+    }
+    if (!outputVarExamples.groups.length && ((_j = (_i = props.references[0]) == null ? void 0 : _i.examples.groups) == null ? void 0 : _j.length)) {
+      const promises = [];
+      (_k = props.references[0].examples) == null ? void 0 : _k.groups.forEach((group) => {
+        group.examples.forEach((example) => {
+          example.codeblock.tabs.forEach((tab) => {
+            async function highlightCode() {
+              var _a2;
+              const highlighted = await highlight({
+                value: tab.code,
+                lang: tab.language,
+                meta: tab.title
+              }, ((_a2 = themeSettings == null ? void 0 : themeSettings.coder) == null ? void 0 : _a2.syntaxHighlight) || "github-dark");
+              tab.highlighted = highlighted;
+            }
+            promises.push(highlightCode());
+          });
+        });
+      });
+      await Promise.all(promises);
+    } else {
+      if ((_l = props.references) == null ? void 0 : _l[0]) {
+        props.references[0].examples = outputVarExamples;
+      }
+    }
+    if ((_n = (_m = props.references) == null ? void 0 : _m[0]) == null ? void 0 : _n.definitions) {
+      props.references[0].definitions = processDefinitionProperties(props.references[0].definitions);
+    }
+    return props;
+  }
+};
+_init = __decoratorStart(null);
+__decorateElement(_init, 1, "atlasMetaComponent", _atlasMetaComponent_dec, Composer);
+__decoratorMetadata(_init, Composer);
+function buildElement(node) {
+  if (!node) return null;
+  switch (node.type) {
+    case "JSXElement": {
+      let type;
+      const nameNode = node.openingElement.name;
+      if (nameNode.type === "JSXMemberExpression") {
+        const parts = [];
+        let curr = nameNode;
+        while (curr) {
+          if (curr.property) parts.unshift(curr.property.name);
+          curr = curr.object;
+        }
+        type = parts.join(".");
+      } else {
+        type = nameNode.name;
+      }
+      const props = {};
+      for (const attr of node.openingElement.attributes) {
+        if (attr.type === "JSXSpreadAttribute") {
+          Object.assign(props, evaluateExpression(attr.argument));
+          continue;
+        }
+        const key = attr.name.name;
+        let value;
+        if (!attr.value) {
+          value = true;
+        } else if (attr.value.type === "StringLiteral" || attr.value.type === "NumericLiteral" || attr.value.type === "BooleanLiteral") {
+          value = attr.value.value;
+        } else if (attr.value.type === "JSXExpressionContainer") {
+          value = evaluateExpression(attr.value.expression);
+        }
+        props[key] = value;
+      }
+      const children = node.children.map((child) => {
+        if (child.type === "JSXText") {
+          const text = child.value.replace(/\s+/g, " ");
+          return text.trim() ? text : null;
+        }
+        if (child.type === "JSXExpressionContainer") {
+          return child.expression.type === "JSXElement" || child.expression.type === "JSXFragment" ? buildElement(child.expression) : evaluateExpression(child.expression);
+        }
+        if (child.type === "JSXElement" || child.type === "JSXFragment") {
+          return buildElement(child);
+        }
+        return null;
+      }).filter((c) => c !== null);
+      return React.createElement(type, props, ...children);
+    }
+    case "JSXFragment": {
+      const children = node.children.map(
+        (child) => child.type === "JSXElement" || child.type === "JSXFragment" ? buildElement(child) : child.type === "JSXText" ? child.value.trim() || null : null
+      ).filter(Boolean);
+      return React.createElement(React.Fragment, null, ...children);
+    }
+    default:
+      return null;
+  }
+}
+function evaluateExpression(expr) {
+  switch (expr.type) {
+    case "StringLiteral":
+      return expr.value;
+    case "NumericLiteral":
+      return expr.value;
+    case "BooleanLiteral":
+      return expr.value;
+    case "ObjectExpression": {
+      const obj = {};
+      for (const prop of expr.properties) {
+        if (prop.type === "ObjectProperty" && prop.key.type === "Identifier") {
+          obj[prop.key.name] = evaluateExpression(prop.value);
+        }
+      }
+      return obj;
+    }
+    // Add more cases (Identifier, CallExpression, etc.) as needed
+    default:
+      return void 0;
+  }
+}
+function findJSX(node) {
+  if (!node || typeof node !== "object") return null;
+  if (node.type === "JSXElement" || node.type === "JSXFragment") return node;
+  for (const key of Object.keys(node)) {
+    const val = node[key];
+    if (Array.isArray(val)) {
+      for (const child of val) {
+        const found = findJSX(child);
+        if (found) return found;
+      }
+    } else {
+      const found = findJSX(val);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function jsxStringToReactTree(jsxString = "") {
+  const ast = parse(jsxString, { sourceType: "module", plugins: ["jsx"] });
+  const rootJSX = findJSX(ast);
+  if (!rootJSX) {
+    return null;
+  }
+  const reactTree = buildElement(rootJSX);
+  return reactTree;
+}
+function processDefinitionProperties(definitions) {
+  if (!definitions || !Array.isArray(definitions)) {
+    return definitions;
+  }
+  return definitions.map((definition) => {
+    if (definition.variants && Array.isArray(definition.variants)) {
+      for (const variant of definition.variants) {
+        if (variant.properties && Array.isArray(variant.properties)) {
+          variant.properties = processDefinitionProperty(variant.properties);
+        }
+      }
+    }
+    if (definition.properties && Array.isArray(definition.properties)) {
+      definition.properties = processDefinitionProperty(definition.properties);
+    }
+    if (definition.description && typeof definition.description === "string") {
+      const md = fromMarkdown(definition.description);
+      const hast = toHast(md);
+      const html = toHtml(hast);
+      const jsx = htmlToJsx(html);
+      const reactTree = jsxStringToReactTree(jsx);
+      if (reactTree) {
+        definition.description = reactTree;
+      }
+    }
+    return definition;
+  });
+}
+function processDefinitionProperty(properties) {
+  if (!properties || !Array.isArray(properties)) {
+    return properties;
+  }
+  return properties.map((property) => {
+    const newProperty = {
+      ...property
+    };
+    if (typeof newProperty.description === "string" && isMarkdownText(newProperty.description)) {
+      const mdast = fromMarkdown(newProperty.description);
+      const hast = toHast(mdast);
+      const html = toHtml(hast);
+      const jsx = htmlToJsx(html);
+      const reactTree = jsxStringToReactTree(jsx);
+      if (reactTree) {
+        newProperty.description = reactTree;
+      }
+    }
+    if (property.properties && Array.isArray(property.properties)) {
+      newProperty.properties = processDefinitionProperty(property.properties);
+    }
+    return newProperty;
+  });
+}
+function isMarkdownText(text) {
+  const tokens = marked.lexer(text);
+  let found = false;
+  marked.walkTokens(tokens, (token) => {
+    if (!["text", "paragraph", "space", "newline"].includes(token.type)) {
+      found = true;
+    }
+  });
+  return found;
+}
+var standardMdastTypes = [
+  "root",
+  "paragraph",
+  "heading",
+  "text",
+  "emphasis",
+  "strong",
+  "delete",
+  "blockquote",
+  "code",
+  "link",
+  "image",
+  "list",
+  "listItem",
+  "table",
+  "tableRow",
+  "tableCell",
+  "html",
+  "break",
+  "thematicBreak",
+  "definition",
+  "footnoteDefinition",
+  "footnoteReference",
+  "inlineCode",
+  "linkReference",
+  "imageReference",
+  "footnote",
+  "tableCaption"
+];
+function isStandardMdastType(type) {
+  return standardMdastTypes.includes(type);
+}
+function isMdxElement(type) {
+  return type === "mdxJsxFlowElement";
+}
+export {
+  Composer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Composer.ts","../src/decorators.ts"],"sourcesContent":["import * as React from \"react\"\nimport type { RootContent } from \"mdast\";\nimport { toMarkdown } from \"mdast-util-to-markdown\";\nimport { mdxToMarkdown } from \"mdast-util-mdx\";\nimport { toHast } from 'mdast-util-to-hast'\nimport { toHtml } from 'hast-util-to-html'\nimport { parse } from '@babel/parser';\nimport { highlight } from \"codehike/code\";\nimport { marked } from 'marked';\nimport { fromMarkdown } from 'mdast-util-from-markdown';\nimport { htmlToJsx } from \"html-to-jsx-transform\";\n\nimport { type AtlasProps } from \"@xyd-js/atlas\";\nimport { type Theme as ThemeSettings } from \"@xyd-js/core\"\n\nimport { VarCode } from \"@xyd-js/content\";\nimport { ExampleRoot, Definition, DefinitionProperty } from \"@xyd-js/uniform\";\n\nimport { metaComponent } from './decorators';\n\n// TODO: !!!! REFACTOR !!!\n\ninterface AtlasVars {\n    examples?: VarCode\n}\n\n// TODO: get object from atlas\n// Define the type for an example object\ninterface ExampleObject {\n    codeblock: {\n        title: string;\n        tabs: {\n            title: string;\n            language: string;\n            code: string;\n            highlighted: any; // TODO: fix\n        }[];\n    };\n}\n\n// Define the type for an example group\ninterface ExampleGroup {\n    examples: ExampleObject[];\n}\n\nexport class Composer {\n    // TODO: !!! COMPOSE API !!!!\n    // TODO: this.themeSettings but currently issues with decorators\n    @metaComponent(\"atlas\", \"Atlas\")\n    private async atlasMetaComponent(\n        themeSettings: ThemeSettings,\n        props: AtlasProps,\n        vars: AtlasVars,\n        treeChilds: readonly RootContent[]\n    ) {\n        //@ts-ignore\n        const outputVarExamples: ExampleRoot = {\n            groups: []\n        }\n\n        const oneExample = vars.examples?.length === 1 && !Array.isArray(vars.examples[0])\n\n        // Helper function to create an example object\n        function createExampleObject(example: any): ExampleObject {\n            // Extract the highlighted property correctly\n            const highlighted = example.highlighted || example;\n\n            return {\n                codeblock: {\n                    title: example.meta,\n                    tabs: [\n                        {\n                            title: example.meta,\n                            language: example.lang,\n                            code: example.code,\n                            highlighted: highlighted\n                        }\n                    ]\n                }\n            };\n        }\n\n        if (oneExample) {\n            const example = vars.examples?.[0]\n            if (Array.isArray(example) || !example) {\n                return\n            }\n\n            outputVarExamples.groups.push({\n                examples: [createExampleObject(example)]\n            })\n        } else {\n            // Process each example or group of examples\n            vars.examples?.forEach((item) => {\n                if (Array.isArray(item)) {\n                    // This is a group with a title as the first element\n                    const groupTitle = item[0];\n                    const groupExamples = item.slice(1);\n\n                    const exampleGroup: ExampleGroup = {\n                        examples: []\n                    };\n\n                    // Process each example in the group\n                    groupExamples.forEach((example) => {\n                        if (example && typeof example === 'object') {\n                            exampleGroup.examples.push(createExampleObject(example));\n                        }\n                    });\n\n                    if (exampleGroup.examples.length > 0) {\n                        outputVarExamples.groups.push(exampleGroup);\n                    }\n                } else if (item && typeof item === 'object') {\n                    // This is a single example\n                    const exampleGroup: ExampleGroup = {\n                        examples: [createExampleObject(item)]\n                    };\n\n                    outputVarExamples.groups.push(exampleGroup);\n                }\n            });\n        }\n\n        const reactElements: React.ReactNode[] = []\n\n        // TODO: !! IMPORTANT !! BETTER COMPOSE TRANSFORMATION\n        for (const child of treeChilds) {\n            if (isStandardMdastType(child.type)) {\n                const hast = toHast(child)\n                const html = toHtml(hast)\n\n                if (child.type === \"heading\" && child.depth === 1) {\n                    const firstChild = child.children[0];\n                    if (firstChild.type === 'text') {\n                        props.references[0].title = firstChild.value;\n                    }\n                } else {\n                    const jsx = htmlToJsx(html);\n                    const reactTree = jsxStringToReactTree(jsx);\n                    if (reactTree) {\n                        reactElements.push(reactTree)\n                    }\n                }\n\n                continue\n            } else if (isMdxElement(child.type)) {\n                const jsxString = toMarkdown(child, {\n                    extensions: [mdxToMarkdown()],\n                    handlers: {// TODO: find better solution how to convert such as structure?\n                        list(node, parent, context) {\n                            // call containerFlow as a method on context, so `this` stays correct\n                            const items = node.children\n                                .map(item => context.containerFlow(item, node))\n                                .join('\\n')\n                            return `<ul>\\n${items}\\n</ul>`\n                        },\n                        listItem(node, parent, context) {\n                            // Use a type assertion to handle the parent parameter\n                            const content = context.containerFlow(node, parent as any).trim()\n                            return `<li>${content}</li>`\n                        },\n                    }\n                });\n\n                const reactTree = jsxStringToReactTree(jsxString)\n                if (reactTree) {\n                    reactElements.push(reactTree)\n                }\n            }\n        }\n\n        const propDescription = props.references?.[0]?.description\n        if (propDescription) {\n            // Sanitize frontmatter description\n            if (typeof propDescription === \"string\") {\n                // Remove frontmatter using regex\n                const content = propDescription.replace(/^---[\\s\\S]*?---\\n/, '');\n\n                const md = fromMarkdown(content)\n                const hast = toHast(md)\n                const html = toHtml(hast)\n                const jsx = htmlToJsx(html);\n                const reactTree = jsxStringToReactTree(jsx);\n                if (reactTree) {\n                    props.references[0].description = reactTree;\n                } else {\n                    props.references[0].description = content\n                }\n            }\n        }\n\n        if (reactElements.length > 0) {\n            if (props.references?.[0]?.description) {\n                reactElements.unshift(props.references[0].description)\n            }\n            // Create a combined React element from all the elements\n            const combinedReactTree = React.createElement(React.Fragment, null, ...reactElements)\n\n            if (props.references?.[0]) {\n                props.references[0].description = combinedReactTree\n            }\n        }\n\n        if (\n            !outputVarExamples.groups.length &&\n            props.references[0]?.examples.groups?.length\n        ) {\n            const promises: Promise<void>[] = []\n\n            props.references[0].examples?.groups.forEach(group => {\n                group.examples.forEach(example => {\n                    example.codeblock.tabs.forEach(tab => {\n\n                        async function highlightCode() {\n                            const highlighted = await highlight({\n                                value: tab.code,\n                                lang: tab.language,\n                                meta: tab.title,\n                            }, themeSettings?.coder?.syntaxHighlight || \"github-dark\")\n\n                            tab.highlighted = highlighted\n                        }\n\n                        promises.push(highlightCode());\n                    });\n                });\n            });\n\n            await Promise.all(promises);\n        } else {\n            if (props.references?.[0]) {\n                props.references[0].examples = outputVarExamples;\n            }\n        }\n\n        // Process definition properties recursively to convert markdown descriptions to React trees\n        if (props.references?.[0]?.definitions) {\n            props.references[0].definitions = processDefinitionProperties(props.references[0].definitions);\n        }\n\n        return props\n        // TODO: in the future return a component directly here but we need good mechanism for transpiling?\n    }\n}\n\nfunction buildElement(node) {\n    if (!node) return null;\n    switch (node.type) {\n        case 'JSXElement': {\n            // Resolve type (string for custom components)\n            let type;\n            const nameNode = node.openingElement.name;\n            if (nameNode.type === 'JSXMemberExpression') {\n                // flatten Foo.Bar to \"Foo.Bar\"\n                const parts: string[] = [];\n                let curr = nameNode;\n                while (curr) {\n                    if (curr.property) parts.unshift(curr.property.name);\n                    curr = curr.object;\n                }\n                type = parts.join('.');\n            } else {\n                type = nameNode.name;\n            }\n\n            // Props\n            const props = {};\n            for (const attr of node.openingElement.attributes) {\n                if (attr.type === 'JSXSpreadAttribute') {\n                    Object.assign(props, evaluateExpression(attr.argument));\n                    continue;\n                }\n                const key = attr.name.name;\n                let value;\n                if (!attr.value) {\n                    value = true;\n                } else if (attr.value.type === 'StringLiteral' || attr.value.type === 'NumericLiteral' || attr.value.type === 'BooleanLiteral') {\n                    value = attr.value.value;\n                } else if (attr.value.type === 'JSXExpressionContainer') {\n                    value = evaluateExpression(attr.value.expression);\n                }\n                props[key] = value;\n            }\n\n            // Children\n            const children = node.children\n                .map(child => {\n                    if (child.type === 'JSXText') {\n                        const text = child.value.replace(/\\s+/g, ' ');\n                        return text.trim() ? text : null;\n                    }\n                    if (child.type === 'JSXExpressionContainer') {\n                        return child.expression.type === 'JSXElement' || child.expression.type === 'JSXFragment'\n                            ? buildElement(child.expression)\n                            : evaluateExpression(child.expression);\n                    }\n                    if (child.type === 'JSXElement' || child.type === 'JSXFragment') {\n                        return buildElement(child);\n                    }\n                    return null;\n                })\n                .filter(c => c !== null);\n\n            // Create React element\n            return React.createElement(type, props, ...children);\n        }\n\n        case 'JSXFragment': {\n            const children = node.children\n                .map(child => (child.type === 'JSXElement' || child.type === 'JSXFragment')\n                    ? buildElement(child)\n                    : (child.type === 'JSXText' ? child.value.trim() || null : null)\n                )\n                .filter(Boolean);\n            return React.createElement(React.Fragment, null, ...children);\n        }\n\n        default:\n            return null;\n    }\n}\n\n// Simplistic evaluator for static expressions: identifiers -> undefined, literals -> value, objects -> {}\nfunction evaluateExpression(expr) {\n    switch (expr.type) {\n        case 'StringLiteral': return expr.value;\n        case 'NumericLiteral': return expr.value;\n        case 'BooleanLiteral': return expr.value;\n        case 'ObjectExpression': {\n            const obj = {};\n            for (const prop of expr.properties) {\n                if (prop.type === 'ObjectProperty' && prop.key.type === 'Identifier') {\n                    obj[prop.key.name] = evaluateExpression(prop.value);\n                }\n            }\n            return obj;\n        }\n        // Add more cases (Identifier, CallExpression, etc.) as needed\n        default:\n            return undefined;\n    }\n}\n\n// 4) Locate first JSX node\nfunction findJSX(node) {\n    if (!node || typeof node !== 'object') return null;\n    if (node.type === 'JSXElement' || node.type === 'JSXFragment') return node;\n    for (const key of Object.keys(node)) {\n        const val = node[key];\n        if (Array.isArray(val)) {\n            for (const child of val) {\n                const found = findJSX(child);\n                if (found) return found;\n            }\n        } else {\n            const found = findJSX(val);\n            if (found) return found;\n        }\n    }\n    return null;\n}\n\nfunction jsxStringToReactTree(jsxString: string = \"\") {\n    const ast = parse(jsxString, { sourceType: 'module', plugins: ['jsx'] });\n    const rootJSX = findJSX(ast);\n    if (!rootJSX) {\n        return null\n    }\n\n    const reactTree = buildElement(rootJSX)\n\n    return reactTree\n}\n\n/**\n * Recursively processes definition properties to convert markdown descriptions to React trees\n * @param definitions The definitions to process\n * @returns The processed definitions with markdown descriptions converted to React trees\n */\nfunction processDefinitionProperties(definitions: Definition[]): Definition[] {\n    if (!definitions || !Array.isArray(definitions)) {\n        return definitions;\n    }\n\n    return definitions.map(definition => {\n        // Process variants recursively\n        if (definition.variants && Array.isArray(definition.variants)) {\n            for (const variant of definition.variants) {\n                if (variant.properties && Array.isArray(variant.properties)) {\n                    variant.properties = processDefinitionProperty(variant.properties);\n                }\n            }\n        }\n\n        // Process the definition's properties recursively\n        if (definition.properties && Array.isArray(definition.properties)) {\n            definition.properties = processDefinitionProperty(definition.properties);\n        }\n\n        if (definition.description && typeof definition.description === \"string\") {\n            const md = fromMarkdown(definition.description)\n            const hast = toHast(md)\n            const html = toHtml(hast)\n            const jsx = htmlToJsx(html);\n            const reactTree = jsxStringToReactTree(jsx);\n            if (reactTree) {\n                definition.description = reactTree;\n            }\n        }\n        return definition;\n    });\n}\n\n/**\n * Recursively processes definition properties to convert markdown descriptions to React trees\n * @param properties The properties to process\n * @returns The processed properties with markdown descriptions converted to React trees\n */\nfunction processDefinitionProperty(properties: DefinitionProperty[]): DefinitionProperty[] {\n    if (!properties || !Array.isArray(properties)) {\n        return properties;\n    }\n\n    return properties.map(property => {\n        const newProperty: DefinitionProperty = {\n            ...property,\n        };\n\n        if (typeof newProperty.description === 'string' && isMarkdownText(newProperty.description)) {\n            const mdast = fromMarkdown(newProperty.description);\n            const hast = toHast(mdast);\n            const html = toHtml(hast);\n            const jsx = htmlToJsx(html);\n            const reactTree = jsxStringToReactTree(jsx);\n            if (reactTree) {\n                newProperty.description = reactTree;\n            }\n        }\n\n        if (property.properties && Array.isArray(property.properties)) {\n            newProperty.properties = processDefinitionProperty(property.properties);\n        }\n\n        return newProperty;\n    });\n}\n\n/**\n * Returns true if the input contains any non-plain-text Markdown tokens.\n */\nfunction isMarkdownText(text: string) {\n    // 1) Lex into a token tree\n    const tokens = marked.lexer(text);\n    let found = false;\n\n    // 2) Traverse *every* token (including nested) and flag any non-plain-text kinds\n    marked.walkTokens(tokens, token => {\n        // ignore pure text/whitespace\n        if (!['text', 'paragraph', 'space', 'newline'].includes(token.type)) {\n            found = true;\n        }\n    });\n\n    return found;\n}\n\n\n\n/**\n * List of standard MDAST node types\n */\nconst standardMdastTypes = [\n    'root',\n    'paragraph',\n    'heading',\n    'text',\n    'emphasis',\n    'strong',\n    'delete',\n    'blockquote',\n    'code',\n    'link',\n    'image',\n    'list',\n    'listItem',\n    'table',\n    'tableRow',\n    'tableCell',\n    'html',\n    'break',\n    'thematicBreak',\n    'definition',\n    'footnoteDefinition',\n    'footnoteReference',\n    'inlineCode',\n    'linkReference',\n    'imageReference',\n    'footnote',\n    'tableCaption'\n];\n\n\n/**\n * Checks if a given type is a standard MDAST type\n * @param type The node type to check\n * @returns True if the type is a standard MDAST type, false otherwise\n */\nfunction isStandardMdastType(type: string): boolean {\n    return standardMdastTypes.includes(type);\n}\n\nfunction isMdxElement(type: string): boolean {\n    return type === 'mdxJsxFlowElement'\n}\n","import { registerMetaComponent } from \"@xyd-js/context\";\n\nexport function metaComponent<P, V>(\n    name: string,\n    componentName?: string\n) {\n    return function (\n        target: any,\n        context: any\n    ) {\n        registerMetaComponent(\n            name,\n            componentName || name,\n            target\n        );\n    };\n}\n\n"],"mappings":"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","names":["_a"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@xyd-js/composer",
+  "version": "0.1.0-xyd.2",
+  "description": "xyd composer API",
+  "main": "dist/index.js",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@babel/parser": "^7.27.2",
+    "codehike": "^1.0.7",
+    "hast-util-to-html": "^9.0.5",
+    "html-to-jsx-transform": "^1.2.0",
+    "marked": "^15.0.11",
+    "mdast": "^3.0.0",
+    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-mdx": "^3.0.0",
+    "mdast-util-to-hast": "^13.2.0",
+    "mdast-util-to-markdown": "^2.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@xyd-js/atlas": "0.1.0-xyd.18",
+    "@xyd-js/core": "0.1.0-xyd.15",
+    "@xyd-js/uniform": "0.1.0-xyd.17",
+    "@xyd-js/content": "0.1.0-xyd.16",
+    "@xyd-js/context": "0.1.0-xyd.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.0",
+    "typescript": "5.6.2"
+  },
+  "scripts": {
+    "build": "tsup"
+  }
+}

package/src/Composer.ts

@@ -0,0 +1,515 @@
+import * as React from "react"
+import type { RootContent } from "mdast";
+import { toMarkdown } from "mdast-util-to-markdown";
+import { mdxToMarkdown } from "mdast-util-mdx";
+import { toHast } from 'mdast-util-to-hast'
+import { toHtml } from 'hast-util-to-html'
+import { parse } from '@babel/parser';
+import { highlight } from "codehike/code";
+import { marked } from 'marked';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { htmlToJsx } from "html-to-jsx-transform";
+
+import { type AtlasProps } from "@xyd-js/atlas";
+import { type Theme as ThemeSettings } from "@xyd-js/core"
+
+import { VarCode } from "@xyd-js/content";
+import { ExampleRoot, Definition, DefinitionProperty } from "@xyd-js/uniform";
+
+import { metaComponent } from './decorators';
+
+// TODO: !!!! REFACTOR !!!
+
+interface AtlasVars {
+    examples?: VarCode
+}
+
+// TODO: get object from atlas
+// Define the type for an example object
+interface ExampleObject {
+    codeblock: {
+        title: string;
+        tabs: {
+            title: string;
+            language: string;
+            code: string;
+            highlighted: any; // TODO: fix
+        }[];
+    };
+}
+
+// Define the type for an example group
+interface ExampleGroup {
+    examples: ExampleObject[];
+}
+
+export class Composer {
+    // TODO: !!! COMPOSE API !!!!
+    // TODO: this.themeSettings but currently issues with decorators
+    @metaComponent("atlas", "Atlas")
+    private async atlasMetaComponent(
+        themeSettings: ThemeSettings,
+        props: AtlasProps,
+        vars: AtlasVars,
+        treeChilds: readonly RootContent[]
+    ) {
+        //@ts-ignore
+        const outputVarExamples: ExampleRoot = {
+            groups: []
+        }
+
+        const oneExample = vars.examples?.length === 1 && !Array.isArray(vars.examples[0])
+
+        // Helper function to create an example object
+        function createExampleObject(example: any): ExampleObject {
+            // Extract the highlighted property correctly
+            const highlighted = example.highlighted || example;
+
+            return {
+                codeblock: {
+                    title: example.meta,
+                    tabs: [
+                        {
+                            title: example.meta,
+                            language: example.lang,
+                            code: example.code,
+                            highlighted: highlighted
+                        }
+                    ]
+                }
+            };
+        }
+
+        if (oneExample) {
+            const example = vars.examples?.[0]
+            if (Array.isArray(example) || !example) {
+                return
+            }
+
+            outputVarExamples.groups.push({
+                examples: [createExampleObject(example)]
+            })
+        } else {
+            // Process each example or group of examples
+            vars.examples?.forEach((item) => {
+                if (Array.isArray(item)) {
+                    // This is a group with a title as the first element
+                    const groupTitle = item[0];
+                    const groupExamples = item.slice(1);
+
+                    const exampleGroup: ExampleGroup = {
+                        examples: []
+                    };
+
+                    // Process each example in the group
+                    groupExamples.forEach((example) => {
+                        if (example && typeof example === 'object') {
+                            exampleGroup.examples.push(createExampleObject(example));
+                        }
+                    });
+
+                    if (exampleGroup.examples.length > 0) {
+                        outputVarExamples.groups.push(exampleGroup);
+                    }
+                } else if (item && typeof item === 'object') {
+                    // This is a single example
+                    const exampleGroup: ExampleGroup = {
+                        examples: [createExampleObject(item)]
+                    };
+
+                    outputVarExamples.groups.push(exampleGroup);
+                }
+            });
+        }
+
+        const reactElements: React.ReactNode[] = []
+
+        // TODO: !! IMPORTANT !! BETTER COMPOSE TRANSFORMATION
+        for (const child of treeChilds) {
+            if (isStandardMdastType(child.type)) {
+                const hast = toHast(child)
+                const html = toHtml(hast)
+
+                if (child.type === "heading" && child.depth === 1) {
+                    const firstChild = child.children[0];
+                    if (firstChild.type === 'text') {
+                        props.references[0].title = firstChild.value;
+                    }
+                } else {
+                    const jsx = htmlToJsx(html);
+                    const reactTree = jsxStringToReactTree(jsx);
+                    if (reactTree) {
+                        reactElements.push(reactTree)
+                    }
+                }
+
+                continue
+            } else if (isMdxElement(child.type)) {
+                const jsxString = toMarkdown(child, {
+                    extensions: [mdxToMarkdown()],
+                    handlers: {// TODO: find better solution how to convert such as structure?
+                        list(node, parent, context) {
+                            // call containerFlow as a method on context, so `this` stays correct
+                            const items = node.children
+                                .map(item => context.containerFlow(item, node))
+                                .join('\n')
+                            return `<ul>\n${items}\n</ul>`
+                        },
+                        listItem(node, parent, context) {
+                            // Use a type assertion to handle the parent parameter
+                            const content = context.containerFlow(node, parent as any).trim()
+                            return `<li>${content}</li>`
+                        },
+                    }
+                });
+
+                const reactTree = jsxStringToReactTree(jsxString)
+                if (reactTree) {
+                    reactElements.push(reactTree)
+                }
+            }
+        }
+
+        const propDescription = props.references?.[0]?.description
+        if (propDescription) {
+            // Sanitize frontmatter description
+            if (typeof propDescription === "string") {
+                // Remove frontmatter using regex
+                const content = propDescription.replace(/^---[\s\S]*?---\n/, '');
+
+                const md = fromMarkdown(content)
+                const hast = toHast(md)
+                const html = toHtml(hast)
+                const jsx = htmlToJsx(html);
+                const reactTree = jsxStringToReactTree(jsx);
+                if (reactTree) {
+                    props.references[0].description = reactTree;
+                } else {
+                    props.references[0].description = content
+                }
+            }
+        }
+
+        if (reactElements.length > 0) {
+            if (props.references?.[0]?.description) {
+                reactElements.unshift(props.references[0].description)
+            }
+            // Create a combined React element from all the elements
+            const combinedReactTree = React.createElement(React.Fragment, null, ...reactElements)
+
+            if (props.references?.[0]) {
+                props.references[0].description = combinedReactTree
+            }
+        }
+
+        if (
+            !outputVarExamples.groups.length &&
+            props.references[0]?.examples.groups?.length
+        ) {
+            const promises: Promise<void>[] = []
+
+            props.references[0].examples?.groups.forEach(group => {
+                group.examples.forEach(example => {
+                    example.codeblock.tabs.forEach(tab => {
+
+                        async function highlightCode() {
+                            const highlighted = await highlight({
+                                value: tab.code,
+                                lang: tab.language,
+                                meta: tab.title,
+                            }, themeSettings?.coder?.syntaxHighlight || "github-dark")
+
+                            tab.highlighted = highlighted
+                        }
+
+                        promises.push(highlightCode());
+                    });
+                });
+            });
+
+            await Promise.all(promises);
+        } else {
+            if (props.references?.[0]) {
+                props.references[0].examples = outputVarExamples;
+            }
+        }
+
+        // Process definition properties recursively to convert markdown descriptions to React trees
+        if (props.references?.[0]?.definitions) {
+            props.references[0].definitions = processDefinitionProperties(props.references[0].definitions);
+        }
+
+        return props
+        // TODO: in the future return a component directly here but we need good mechanism for transpiling?
+    }
+}
+
+function buildElement(node) {
+    if (!node) return null;
+    switch (node.type) {
+        case 'JSXElement': {
+            // Resolve type (string for custom components)
+            let type;
+            const nameNode = node.openingElement.name;
+            if (nameNode.type === 'JSXMemberExpression') {
+                // flatten Foo.Bar to "Foo.Bar"
+                const parts: string[] = [];
+                let curr = nameNode;
+                while (curr) {
+                    if (curr.property) parts.unshift(curr.property.name);
+                    curr = curr.object;
+                }
+                type = parts.join('.');
+            } else {
+                type = nameNode.name;
+            }
+
+            // Props
+            const props = {};
+            for (const attr of node.openingElement.attributes) {
+                if (attr.type === 'JSXSpreadAttribute') {
+                    Object.assign(props, evaluateExpression(attr.argument));
+                    continue;
+                }
+                const key = attr.name.name;
+                let value;
+                if (!attr.value) {
+                    value = true;
+                } else if (attr.value.type === 'StringLiteral' || attr.value.type === 'NumericLiteral' || attr.value.type === 'BooleanLiteral') {
+                    value = attr.value.value;
+                } else if (attr.value.type === 'JSXExpressionContainer') {
+                    value = evaluateExpression(attr.value.expression);
+                }
+                props[key] = value;
+            }
+
+            // Children
+            const children = node.children
+                .map(child => {
+                    if (child.type === 'JSXText') {
+                        const text = child.value.replace(/\s+/g, ' ');
+                        return text.trim() ? text : null;
+                    }
+                    if (child.type === 'JSXExpressionContainer') {
+                        return child.expression.type === 'JSXElement' || child.expression.type === 'JSXFragment'
+                            ? buildElement(child.expression)
+                            : evaluateExpression(child.expression);
+                    }
+                    if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
+                        return buildElement(child);
+                    }
+                    return null;
+                })
+                .filter(c => c !== null);
+
+            // Create React element
+            return React.createElement(type, props, ...children);
+        }
+
+        case 'JSXFragment': {
+            const children = node.children
+                .map(child => (child.type === 'JSXElement' || child.type === 'JSXFragment')
+                    ? buildElement(child)
+                    : (child.type === 'JSXText' ? child.value.trim() || null : null)
+                )
+                .filter(Boolean);
+            return React.createElement(React.Fragment, null, ...children);
+        }
+
+        default:
+            return null;
+    }
+}
+
+// Simplistic evaluator for static expressions: identifiers -> undefined, literals -> value, objects -> {}
+function evaluateExpression(expr) {
+    switch (expr.type) {
+        case 'StringLiteral': return expr.value;
+        case 'NumericLiteral': return expr.value;
+        case 'BooleanLiteral': return expr.value;
+        case 'ObjectExpression': {
+            const obj = {};
+            for (const prop of expr.properties) {
+                if (prop.type === 'ObjectProperty' && prop.key.type === 'Identifier') {
+                    obj[prop.key.name] = evaluateExpression(prop.value);
+                }
+            }
+            return obj;
+        }
+        // Add more cases (Identifier, CallExpression, etc.) as needed
+        default:
+            return undefined;
+    }
+}
+
+// 4) Locate first JSX node
+function findJSX(node) {
+    if (!node || typeof node !== 'object') return null;
+    if (node.type === 'JSXElement' || node.type === 'JSXFragment') return node;
+    for (const key of Object.keys(node)) {
+        const val = node[key];
+        if (Array.isArray(val)) {
+            for (const child of val) {
+                const found = findJSX(child);
+                if (found) return found;
+            }
+        } else {
+            const found = findJSX(val);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+function jsxStringToReactTree(jsxString: string = "") {
+    const ast = parse(jsxString, { sourceType: 'module', plugins: ['jsx'] });
+    const rootJSX = findJSX(ast);
+    if (!rootJSX) {
+        return null
+    }
+
+    const reactTree = buildElement(rootJSX)
+
+    return reactTree
+}
+
+/**
+ * Recursively processes definition properties to convert markdown descriptions to React trees
+ * @param definitions The definitions to process
+ * @returns The processed definitions with markdown descriptions converted to React trees
+ */
+function processDefinitionProperties(definitions: Definition[]): Definition[] {
+    if (!definitions || !Array.isArray(definitions)) {
+        return definitions;
+    }
+
+    return definitions.map(definition => {
+        // Process variants recursively
+        if (definition.variants && Array.isArray(definition.variants)) {
+            for (const variant of definition.variants) {
+                if (variant.properties && Array.isArray(variant.properties)) {
+                    variant.properties = processDefinitionProperty(variant.properties);
+                }
+            }
+        }
+
+        // Process the definition's properties recursively
+        if (definition.properties && Array.isArray(definition.properties)) {
+            definition.properties = processDefinitionProperty(definition.properties);
+        }
+
+        if (definition.description && typeof definition.description === "string") {
+            const md = fromMarkdown(definition.description)
+            const hast = toHast(md)
+            const html = toHtml(hast)
+            const jsx = htmlToJsx(html);
+            const reactTree = jsxStringToReactTree(jsx);
+            if (reactTree) {
+                definition.description = reactTree;
+            }
+        }
+        return definition;
+    });
+}
+
+/**
+ * Recursively processes definition properties to convert markdown descriptions to React trees
+ * @param properties The properties to process
+ * @returns The processed properties with markdown descriptions converted to React trees
+ */
+function processDefinitionProperty(properties: DefinitionProperty[]): DefinitionProperty[] {
+    if (!properties || !Array.isArray(properties)) {
+        return properties;
+    }
+
+    return properties.map(property => {
+        const newProperty: DefinitionProperty = {
+            ...property,
+        };
+
+        if (typeof newProperty.description === 'string' && isMarkdownText(newProperty.description)) {
+            const mdast = fromMarkdown(newProperty.description);
+            const hast = toHast(mdast);
+            const html = toHtml(hast);
+            const jsx = htmlToJsx(html);
+            const reactTree = jsxStringToReactTree(jsx);
+            if (reactTree) {
+                newProperty.description = reactTree;
+            }
+        }
+
+        if (property.properties && Array.isArray(property.properties)) {
+            newProperty.properties = processDefinitionProperty(property.properties);
+        }
+
+        return newProperty;
+    });
+}
+
+/**
+ * Returns true if the input contains any non-plain-text Markdown tokens.
+ */
+function isMarkdownText(text: string) {
+    // 1) Lex into a token tree
+    const tokens = marked.lexer(text);
+    let found = false;
+
+    // 2) Traverse *every* token (including nested) and flag any non-plain-text kinds
+    marked.walkTokens(tokens, token => {
+        // ignore pure text/whitespace
+        if (!['text', 'paragraph', 'space', 'newline'].includes(token.type)) {
+            found = true;
+        }
+    });
+
+    return found;
+}
+
+
+
+/**
+ * List of standard MDAST node types
+ */
+const standardMdastTypes = [
+    'root',
+    'paragraph',
+    'heading',
+    'text',
+    'emphasis',
+    'strong',
+    'delete',
+    'blockquote',
+    'code',
+    'link',
+    'image',
+    'list',
+    'listItem',
+    'table',
+    'tableRow',
+    'tableCell',
+    'html',
+    'break',
+    'thematicBreak',
+    'definition',
+    'footnoteDefinition',
+    'footnoteReference',
+    'inlineCode',
+    'linkReference',
+    'imageReference',
+    'footnote',
+    'tableCaption'
+];
+
+
+/**
+ * Checks if a given type is a standard MDAST type
+ * @param type The node type to check
+ * @returns True if the type is a standard MDAST type, false otherwise
+ */
+function isStandardMdastType(type: string): boolean {
+    return standardMdastTypes.includes(type);
+}
+
+function isMdxElement(type: string): boolean {
+    return type === 'mdxJsxFlowElement'
+}

package/src/decorators.ts

@@ -0,0 +1,18 @@
+import { registerMetaComponent } from "@xyd-js/context";
+
+export function metaComponent<P, V>(
+    name: string,
+    componentName?: string
+) {
+    return function (
+        target: any,
+        context: any
+    ) {
+        registerMetaComponent(
+            name,
+            componentName || name,
+            target
+        );
+    };
+}
+

package/src/index.ts

@@ -0,0 +1,3 @@
+export {
+    Composer
+} from "./Composer"

package/tsconfig.json

@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@xyd-js/framework/react": [
+        "../xyd-framework/packages/react/index.ts"
+      ],
+      "@xyd-js/context": [
+        "../xyd-context/src/index.ts"
+      ],
+      "@xyd-js/core": [
+        "../xyd-core/src/index.ts"
+      ]
+    },
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true,
+    "typeRoots": [
+      "./types.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "types.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'tsup';
+import pkg from './package.json' assert { type: 'json' }
+
+const deps = [
+    ...Object.keys(pkg.devDependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+]
+
+export default defineConfig({
+    entry: {
+        index: 'src/index.ts'
+    },
+    format: ['esm'],
+    target: 'node16',
+    dts: {
+        entry: {
+            index: 'src/index.ts'
+        },
+        resolve: true,
+    },
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    external: [
+        ...deps
+    ],
+    esbuildOptions: (options) => {
+        options.platform = 'node';
+        options.external = ['node:fs/promises', 'react-router'];
+        options.loader = { '.js': 'jsx' };
+    },
+    ignoreWatch: ['node_modules', 'dist', '.git', 'build']
+});