@xyd-js/storybook 0.0.0-build

package/.storybook/main.ts

@@ -0,0 +1,40 @@
+import { join, dirname } from "path";
+
+import React from "react";
+import type { StorybookConfig } from "@storybook/react-vite";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, "package.json")));
+}
+
+
+const config: StorybookConfig = {
+    stories: ["../src/docs/**/*.mdx", "../src/docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        getAbsolutePath("@storybook/addon-essentials"),
+        getAbsolutePath("@storybook/addon-storysource"),
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [
+                        ]
+                    },
+                },
+            },
+        },
+    ],
+    framework: {
+        name: getAbsolutePath("@storybook/react-vite"),
+        options: {},
+    },
+    features: {
+        experimentalRSC: true,
+    }
+};
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<!-- .storybook/manager-head.html -->
+<style>
+    .sidebar-container {
+        padding-inline: 10px;
+    }
+  </style>

package/.storybook/manager.ts

@@ -0,0 +1,18 @@
+// .storybook/manager.ts
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  // where to show the addon panel: 'bottom' (default) or 'right'
+  panelPosition: 'right',
+  // you can also tweak its size if you like:
+  bottomPanelHeight: 200,  // height in px when bottom
+  rightPanelWidth: 300,    // width in px when right
+  // (and any other UI settings you need)
+
+  selectedPanel: 'storybookjs/storysource/panel',
+  navSize: 230,
+
+  // Apply custom theme
+  theme,
+});

package/.storybook/preview.ts

@@ -0,0 +1,40 @@
+import type {Preview} from "@storybook/react";
+
+// import "@xyd-js/theme-poetry/index.css" // TODO: in the future configurable themes via UI?
+// import "@xyd-js/theme-gusto/index.css" // TODO: in the future configurable themes via UI?
+// import "@xyd-js/theme-opener/index.css" // TODO: in the future configurable themes via UI?
+import "@xyd-js/theme-solar/index.css" // TODO: in the future configurable themes via UI?
+
+import './styles.css'
+
+const preview: Preview = {
+    parameters: {
+        options: {
+            storySort: {
+                order: [
+                    'Components', ['Writer', 'Coder'],
+                    'Atlas',
+                    'UI',
+                    'Layouts',
+                    'Themes', ['Default', 'Design System'],
+                ], // TODO: nested sorting
+            },
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        // Source addon configuration
+        docs: {
+            source: {
+                state: 'open', // 'open' | 'closed' | 'none'
+                type: 'auto', // 'auto' | 'code' | 'dynamic'
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+
+export default preview;

package/.storybook/styles.css

@@ -0,0 +1,5 @@
+/* Core */
+:root {
+    --color-primary: #0b64dd;
+    --color-primary--active: #1750ba;
+}

package/.storybook/theme.ts

@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'XYD Storybook',
+  brandUrl: 'https://github.com/xyd-js/xyd',
+  brandImage: '/logo.svg',
+  brandTarget: '_self',
+  
+  // Color palette
+//   colorPrimary: '#3f51b5',
+//   colorSecondary: '#f50057',
+  
+  // UI
+//   appBg: '#1a1a1a',
+//   appContentBg: '#2a2a2a',
+//   appBorderColor: '#404040',
+//   appBorderRadius: 4,
+  
+  // Text colors
+//   textColor: '#ffffff',
+//   textInverseColor: '#000000',
+  
+  // Toolbar default and active colors
+//   barTextColor: '#ffffff',
+//   barSelectedColor: '#3f51b5',
+//   barBg: '#2a2a2a',
+  
+  // Form colors
+//   inputBg: '#3a3a3a',
+//   inputBorder: '#404040',
+//   inputTextColor: '#ffffff',
+//   inputBorderRadius: 4,
+}); 

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @xyd-js/storybook
+
+## 0.0.0-build+6952c2c-20250813013245
+
+### Patch Changes
+
+- update all packages
+- Updated dependencies
+  - @xyd-js/atlas@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/components@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/content@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/theme-cosmo@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/theme-opener@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/theme-picasso@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/theme-poetry@0.0.0-build+6952c2c-20250813013245
+  - @xyd-js/ui@0.0.0-build+6952c2c-20250813013245

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,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@xyd-js/storybook",
+  "version": "0.0.0-build+6952c2c-20250813013245",
+  "type": "module",
+  "dependencies": {
+    "@storybook/addon-storysource": "^8.6.14",
+    "downloadjs": "^1.4.7",
+    "html-to-image": "^1.11.13",
+    "lucide-react": "^0.447.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@xyd-js/atlas": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/components": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/content": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-cosmo": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-opener": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-picasso": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-poetry": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/ui": "0.0.0-build+6952c2c-20250813013245"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@eslint/js": "^9.11.1",
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "acorn": "^8.14.1",
+    "acorn-jsx": "^5.3.2",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-storybook": "^0.9.0",
+    "globals": "^15.9.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.0",
+    "storybook": "^8.3.5",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^7.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "lint": "eslint ."
+  }
+}

package/public/logo.svg

@@ -0,0 +1,10 @@
+<svg width="64" height="18" viewBox="0 0 64 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_18)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9447 14.7921H10.6636L14.2428 9.73069L10.8861 4.9901H13.1857L14.9846 7.69901C15.0712 7.84158 15.1577 7.99307 15.2443 8.15347C15.2649 8.1918 15.2854 8.23023 15.3057 8.26877C15.3598 8.37166 15.4048 8.46149 15.4407 8.53824C15.4432 8.54364 15.4458 8.54904 15.4483 8.55446C15.4611 8.51802 15.4751 8.482 15.4904 8.44646C15.5265 8.36139 15.5743 8.26372 15.6337 8.15347C15.7203 7.99307 15.8068 7.84158 15.8934 7.69901L17.6923 4.9901H19.9919L16.6352 9.74852L20.1959 14.7921H17.8963L15.9119 11.8515C15.8254 11.7089 15.7388 11.5485 15.6523 11.3703C15.6317 11.328 15.6113 11.2857 15.5909 11.2434C15.551 11.1606 15.516 11.0873 15.4861 11.0237C15.4734 10.9967 15.4608 10.9696 15.4483 10.9426C15.3988 11.0495 15.3277 11.1921 15.235 11.3703C15.1851 11.4666 15.1319 11.5613 15.0755 11.6542C15.0349 11.7212 14.9922 11.7869 14.9476 11.8515L12.9447 14.7921ZM26.2973 18H24.1831L25.6482 14.2218L21.8464 4.9901H24.0533L26.186 10.5149C26.2523 10.6968 26.3186 10.9065 26.3848 11.1441C26.4058 11.2194 26.426 11.2947 26.4457 11.3703C26.5322 11.703 26.6064 11.9762 26.6682 12.1901C26.7125 11.9988 26.7716 11.76 26.8455 11.4737C26.8544 11.4392 26.8633 11.4047 26.8722 11.3703C26.9588 11.0376 27.0453 10.7525 27.1318 10.5149L29.1347 4.9901H31.2675L26.2973 18ZM33.5671 11.2812V8.51881C33.5671 8.5099 33.5671 8.50099 33.5671 8.49208C33.5713 7.51129 33.8055 6.70741 34.2698 6.08044C34.3394 5.98635 34.4144 5.89603 34.4943 5.8099C35.1125 5.14455 35.9347 4.81188 36.9609 4.81188C37.2432 4.80978 37.5248 4.83873 37.8002 4.89814C38.2353 4.98873 38.637 5.18972 38.9638 5.4802C39.4583 5.92574 39.7056 6.53465 39.7056 7.30693L39.279 6.86139H39.7427L39.687 4.5802V1.78218H41.6899V14.7921H39.7056V12.9208H39.279L39.7056 12.4752C39.7079 12.7346 39.6757 12.9931 39.6097 13.2446C39.5048 13.6495 39.2805 14.0166 38.9638 14.302C38.637 14.5925 38.2353 14.7935 37.8002 14.884C37.5248 14.9435 37.2432 14.9724 36.9609 14.9703C36.5745 14.9741 36.19 14.9196 35.8213 14.8087C35.3085 14.6502 34.8499 14.3611 34.4943 13.9723C33.8762 13.3069 33.5671 12.4099 33.5671 11.2812ZM2.07708 16.7525H0L6.52796 0H8.60504L2.07708 16.7525ZM64 9.92673L55.8771 13.7228V11.905L61.4222 9.35644C61.5629 9.29538 61.7054 9.23815 61.8495 9.18481C61.9412 9.15093 62.0337 9.11902 62.1269 9.08911C62.3475 9.01842 62.5134 8.97113 62.6247 8.94725C62.6257 8.94701 62.6267 8.94677 62.6276 8.94653C62.5884 8.93886 62.5495 8.93007 62.5108 8.92016C62.4265 8.89877 62.3263 8.86931 62.2102 8.83176C62.1731 8.81976 62.136 8.80752 62.0991 8.79505C61.8704 8.71782 61.6447 8.62574 61.4222 8.51881L55.8771 5.9703V4.11683L64 7.91287V9.92673ZM39.687 11.1743V8.60792C39.6886 8.39594 39.6672 8.18438 39.6231 7.97667C39.5654 7.71481 39.4687 7.48414 39.3328 7.28465C39.2758 7.20072 39.2112 7.12171 39.14 7.04852C38.8659 6.76894 38.503 6.58461 38.1083 6.52438C37.956 6.49891 37.8016 6.48645 37.6471 6.48713C37.4323 6.48547 37.218 6.50802 37.0087 6.55432C36.6672 6.62705 36.3545 6.79238 36.1078 7.03069C35.9021 7.23549 35.7516 7.48556 35.6696 7.75907C35.6117 7.94145 35.5751 8.14248 35.5598 8.36216C35.5541 8.44397 35.5514 8.52593 35.5514 8.60792V11.1743C35.55 11.3795 35.5691 11.5844 35.6086 11.7861C35.6563 12.0212 35.734 12.2299 35.8419 12.4122C35.9147 12.5359 36.0041 12.65 36.1078 12.7515C36.3578 12.9928 36.6752 13.1594 37.0217 13.2309C37.2269 13.2751 37.4367 13.2966 37.6471 13.2951C37.8632 13.2969 38.0786 13.2714 38.2878 13.2193C38.6141 13.1386 38.9098 12.9701 39.14 12.7337C39.4759 12.389 39.6571 11.9209 39.6837 11.3295C39.686 11.2778 39.6871 11.226 39.687 11.1743Z" fill="black" stroke="black" stroke-width="0.944882" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3_18">
+<rect width="64" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/__fixtures__/Icons.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+export function IconSessionReplay() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M10 8L16 12L10 16V8Z"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconMetrics() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M21 7L13.2273 14.9167L9.13636 10.75L3 17"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M16 7H21V12"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconFunnels() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 20L12 10"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M6 20L6 4"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M18 20L18 16"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}

package/src/__fixtures__/atlas-index/package-index.mdx

@@ -0,0 +1,194 @@
+# Package Index
+
+These are all the API packages. See all [API symbols](#).
+
+<Table>
+    <Table.Head>
+        <Table.Tr>
+            <Table.Th>Package</Table.Th>
+            <Table.Th numeric>Description</Table.Th>
+        </Table.Tr>
+    </Table.Head>
+    <Table.Body>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/atlas`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    API Reference template
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/cli`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Command line interface tools
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/components`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Shared React components library
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/content`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Content management and MDX utilities
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/core`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Core utilities and shared functionality
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/documan`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Documentation sever runner
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/framework`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Bridge between core logic and ui
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/gql`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    GraphQL utilities and tools
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/openapi`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    OpenAPI specification tools
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/plugin-docs`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Core documentation plugin
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/storybook`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Component documentation and testing
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/theme-poetry`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    On of the default themes
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/ui`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Core documentations ui elements
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/uniform`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Unified formatting for API references
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/xtokens`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Design tokens and theming system
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+    </Table.Body>
+</Table>