@mindlogic-ai/logician-ui 3.2.0-alpha.5 → 4.0.0-alpha.7

package/src/components/Tree/Tree.types.ts

@@ -23,7 +23,35 @@ export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
 export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
 export type TreeBranchTextProps = TreeViewBranchTextProps;
 export type TreeBranchContentProps = TreeViewBranchContentProps;
-export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps;
+export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps & {
+  /**
+   * Draw `├` / `└` guide lines instead of a plain vertical rail: every
+   * row gets a horizontal foot joining it to its parent rail, middle
+   * rows keep the vertical (`├`), and the last row of each group stops
+   * at its centre (`└`). Off by default to preserve the existing
+   * plain-vertical-rail look. See `TreeBranchIndentGuide`.
+   * @default false
+   */
+  elbow?: boolean;
+  /**
+   * Length of the elbow foot — the horizontal cross-stroke that joins
+   * the rail to the row content, drawn from the parent rail column
+   * toward the text. In elbow mode each level indents 4px further than
+   * the plain-rail default, and since the default foot length doesn't
+   * grow with it, the foot ends 8px short of the row text. Any Chakra
+   * width value. Only applies when `elbow` is set.
+   * @default 'calc(var(--tree-indentation) - 4px)'
+   */
+  footLength?: string | number;
+  /**
+   * Color of the guide lines (rail, elbow foot and vertical segments).
+   * Any Chakra color token. The default is a mode-flipping semantic
+   * token, so it darkens in light mode and lightens in dark mode
+   * automatically.
+   * @default 'border.default'
+   */
+  guideColor?: string;
+};
 export type TreeItemProps = TreeViewItemProps;
 export type TreeItemTextProps = TreeViewItemTextProps;
 export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;

package/src/components/Tree/TreeBranchIndentGuide.test.tsx

@@ -0,0 +1,213 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+
+import { system } from '../../theme';
+import { createTreeCollection } from './index';
+import { Tree } from './Tree';
+
+interface N {
+  id: string;
+  name: string;
+  children?: N[];
+}
+
+const sample: N = {
+  id: 'ROOT',
+  name: '',
+  children: [{ id: 'a', name: 'A', children: [{ id: 'a1', name: 'A1' }] }],
+};
+
+const collection = createTreeCollection<N>({
+  rootNode: sample,
+  nodeToValue: (n) => n.id,
+  nodeToString: (n) => n.name,
+});
+
+const renderNode = ({
+  node,
+  nodeState,
+}: {
+  node: N;
+  nodeState: { isBranch: boolean };
+}) =>
+  nodeState.isBranch ? (
+    <Tree.BranchControl>
+      <Tree.BranchText>{node.name}</Tree.BranchText>
+    </Tree.BranchControl>
+  ) : (
+    <Tree.Item>
+      <Tree.ItemText>{node.name}</Tree.ItemText>
+    </Tree.Item>
+  );
+
+function renderGuide(elbow: boolean, extraProps: { guideColor?: string } = {}) {
+  const { container } = render(
+    <ChakraProvider value={system}>
+      <Tree.Root
+        collection={collection}
+        aria-label="t"
+        defaultExpandedValue={['a']}
+      >
+        <Tree.Tree>
+          <Tree.Node
+            indentGuide={
+              elbow ? (
+                <Tree.BranchIndentGuide elbow {...extraProps} />
+              ) : (
+                <Tree.BranchIndentGuide {...extraProps} />
+              )
+            }
+            render={renderNode}
+          />
+        </Tree.Tree>
+      </Tree.Root>
+    </ChakraProvider>
+  );
+  const guide = container.querySelector<HTMLElement>(
+    '[data-part="branch-indent-guide"]'
+  );
+  if (!guide) throw new Error('no indent guide rendered');
+  return guide.className;
+}
+
+// All Chakra/emotion-injected CSS, concatenated.
+const sheetText = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+
+// The foot rule is anchored on the emotion-generated `css-*` class
+// (not the static `chakra-*` slot class), so target that one.
+const styleAnchor = (className: string) => {
+  const emotion = className
+    .trim()
+    .split(/\s+/)
+    .find((c) => /^css-/.test(c));
+  if (!emotion) throw new Error(`no emotion class in: ${className}`);
+  return '\\.' + emotion;
+};
+
+/**
+ * Regression guard for the `elbow` foot. Chakra renders ONE indent guide
+ * per `branchContent` (its first child), followed by that branch's rows
+ * as siblings — so the foot must be drawn on those sibling rows, scoped
+ * to the elbow guide's own class. An earlier `:last-of-type::after`
+ * attempt silently matched nothing (the guide is never the last sibling
+ * of its type), which is exactly what these tests pin down.
+ */
+describe('Tree.BranchIndentGuide elbow', () => {
+  it('draws a ::before foot on the guide’s sibling rows when elbow is set', () => {
+    const cls = renderGuide(true);
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+
+    // Foot rule is scoped to THIS guide's class via the sibling combinator,
+    // for both leaf rows and branch rows — never applied globally.
+    expect(css).toMatch(
+      new RegExp(`${anchor}\\s*~\\s*\\[data-part="item"\\]::before`)
+    );
+    expect(css).toMatch(
+      new RegExp(
+        `${anchor}\\s*~\\s*\\[data-part="branch"\\]\\s*>\\s*\\[data-part="branch-control"\\]::before`
+      )
+    );
+
+    // The foot paints a 1px cross-stroke pinned to the row's vertical
+    // centre, starting at the parent rail column.
+    const footRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(footRule).toContain('content:""');
+    expect(footRule).toContain('position:absolute');
+    expect(footRule).toContain('inset-block-start:50%');
+    expect(footRule).toContain('height:1px');
+    expect(footRule).toMatch(
+      /inset-inline-start:calc\(var\(--tree-offset\) - var\(--tree-elbow-indentation\)\)/
+    );
+
+    // Elbow mode widens per-level indentation: the sibling rows redefine
+    // the recipe's indentation-offset from the widened value, pushing the
+    // row text right, away from the elbow foot.
+    const rowVarsRule =
+      css.match(
+        new RegExp(`${anchor}\\s*~\\s*\\[data-part="item"\\]\\s*\\{[^}]*\\}`)
+      )?.[0] ?? '';
+    expect(rowVarsRule).toContain(
+      '--tree-elbow-indentation:calc(var(--tree-indentation) + 4px)'
+    );
+    expect(rowVarsRule).toContain(
+      '--tree-indentation-offset:calc(var(--tree-elbow-indentation) * var(--tree-depth))'
+    );
+  });
+
+  it('draws no foot for a plain guide (no elbow)', () => {
+    const cls = renderGuide(false);
+    const anchor = styleAnchor(cls);
+    // This specific guide's class must not anchor any ::before foot rule.
+    expect(sheetText()).not.toMatch(new RegExp(`${anchor}\\s*~[^{]*::before`));
+  });
+
+  it('stops the vertical segment at the centre of the last row (└)', () => {
+    const cls = renderGuide(true);
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+
+    // Middle rows: full-height vertical (├) on the row itself.
+    const middleRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]:not\\(:last-child\\)::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(middleRule).toContain('inset-block-start:0');
+    expect(middleRule).toContain('inset-block-end:0');
+    expect(middleRule).toContain('width:1px');
+
+    // Last leaf row: segment ends at 50% so the foot forms a └.
+    const lastItemRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]:last-child::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(lastItemRule).toContain('inset-block-start:0');
+    expect(lastItemRule).toContain('height:50%');
+
+    // Last branch row: half-height segment on its control only, so an
+    // expanded last branch has no rail running past its elbow.
+    const lastBranchRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="branch"\\]:last-child\\s*>\\s*\\[data-part="branch-control"\\]::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(lastBranchRule).toContain('height:50%');
+
+    // Non-last branch: pass-through rail spans the whole expanded subtree,
+    // painted above row hover backgrounds like the original slot rail.
+    const passThroughRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="branch"\\]:not\\(:last-child\\)::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(passThroughRule).toContain('inset-block-end:0');
+    expect(passThroughRule).toContain('z-index:1');
+  });
+
+  it('paints the guide with the custom guideColor token', () => {
+    const cls = renderGuide(true, { guideColor: 'red.500' });
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+    const footRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(footRule).toMatch(/--chakra-colors-red-500|red\.500/);
+  });
+});

package/src/components/Tree/TreeBranchIndentGuide.tsx

@@ -3,18 +3,144 @@ import { TreeView as ChakraTreeView } from '@chakra-ui/react';
 
 import { TreeBranchIndentGuideProps } from './Tree.types';
 
+// Extra per-level indentation in elbow mode. Guide-line trees read better
+// with a little more horizontal air between the elbow and the row text,
+// so each level indents this much further than the recipe default. The
+// foot length does NOT grow with it (its default is derived from the
+// original `--tree-indentation`), so the foot-to-text gap widens by the
+// same amount.
+const ELBOW_EXTRA_INDENT = '4px';
+
+// The widened per-level indentation, defined on the guide's sibling rows
+// so both the recipe's offset math and our pseudo-element math can share
+// it. Root rows (depth 1) have no guide sibling, but their offset
+// multiplies indentation by zero, so every level stays consistent.
+const ELBOW_INDENT_VARS = {
+  '--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
+} as const;
+
+// Re-derive the recipe's `--tree-indentation-offset` (which feeds
+// `--tree-offset`, the row's padding-start) from the widened indentation.
+// Must be set on the same elements the recipe defines it on
+// (item / branch-control) — inheritance can't override those.
+const ELBOW_OFFSET_VARS = {
+  '--tree-indentation-offset':
+    'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
+} as const;
+
+// The parent rail column, measured from a child row (item / branch-control).
+// A row's content starts at its own `--tree-offset`, and the parent rail
+// sits exactly one (widened) indentation to its left (verified against the
+// recipe's offset math for both the guide and the row slots).
+const ROW_RAIL_COLUMN =
+  'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
+
+// The same column, computed from the `branch` element itself. A branch
+// only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
+// defined on item/branch-control, not here), so expand the recipe math:
+// rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
+// — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
+const BRANCH_RAIL_COLUMN =
+  'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
+
 export const TreeBranchIndentGuide = forwardRef<
   HTMLDivElement,
   TreeBranchIndentGuideProps
->((props, ref) => {
-  // Chakra v3's `branchIndentGuide` slot already renders the vertical
-  // line via `position: absolute`, `width: 1px`, `bg: border`, with
-  // `insetInlineStart` auto-calculated from tree depth. Don't add
-  // `ms`/`ps` (breaks the depth math, pushes the line over content)
-  // or `borderInlineStartWidth` (stacks a second 1px stroke on top of
-  // the slot's own bg-painted 1px). Only override `bg` to lighten.
-  return (
-    <ChakraTreeView.BranchIndentGuide ref={ref} bg="border.subtle" {...props} />
-  );
-});
+>(
+  (
+    {
+      elbow = false,
+      footLength = 'calc(var(--tree-indentation) - 4px)',
+      guideColor = 'border.default',
+      ...props
+    },
+    ref
+  ) => {
+    // Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
+    // vertical line per `branchContent` (its first child), `height: 100%`,
+    // with `insetInlineStart` auto-calculated from tree depth. Don't add
+    // `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
+    // a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
+    //
+    // That single full-height rail cannot form a `└` on the last row: it
+    // always paints past the last row's centre down to the content bottom.
+    // So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
+    // the element stays as the CSS sibling anchor) and the guide lines are
+    // re-drawn per row on the guide's sibling rows (`[data-part="item"]`
+    // leaves and `[data-part="branch"]` subtrees):
+    //
+    //  - every row gets a `::before` foot — the horizontal cross-stroke
+    //    from the rail column toward the row content, pinned to the row's
+    //    vertical centre;
+    //  - non-last rows get a full-height vertical segment (`├`); for a
+    //    branch it is drawn on the `[data-part="branch"]` element so it
+    //    passes through the whole expanded subtree, like the original rail
+    //    (zIndex 1 for the same paint-above-row-hover reason);
+    //  - the LAST row's segment stops at the row's vertical centre where
+    //    the foot meets it (`└`); for a branch that means half the
+    //    branch-control only, so an expanded last branch hangs below the
+    //    elbow with no rail running past it.
+    const foot = {
+      content: '""',
+      position: 'absolute',
+      insetBlockStart: '50%',
+      insetInlineStart: ROW_RAIL_COLUMN,
+      width: footLength,
+      height: '1px',
+      bg: guideColor,
+    } as const;
+    const rail = {
+      content: '""',
+      position: 'absolute',
+      insetBlockStart: '0',
+      insetInlineStart: ROW_RAIL_COLUMN,
+      width: '1px',
+      bg: guideColor,
+    } as const;
+    const elbowCss = elbow
+      ? {
+          '& ~ [data-part="item"]': {
+            ...ELBOW_INDENT_VARS,
+            ...ELBOW_OFFSET_VARS,
+          },
+          // branch-control reads --tree-elbow-indentation by inheritance,
+          // but the offset override must sit on the control itself.
+          '& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
+          '& ~ [data-part="branch"] > [data-part="branch-control"]':
+            ELBOW_OFFSET_VARS,
+          '& ~ [data-part="item"]::before': foot,
+          '& ~ [data-part="branch"] > [data-part="branch-control"]::before':
+            foot,
+          '& ~ [data-part="item"]:not(:last-child)::after': {
+            ...rail,
+            insetBlockEnd: '0',
+          },
+          '& ~ [data-part="item"]:last-child::after': {
+            ...rail,
+            height: '50%',
+          },
+          '& ~ [data-part="branch"]:not(:last-child)::before': {
+            ...rail,
+            insetBlockEnd: '0',
+            insetInlineStart: BRANCH_RAIL_COLUMN,
+            zIndex: 1,
+          },
+          '& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after':
+            {
+              ...rail,
+              height: '50%',
+            },
+        }
+      : undefined;
+
+    return (
+      <ChakraTreeView.BranchIndentGuide
+        ref={ref}
+        bg={elbow ? 'transparent' : guideColor}
+        css={elbowCss}
+        {...props}
+      />
+    );
+  }
+);
 TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';

package/src/index.ts

@@ -53,7 +53,6 @@ export * from './components/LogicianProvider';
 export * from './components/Markdown';
 export * from './components/Masonry';
 export * from './components/MaxLengthIndicator';
-export * from './components/MDXEditor';
 export * from './components/Menu';
 export * from './components/Modal';
 export * from './components/MonthPicker';

package/dist/components/MDXEditor/MDXEditor.d.ts

@@ -1,6 +0,0 @@
-import { MDXEditorMethods, MDXEditorProps as BaseEditorProps } from '@mdxeditor/editor';
-import '@mdxeditor/editor/style.css';
-import './MDXEditor.css';
-import type { MDXEditorProps } from './MDXEditor.types';
-export declare const MDXEditor: import("react").ForwardRefExoticComponent<MDXEditorProps & import("react").RefAttributes<BaseEditorProps & MDXEditorMethods>>;
-//# sourceMappingURL=MDXEditor.d.ts.map

package/dist/components/MDXEditor/MDXEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MDXEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MDXEditor/MDXEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAeL,gBAAgB,EAChB,cAAc,IAAI,eAAe,EAOlC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,6BAA6B,CAAC;AACrC,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,+HA4SpB,CAAC"}

package/dist/components/MDXEditor/MDXEditor.js

@@ -1,237 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var react = require('@chakra-ui/react');
-var editor = require('@mdxeditor/editor');
-require('@mdxeditor/editor/style.css');
-
-const MDXEditor = React.forwardRef(({ containerProps, autoFocus = true, onError, ...rest }, ref) => {
-    const [error, setError] = React.useState(null);
-    // Resolve theme tokens to actual values
-    const [space1, space2, space4] = react.useToken('spacing', ['1', '2', '4']);
-    const [radiusSm] = react.useToken('radii', ['sm']);
-    // 내부적으로 Editor 인스턴스를 참조하기 위한 로컬 ref
-    const editorRef = React.useRef(null);
-    // 부모 컴포넌트로 전달된 ref가 editorRef를 바라보도록 연결
-    React.useImperativeHandle(ref, () => editorRef.current, []);
-    const handleContainerClick = (e) => {
-        // Only focus if clicking on the container itself, not on toolbar and table elements
-        const target = e.target;
-        const isToolbarClick = target.closest('.mdxeditor-toolbar');
-        const isTableClick = target.closest('table');
-        const isPopupClick = target.closest('.mdxeditor-popup-container');
-        if (!isToolbarClick && !isTableClick && !isPopupClick) {
-            editorRef.current?.focus();
-        }
-    };
-    return (jsxRuntime.jsx(react.Box, { width: "100%", height: "100%", borderWidth: "1px", borderRadius: "lg", overflow: "hidden", onClick: handleContainerClick, cursor: "text", ...containerProps, css: {
-            /**
-             * Chakra v3 css prop styling notes:
-             *
-             * 1. All nested selectors require '&' prefix (e.g., '& .class', '& h1')
-             * 2. Use full CSS property names (background, padding) instead of Chakra
-             *    shorthand props (bg, p) in nested selectors
-             * 3. Color values must be resolved via useToken(), not token strings
-             * 4. Font sizes use responsive objects: { base: '2.4em', md: '3em' }
-             * 5. List styles must be explicitly defined (listStyleType, etc.)
-             *
-             * These requirements differ from v2's sx prop, which was more implicit.
-             * v3 prioritizes performance and explicitness over automatic handling.
-             */
-            ...containerProps?.css,
-            '& .mdxeditor': {
-                width: '100%',
-                minHeight: '300px',
-                height: '100%',
-                background: 'var(--chakra-colors-bg-surface)',
-                display: 'flex',
-                flexDirection: 'column',
-            },
-            '& .mdxeditor-toolbar': {
-                display: 'flex',
-                gap: space2,
-                padding: space2,
-                borderBottomWidth: '1px',
-                background: 'var(--chakra-colors-bg-subtle)',
-                flexShrink: 0,
-                cursor: 'default',
-            },
-            // Toolbar icons. mdxeditor colors its toolbar svgs with its own
-            // `--baseTextContrast` (its internal slate scale), which doesn't follow
-            // our color mode — in dark mode they stay near-black (#1c2024) and all
-            // but vanish against the dark toolbar. Flip them onto the semantic
-            // foreground token so they track light/dark like the editor body text.
-            '& .mdxeditor-toolbar svg': {
-                color: 'var(--chakra-colors-fg-default)',
-            },
-            // Disabled toolbar buttons (e.g. undo/redo with nothing to undo) — keep
-            // them dimmed but still mode-aware, instead of mdxeditor's light-only
-            // border color.
-            '& .mdxeditor-toolbar [data-disabled] svg': {
-                color: 'var(--chakra-colors-fg-subtle)',
-            },
-            // Hover / pressed / toggled-on backgrounds. mdxeditor paints these with
-            // `--baseBgActive` (its slate scale), which also doesn't track the color
-            // mode — in dark mode it goes light-grey, so the now-light icons sit on a
-            // light fill and disappear on hover and when a format is active. Flip the
-            // fill onto the semantic hover token so it stays mode-aware.
-            '& .mdxeditor-toolbar button:hover, & .mdxeditor-toolbar button[data-state="on"], & .mdxeditor-toolbar button:active': {
-                background: 'var(--chakra-colors-bg-muted)',
-            },
-            // Block-type select trigger in the toolbar — mdxeditor themes it with
-            // its own vars (left white), so flip it onto the semantic surface.
-            '& [class*="_selectTrigger_"]': {
-                background: 'var(--chakra-colors-bg-surface)',
-                color: 'var(--chakra-colors-fg-default)',
-            },
-            // Target the root contenteditable wrapper
-            '& [class*="_rootContentEditableWrapper_"]': {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: 0,
-                height: '100%',
-                overflow: 'auto',
-            },
-            // Target the actual contenteditable element
-            '& [contenteditable="true"]': {
-                flex: 1,
-                minHeight: '100%',
-                outline: 'none',
-            },
-            // Target any intermediate wrapper elements
-            '& [class*="_contentEditable_"]': {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-            },
-            '& .content-editable': {
-                padding: space4,
-                color: 'var(--chakra-colors-fg-default)',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: radiusSm,
-                flex: 1,
-                height: '100%',
-                '& h1, & h2, & h3, & h4, & h5': {
-                    marginBottom: '2px',
-                    fontWeight: 'bold',
-                },
-                '& h1:not(:first-child), & h2:not(:first-child), & h3:not(:first-child), & h4:not(:first-child)': {
-                    marginTop: space1,
-                },
-                /**
-                 * Font sizes - Cannot be tokenized due to responsive objects
-                 *
-                 * Unlike spacing/radii/colors, fontSize values here are responsive objects
-                 * { base: '2.4em', md: '3em' } which cannot be stored as regular tokens
-                 * in Chakra v3. Only textStyles support responsive values, but we cannot
-                 * extract just the fontSize from textStyles using useToken().
-                 *
-                 * These values match theme/index.ts textStyles exactly and must be
-                 * manually synchronized when updating the theme:
-                 * - h1: { base: '2.4em', md: '3em' }
-                 * - h2: { base: '2em', md: '2.5em' }
-                 * - h3: { base: '1.5em', md: '1.75em' }
-                 * - h4: { base: '1.25em', md: '1.44em' }
-                 * - h5: { base: '1.1em', md: '1.2em' }
-                 */
-                '& h1': {
-                    fontSize: { base: '2.4em', md: '3em' },
-                },
-                '& h2': {
-                    fontSize: { base: '2em', md: '2.5em' },
-                },
-                '& h3': {
-                    fontSize: { base: '1.5em', md: '1.75em' },
-                },
-                '& h4': {
-                    fontSize: { base: '1.25em', md: '1.44em' },
-                },
-                '& h5': {
-                    fontSize: { base: '1.1em', md: '1.2em' },
-                },
-                /**
-                 * List styling - IMPORTANT: v3 requires explicit list-style properties
-                 *
-                 * In Chakra v2, the `sx` prop automatically preserved browser default list styles.
-                 * In Chakra v3, the `css` prop is more explicit and performant, but requires
-                 * manual specification of list styles to override MDXEditor's CSS resets.
-                 *
-                 * Required properties:
-                 * - listStyleType: 'disc' (ul) or 'decimal' (ol) - Shows bullets/numbers
-                 * - listStylePosition: 'outside' - Places markers outside content box
-                 * - display: 'list-item' (on li) - Ensures proper list item rendering
-                 *
-                 * Why this changed: v3 optimized for speed by removing automatic style inference,
-                 * requiring more explicit style declarations.
-                 */
-                '& ul': {
-                    marginTop: space2,
-                    paddingInlineStart: space4,
-                    listStyleType: 'disc',
-                    listStylePosition: 'outside',
-                },
-                '& ol': {
-                    marginTop: space2,
-                    paddingInlineStart: space4,
-                    listStyleType: 'decimal',
-                    listStylePosition: 'outside',
-                },
-                '& li': {
-                    lineHeight: '1.5',
-                    marginBottom: space2,
-                    display: 'list-item',
-                },
-                '& blockquote': {
-                    borderLeftWidth: '4px',
-                    borderLeftColor: 'var(--chakra-colors-primary-light)',
-                    background: 'var(--chakra-colors-primary-lighter)',
-                    paddingLeft: space4,
-                    paddingBlock: space2,
-                    marginBlock: space4,
-                    color: 'var(--chakra-colors-fg-muted)',
-                },
-                '& a': {
-                    color: 'var(--chakra-colors-primary-main)',
-                    textDecoration: 'underline',
-                },
-                '& code': {
-                    fontFamily: 'mono',
-                    background: 'var(--chakra-colors-bg-muted)',
-                    paddingInline: space1,
-                    borderRadius: radiusSm,
-                    '& span': {
-                        background: 'transparent',
-                    },
-                },
-            },
-            '& .mdxeditor-diff-source-wrapper': {
-                overflow: 'auto',
-            },
-        }, children: jsxRuntime.jsx(editor.MDXEditor, { ref: editorRef, contentEditableClassName: "content-editable", overlayContainer: typeof document !== 'undefined' ? document.body : undefined, autoFocus: autoFocus, onError: ({ error }) => {
-                setError(error);
-                onError?.(error);
-            }, plugins: [
-                editor.headingsPlugin({
-                    allowedHeadingLevels: [2, 3, 4, 5],
-                }),
-                editor.linkPlugin(),
-                editor.listsPlugin(),
-                editor.imagePlugin(),
-                editor.quotePlugin(),
-                editor.thematicBreakPlugin(),
-                editor.markdownShortcutPlugin(),
-                editor.tablePlugin(),
-                editor.diffSourcePlugin(),
-                editor.toolbarPlugin({
-                    toolbarContents: () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(editor.UndoRedo, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.BoldItalicUnderlineToggles, {}), jsxRuntime.jsx(editor.CodeToggle, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.ListsToggle, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.BlockTypeSelect, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.InsertTable, {}), jsxRuntime.jsx(editor.InsertThematicBreak, {}), error && (jsxRuntime.jsx(editor.DiffSourceToggleWrapper, { options: ['rich-text', 'source'], children: jsxRuntime.jsx(jsxRuntime.Fragment, {}) }))] })),
-                }),
-            ], ...rest }) }));
-});
-MDXEditor.displayName = 'MDXEditor';
-
-exports.MDXEditor = MDXEditor;
-//# sourceMappingURL=MDXEditor.js.map