mdx-forge 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Garrett Fincke
+
+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,64 @@
+# mdx-forge
+
+`mdx-forge` is a unified MDX runtime toolkit with three domain exports:
+
+- `mdx-forge/compiler` for safe and trusted MDX compilation
+- `mdx-forge/browser` for browser-side module loading/evaluation
+- `mdx-forge/components` for framework shim components and CSS
+
+## Install
+
+```bash
+npm install mdx-forge
+```
+
+Peer dependencies:
+
+- `react >= 18` for `components`
+- `unified` and `@mdx-js/mdx` for `compiler`
+
+## Quick Start
+
+```ts
+import { compileSafe } from 'mdx-forge/compiler';
+
+const result = await compileSafe('# Hello', {
+  logger: { debug() {}, warn() {}, error() {} },
+});
+
+console.log(result.html);
+```
+
+## Subpath Exports
+
+- `mdx-forge/compiler`
+- `mdx-forge/compiler/plugins`
+- `mdx-forge/compiler/transforms`
+- `mdx-forge/browser`
+- `mdx-forge/browser/registry`
+- `mdx-forge/components`
+- `mdx-forge/components/generic`
+- `mdx-forge/components/docusaurus`
+- `mdx-forge/components/starlight`
+- `mdx-forge/components/nextra`
+- `mdx-forge/components/nextjs`
+- `mdx-forge/components/registry`
+- `mdx-forge/components/styles/*.css`
+
+## Security Model
+
+- `mdx-forge/browser` evaluates code via `new Function()`.
+- Consumers must allow `unsafe-eval` in CSP for `mdx-forge/browser`.
+- Runtime style injection may require `style-src 'unsafe-inline'` or a nonce-aware strategy.
+- The library does not validate trust boundaries for fetched code; host code must enforce trust.
+- `compileSafe` is a compilation mode, not a full sanitization layer.
+
+## Limitations
+
+- Browser-domain runtime assumes a browser environment.
+- Component domain requires matching CSS imports.
+- Trusted mode compilation/execution is not suitable for untrusted code without additional controls.
+
+## License
+
+MIT. See `LICENSE`.

package/dist/components/base/styles/callout.css

@@ -0,0 +1,64 @@
+/* packages/webview-app/src/components/shims/base/styles/callout.css */
+/* Shared callout/aside/admonition styles using data-attribute selectors */
+/* Works w/ all frameworks that use createCallout() factory */
+
+/* Import shared tokens & callout color variants */
+@import '../../shared/index.css';
+
+/* ==================== Base Structure ==================== */
+[data-callout-type] {
+  padding: var(--mdx-space-lg) var(--mdx-space-xl);
+  margin: var(--mdx-space-lg) 0;
+  border-left: var(--mdx-callout-border-width) solid
+    var(--callout-color, var(--mdx-text-muted));
+  border-radius: 0 var(--mdx-radius-lg) var(--mdx-radius-lg) 0;
+  background-color: var(
+    --callout-bg,
+    rgba(128, 128, 128, var(--mdx-alpha-subtle))
+  );
+}
+
+/* Header layout (Generic, Starlight) */
+[data-callout-type] > [class*='-header'] {
+  display: flex;
+  align-items: center;
+  gap: var(--mdx-space-sm);
+  font-weight: var(--mdx-font-weight-semibold);
+  margin-bottom: var(--mdx-space-md);
+  color: var(--callout-color);
+}
+
+/* Title text - uppercase for header layout */
+[data-callout-type] > [class*='-header'] > [class*='-title'] {
+  text-transform: uppercase;
+  font-size: var(--mdx-font-size-sm);
+  letter-spacing: var(--mdx-letter-spacing-wide);
+}
+
+/* Icon container */
+[data-callout-type] [class*='-icon'] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[data-callout-type] [class*='-icon'] svg {
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* Content container */
+[data-callout-type] > [class*='-content'] > :first-child {
+  margin-top: 0;
+}
+
+[data-callout-type] > [class*='-content'] > :last-child {
+  margin-bottom: 0;
+}
+
+/* ==================== Color Variants ==================== */
+/* Color variants are defined in shared/callout-variants.css using tokens */
+/* No need to duplicate them here - they're imported via shared/index.css */
+
+/* ==================== Dark Mode ==================== */
+/* Dark mode alpha adjustment is handled by --mdx-alpha-subtle in tokens.css */
+/* No need to duplicate dark mode rules - they use CSS custom properties */

package/dist/components/base/styles/collapsible.css

@@ -0,0 +1,96 @@
+/* packages/webview-app/src/components/shims/base/styles/collapsible.css */
+/* Shared collapsible/details styles using data-attribute selectors */
+/* Works w/ all frameworks that use createCollapsible */
+
+/* Import shared tokens */
+@import '../../shared/tokens.css';
+
+/* ==================== Base Structure ==================== */
+[data-component='collapsible'] {
+  margin: var(--mdx-space-lg) 0;
+  border: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+  border-radius: var(--mdx-radius-lg);
+  overflow: hidden;
+}
+
+/* Summary / header element */
+[data-component='collapsible'] > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--mdx-space-sm);
+  padding: var(--mdx-space-md) var(--mdx-space-lg);
+  cursor: pointer;
+  background-color: var(--vscode-editor-background, var(--mdx-bg-secondary));
+  font-weight: var(--mdx-font-weight-medium);
+  list-style: none;
+  user-select: none;
+}
+
+/* Hide native disclosure markers */
+[data-component='collapsible'] > summary::-webkit-details-marker {
+  display: none;
+}
+
+[data-component='collapsible'] > summary::marker {
+  display: none;
+}
+
+[data-component='collapsible'] > summary:hover {
+  background-color: var(
+    --vscode-list-hoverBackground,
+    rgba(0, 0, 0, var(--mdx-alpha-hover))
+  );
+}
+
+/* Icon container */
+[data-component='collapsible'] > summary > [class*='-icon'] {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--mdx-transition-normal) ease;
+}
+
+/* Icon rotation when open */
+[data-component='collapsible'] > summary > [class*='-icon'].open,
+[data-component='collapsible'] > summary > [class*='-icon'].expanded {
+  transform: rotate(90deg);
+}
+
+[data-component='collapsible'] > summary > [class*='-icon'] svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* Title text */
+[data-component='collapsible'] > summary > [class*='-title'],
+[data-component='collapsible'] > summary > [class*='-text'] {
+  flex: 1;
+}
+
+/* Content container */
+[data-component='collapsible'] > [class*='-content'] {
+  padding: var(--mdx-space-lg);
+  border-top: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+[data-component='collapsible'] > [class*='-content'] > :first-child {
+  margin-top: 0;
+}
+
+[data-component='collapsible'] > [class*='-content'] > :last-child {
+  margin-bottom: 0;
+}
+
+/* ==================== Dark Mode ==================== */
+/* Dark mode values are handled by VS Code CSS variables w/ fallbacks to tokens */
+
+.vscode-dark [data-component='collapsible'] {
+  border-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark [data-component='collapsible'] > summary {
+  background-color: var(--vscode-editor-background, var(--mdx-bg-primary));
+}
+
+.vscode-dark [data-component='collapsible'] > [class*='-content'] {
+  border-top-color: var(--vscode-panel-border, var(--mdx-border-color));
+}

package/dist/components/base/styles/index.css

@@ -0,0 +1,7 @@
+/* packages/webview-app/src/components/shims/base/styles/index.css */
+/* Base component styles - imported by App.tsx */
+/* These provide shared styles for all framework shims via data-attribute selectors */
+
+@import './callout.css';
+@import './tabs.css';
+@import './collapsible.css';

package/dist/components/base/styles/tabs.css

@@ -0,0 +1,97 @@
+/* packages/webview-app/src/components/shims/base/styles/tabs.css */
+/* Shared tabs styles using data-attribute selectors */
+/* Works w/ all frameworks that use createTabs() factory */
+
+/* Import shared tokens */
+@import '../../shared/tokens.css';
+
+/* ==================== Base Structure ==================== */
+[data-component='tabs'] {
+  margin: var(--mdx-space-lg) 0;
+  border: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+  border-radius: var(--mdx-radius-lg);
+  overflow: hidden;
+}
+
+/* Tab header / tablist */
+[data-component='tabs'] [role='tablist'] {
+  display: flex;
+  gap: 0;
+  background-color: var(--vscode-editor-background, var(--mdx-bg-secondary));
+  border-bottom: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+  overflow-x: auto;
+}
+
+/* Tab buttons */
+[data-component='tabs'] [role='tab'] {
+  padding: var(--mdx-space-md) var(--mdx-space-xl);
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground, var(--mdx-text-primary));
+  font-size: 0.9rem;
+  font-weight: var(--mdx-font-weight-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all var(--mdx-transition-normal) ease;
+}
+
+[data-component='tabs'] [role='tab']:hover {
+  background-color: var(
+    --vscode-list-hoverBackground,
+    rgba(0, 0, 0, var(--mdx-alpha-hover))
+  );
+}
+
+[data-component='tabs'] [role='tab'][aria-selected='true'],
+[data-component='tabs'] [role='tab'].active {
+  color: var(--vscode-textLink-foreground, var(--mdx-link-color));
+  border-bottom-color: var(--vscode-textLink-foreground, var(--mdx-link-color));
+  background-color: var(--vscode-editor-background, var(--mdx-bg-primary));
+}
+
+[data-component='tabs'] [role='tab']:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, var(--mdx-link-color));
+  outline-offset: -2px;
+}
+
+/* Tab content container */
+[data-component='tabs'] > [class*='-content'] {
+  background-color: var(--vscode-editor-background, var(--mdx-bg-primary));
+}
+
+/* Tab panels */
+[data-component='tabs'] [role='tabpanel'] {
+  padding: var(--mdx-space-lg);
+}
+
+[data-component='tabs'] [role='tabpanel'] > :first-child {
+  margin-top: 0;
+}
+
+[data-component='tabs'] [role='tabpanel'] > :last-child {
+  margin-bottom: 0;
+}
+
+[data-component='tabs'] [role='tabpanel'][hidden] {
+  display: none;
+}
+
+/* ==================== Dark Mode ==================== */
+/* Dark mode values are handled by VS Code CSS variables w/ fallbacks to tokens */
+/* --mdx-border-color & other tokens are updated in .vscode-dark via tokens.css */
+
+.vscode-dark [data-component='tabs'] {
+  border-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark [data-component='tabs'] [role='tablist'] {
+  background-color: var(--vscode-editor-background, var(--mdx-bg-secondary));
+  border-bottom-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark [data-component='tabs'] [role='tab'][aria-selected='true'],
+.vscode-dark [data-component='tabs'] [role='tab'].active {
+  background-color: var(--vscode-editor-background, var(--mdx-bg-primary));
+}

package/dist/components/docusaurus/styles.css

@@ -0,0 +1,291 @@
+/* packages/webview-app/src/components/shims/docusaurus/styles.css */
+/* Docusaurus component shim styles */
+/* Designed to closely match Docusaurus default styling */
+/* CSS naming convention: mdx-preview-* for generic classes, docusaurus-* for wrapper classes */
+
+/* Import shared tokens */
+@import '../shared/tokens.css';
+
+/* ==================== Tabs ==================== */
+.docusaurus-tabs {
+  margin: var(--mdx-space-lg) 0;
+}
+
+.mdx-preview-tabs-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+  margin-bottom: 0;
+}
+
+.mdx-preview-tabs-button {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--mdx-space-md) var(--mdx-space-lg);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: var(--mdx-font-weight-medium);
+  color: var(--vscode-foreground, var(--mdx-text-primary));
+  transition: all var(--mdx-transition-normal) ease;
+  margin-bottom: -1px;
+}
+
+.mdx-preview-tabs-button:hover {
+  color: var(--vscode-textLink-foreground, var(--mdx-link-color));
+  background-color: var(
+    --vscode-list-hoverBackground,
+    rgba(0, 0, 0, var(--mdx-alpha-hover))
+  );
+}
+
+.mdx-preview-tabs-button.active {
+  color: var(--vscode-textLink-foreground, var(--mdx-link-color));
+  border-bottom-color: var(--vscode-textLink-foreground, var(--mdx-link-color));
+}
+
+.mdx-preview-tabs-button:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, rgba(0, 102, 204, 0.3));
+  outline-offset: -2px;
+}
+
+.mdx-preview-tabs-content {
+  padding: var(--mdx-space-lg) 0;
+}
+
+.mdx-preview-tabs-panel {
+  animation: mdx-preview-tabs-fadeIn var(--mdx-transition-normal) ease;
+}
+
+.mdx-preview-tabs-panel[hidden] {
+  display: none;
+}
+
+.mdx-preview-tabs-item {
+  padding: var(--mdx-space-sm) 0;
+}
+
+@keyframes mdx-preview-tabs-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ==================== CodeBlock ==================== */
+.docusaurus-codeblock {
+  margin: var(--mdx-space-lg) 0;
+  border-radius: var(--mdx-radius-md);
+  overflow: hidden;
+  background-color: var(--vscode-editor-background, #f6f8fa);
+  border: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.docusaurus-codeblock-header {
+  padding: var(--mdx-space-sm) var(--mdx-space-lg);
+  background-color: var(--vscode-editorGroupHeader-tabsBackground, #f0f0f0);
+  border-bottom: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+  font-size: var(--mdx-font-size-sm);
+  font-weight: var(--mdx-font-weight-medium);
+  color: var(--vscode-foreground, var(--mdx-text-primary));
+}
+
+.docusaurus-codeblock-title {
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+
+.docusaurus-codeblock-container {
+  position: relative;
+}
+
+.docusaurus-codeblock-copy {
+  position: absolute;
+  top: var(--mdx-space-sm);
+  right: var(--mdx-space-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background-color: var(
+    --vscode-button-secondaryBackground,
+    rgba(128, 128, 128, 0.2)
+  );
+  border: none;
+  border-radius: var(--mdx-radius-sm);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--mdx-transition-normal) ease,
+    background-color var(--mdx-transition-normal) ease;
+  color: var(--vscode-button-secondaryForeground, var(--mdx-text-primary));
+  z-index: 1;
+}
+
+.docusaurus-codeblock:hover .docusaurus-codeblock-copy {
+  opacity: 1;
+}
+
+.docusaurus-codeblock-copy:hover {
+  background-color: var(
+    --vscode-button-secondaryHoverBackground,
+    rgba(128, 128, 128, 0.3)
+  );
+}
+
+.docusaurus-codeblock-copy.copied {
+  background-color: var(--vscode-testing-iconPassed, var(--mdx-color-tip));
+  color: white;
+  opacity: 1;
+}
+
+.docusaurus-codeblock-lang {
+  position: absolute;
+  top: var(--mdx-space-sm);
+  right: 3rem;
+  padding: 0.125rem var(--mdx-space-sm);
+  font-size: var(--mdx-font-size-xs);
+  font-weight: var(--mdx-font-weight-medium);
+  text-transform: uppercase;
+  color: var(--vscode-descriptionForeground, var(--mdx-text-secondary));
+  background-color: var(--vscode-badge-background, rgba(128, 128, 128, 0.15));
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity var(--mdx-transition-normal) ease;
+}
+
+.docusaurus-codeblock:hover .docusaurus-codeblock-lang {
+  opacity: 1;
+}
+
+.docusaurus-codeblock pre {
+  margin: 0;
+  padding: var(--mdx-space-lg);
+  overflow-x: auto;
+  background-color: transparent !important;
+  border: none !important;
+  border-radius: 0;
+}
+
+.docusaurus-codeblock code {
+  font-family: var(
+    --vscode-editor-font-family,
+    'Consolas',
+    'Monaco',
+    monospace
+  );
+  font-size: var(--vscode-editor-font-size, 13px);
+  line-height: 1.5;
+}
+
+/* Line numbers for code blocks */
+.docusaurus-codeblock pre[data-show-line-numbers='true'] {
+  counter-reset: line;
+}
+
+.docusaurus-codeblock pre[data-show-line-numbers='true'] code {
+  display: block;
+}
+
+/* ==================== Details ==================== */
+.docusaurus-details {
+  margin: var(--mdx-space-lg) 0;
+  border: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+  border-radius: var(--mdx-radius-md);
+  overflow: hidden;
+}
+
+.details-summary {
+  display: flex;
+  align-items: center;
+  padding: var(--mdx-space-md) var(--mdx-space-lg);
+  background-color: var(--vscode-list-hoverBackground, rgba(0, 0, 0, 0.03));
+  cursor: pointer;
+  font-weight: var(--mdx-font-weight-medium);
+  list-style: none;
+  user-select: none;
+}
+
+.details-summary::-webkit-details-marker {
+  display: none;
+}
+
+.details-summary::marker {
+  display: none;
+}
+
+.details-summary:hover {
+  background-color: var(
+    --vscode-list-activeSelectionBackground,
+    rgba(0, 0, 0, 0.06)
+  );
+}
+
+.details-toggle-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--mdx-space-sm);
+  transition: transform var(--mdx-transition-normal) ease;
+}
+
+.details-toggle-icon svg {
+  transition: transform var(--mdx-transition-normal) ease;
+}
+
+.details-toggle-icon svg.expanded {
+  transform: rotate(90deg);
+}
+
+.details-summary-text {
+  flex: 1;
+}
+
+.details-content {
+  padding: var(--mdx-space-lg);
+  border-top: 1px solid var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.details-content > :first-child {
+  margin-top: 0;
+}
+
+.details-content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ==================== Dark Mode Adjustments ==================== */
+/* Dark mode values are handled by VS Code CSS variables w/ fallbacks to tokens */
+
+.vscode-dark .docusaurus-tabs .mdx-preview-tabs-header {
+  border-bottom-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark .docusaurus-codeblock {
+  background-color: var(--vscode-editor-background, var(--mdx-bg-primary));
+  border-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark .docusaurus-codeblock-header {
+  background-color: var(
+    --vscode-editorGroupHeader-tabsBackground,
+    var(--mdx-bg-secondary)
+  );
+  border-bottom-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark .docusaurus-details {
+  border-color: var(--vscode-panel-border, var(--mdx-border-color));
+}
+
+.vscode-dark .details-content {
+  border-top-color: var(--vscode-panel-border, var(--mdx-border-color));
+}