@astryxdesign/lab 0.1.9-canary.fe6baeb → 0.1.9-canary.fef7dca

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -22,6 +22,8 @@
 import { type ReactNode } from 'react';
 import type { BaseProps } from '@astryxdesign/core';
 import type { SizeValue } from '@astryxdesign/core/utils';
+import { type Transformer } from '@lexical/markdown';
+export type { Transformer } from '@lexical/markdown';
 import type { EditorState, Klass, LexicalEditor, LexicalNode } from 'lexical';
 export type RichTextEditorStatusType = 'warning' | 'error' | 'success';
 export type RichTextEditorSize = 'sm' | 'md' | 'lg';
@@ -106,10 +108,29 @@ export interface RichTextEditorProps extends Omit<BaseProps, 'onChange' | 'defau
     plugins?: ReactNode;
     /**
      * Whether to enable Markdown shortcut typing (e.g. `# ` for a heading,
-     * `- ` for a list). Uses the default `@lexical/markdown` transformers.
+     * `- ` for a list). Uses the `transformers` prop (defaults to the standard
+     * `@lexical/markdown` transformers).
      * @default true
      */
     hasMarkdownShortcuts?: boolean;
+    /**
+     * Markdown transformers — the single source of truth for markdown behaviour.
+     * Defaults to the standard `@lexical/markdown` `TRANSFORMERS`.
+     *
+     * The same array drives all three markdown operations in Lexical (see the
+     * lexical-playground reference, where one `PLAYGROUND_TRANSFORMERS` array
+     * feeds each):
+     *  - shortcut typing        — `registerMarkdownShortcuts` (wired here today)
+     *  - markdown -> state       — `$convertFromMarkdownString` (future import API)
+     *  - state -> markdown       — `$convertToMarkdownString` (future `getMarkdown`)
+     *
+     * Pass a custom array to support additional node types (e.g. custom
+     * transformers layered in via the `nodes` extension point) consistently
+     * across all three. Shortcut typing is only applied when
+     * `hasMarkdownShortcuts` is true; the array is still the intended input for
+     * the serialization APIs added in later phases.
+     */
+    transformers?: ReadonlyArray<Transformer>;
     /** Whether to automatically focus the editor on mount. @default false */
     hasAutoFocus?: boolean;
     /**
@@ -138,7 +159,7 @@ export interface RichTextEditorProps extends Omit<BaseProps, 'onChange' | 'defau
  * />
  * ```
  */
-export declare function RichTextEditor({ label, isLabelHidden, description, isOptional, isRequired, defaultValue, onChange, placeholder, isReadOnly, isDisabled, status, width, labelTooltip, size: sizeProp, nodes, plugins, hasMarkdownShortcuts, hasAutoFocus, namespace, xstyle, className, style, ...rest }: RichTextEditorProps): import("react").JSX.Element;
+export declare function RichTextEditor({ label, isLabelHidden, description, isOptional, isRequired, defaultValue, onChange, placeholder, isReadOnly, isDisabled, status, width, labelTooltip, size: sizeProp, nodes, plugins, hasMarkdownShortcuts, transformers, hasAutoFocus, namespace, xstyle, className, style, ...rest }: RichTextEditorProps): import("react").JSX.Element;
 export declare namespace RichTextEditor {
     var displayName: string;
 }

package/dist/RichTextEditor/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgB/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAuBxD,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,WAAW,EAEZ,MAAM,SAAS,CAAC;AAiEjB,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,IAAI,EAAE,wBAAwB,CAAC;IAC/B,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACrE,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,KAAK,EACL,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,OAAO,EACP,oBAA2B,EAC3B,YAAoB,EACpB,SAA2B,EAC3B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAkHrB;yBA1Ie,cAAc"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAkBxD,OAAO,EAAe,KAAK,WAAW,EAAC,MAAM,mBAAmB,CAAC;AACjE,YAAY,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAKnD,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,WAAW,EAEZ,MAAM,SAAS,CAAC;AAiEjB,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,IAAI,EAAE,wBAAwB,CAAC;IAC/B,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACrE,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,KAAK,EACL,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,OAAO,EACP,oBAA2B,EAC3B,YAA2B,EAC3B,YAAoB,EACpB,SAA2B,EAC3B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAwHrB;yBAjJe,cAAc"}

package/dist/RichTextEditor/RichTextEditor.js

@@ -23,7 +23,7 @@
  * Component Specification Protocol. `lexical` and `@lexical/*` are OPTIONAL peer
  * dependencies — install them to use this component.
  */
-import { useEffect, useId, useRef } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, typographyVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -114,6 +114,7 @@ export function RichTextEditor({
   nodes,
   plugins,
   hasMarkdownShortcuts = true,
+  transformers = TRANSFORMERS,
   hasAutoFocus = false,
   namespace = 'astryx-editor',
   xstyle,
@@ -133,6 +134,12 @@ export function RichTextEditor({
     themeRef.current = sharedEditorTheme();
   }
   const editable = !isReadOnly && !isDisabled;
+
+  // Stabilize the transformers array so MarkdownShortcutPlugin doesn't
+  // re-register on every render. `[...transformers]` would allocate a new
+  // array each time; memoize on the prop identity instead. (React Compiler
+  // isn't running the transform in this repo, so this isn't auto-memoized.)
+  const markdownTransformers = useMemo(() => [...transformers], [transformers]);
   const initialConfig = {
     namespace,
     theme: themeRef.current,
@@ -189,7 +196,7 @@ export function RichTextEditor({
             placeholder: null,
             ErrorBoundary: LexicalErrorBoundary
           }), /*#__PURE__*/_jsx(HistoryPlugin, {}), /*#__PURE__*/_jsx(ListPlugin, {}), /*#__PURE__*/_jsx(LinkPlugin, {}), /*#__PURE__*/_jsx(TabIndentationPlugin, {}), hasMarkdownShortcuts && /*#__PURE__*/_jsx(MarkdownShortcutPlugin, {
-            transformers: TRANSFORMERS
+            transformers: markdownTransformers
           }), hasAutoFocus && /*#__PURE__*/_jsx(AutoFocusOnMount, {}), onChange && /*#__PURE__*/_jsx(OnChangePlugin, {
             onChange: onChange,
             ignoreHistoryMergeTagChange: true,

package/dist/RichTextEditor/editorTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/editorTheme.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAqEhD;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,kBAAkB,CAwBtD"}
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/editorTheme.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA2GhD;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,kBAAkB,CA8CtD"}

package/dist/RichTextEditor/editorTheme.js

@@ -19,6 +19,24 @@ import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, font
  * class-name strings, which `stylex.props(...).className` yields.
  */
 export function sharedEditorTheme() {
+  const ulClass = {
+    className: "xsq74q5 x31w388 xtaz4m5 x43c9pm"
+  }.className ?? '';
+  const olClass = {
+    className: "xsq74q5 x31w388 x3yw8vx x43c9pm"
+  }.className ?? '';
+  const ulDepth2Class = {
+    className: "x31w388 x43c9pm x10im51j xrylv2j"
+  }.className ?? '';
+  const ulDepth3Class = {
+    className: "x31w388 x43c9pm x10im51j x152237o"
+  }.className ?? '';
+  const olDepth2Class = {
+    className: "x31w388 x43c9pm x10im51j x1rrqm6h"
+  }.className ?? '';
+  const olDepth3Class = {
+    className: "x31w388 x43c9pm x10im51j x19k9dhg"
+  }.className ?? '';
   return {
     paragraph: {
       className: "xsq74q5"
@@ -38,15 +56,23 @@ export function sharedEditorTheme() {
       className: "x1g06x3t xrxpjvj x126nfab xct1zlm x1t7ytsu x14ydlgx xv1l7n4"
     }.className,
     list: {
-      ul: {
-        className: "xsq74q5 x31w388"
-      }.className,
-      ol: {
-        className: "xsq74q5 x31w388"
+      ul: ulClass,
+      ol: olClass,
+      checklist: {
+        className: "xsq74q5 x43c9pm x3ct3a4 x12gdq22"
       }.className,
       listitem: {
-        className: "x1yqqeh1"
-      }.className
+        className: "x1yqqeh1 x1sle589"
+      }.className,
+      nested: {
+        listitem: {
+          className: "x1yqqeh1 x1sle589"
+        }.className
+      },
+      // Depth arrays cycle via `depth % length`, so three entries give three
+      // distinct nesting levels before repeating (disc→circle→square, etc.).
+      ulDepth: [ulClass, ulDepth2Class, ulDepth3Class],
+      olDepth: [olClass, olDepth2Class, olDepth3Class]
     },
     link: {
       className: "xjse4m1 x1bvjpef x1ypdohk"

package/dist/RichTextEditor/index.d.ts

@@ -8,7 +8,7 @@
  * SYNC: When modified, update this header and the editor component doc files.
  */
 export { RichTextEditor } from './RichTextEditor';
-export type { RichTextEditorProps, RichTextEditorStatus, RichTextEditorStatusType, RichTextEditorSize, } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorStatus, RichTextEditorStatusType, RichTextEditorSize, Transformer, } from './RichTextEditor';
 export { RichTextView } from './RichTextView';
 export type { RichTextViewProps } from './RichTextView';
 export { sharedEditorTheme } from './editorTheme';

package/dist/RichTextEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC"}

package/dist/index.d.ts

@@ -27,5 +27,5 @@ export { SankeyChart, type SankeyChartProps, SankeyLink, type SankeyLinkProps, S
 export * from './Stepper';
 export * from './CircularProgress';
 export { LogStream, type LogStreamProps, type LogEntry, type LogStreamLevel, } from './LogStream';
-export { RichTextEditor, type RichTextEditorProps, type RichTextEditorStatus, type RichTextEditorStatusType, type RichTextEditorSize, RichTextView, type RichTextViewProps, sharedEditorTheme, } from './RichTextEditor';
+export { RichTextEditor, type RichTextEditorProps, type RichTextEditorStatus, type RichTextEditorStatusType, type RichTextEditorSize, type Transformer, RichTextView, type RichTextViewProps, sharedEditorTheme, } from './RichTextEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/lab.css

@@ -111,6 +111,7 @@
   .xz51j44:not(#\#):not(#\#){grid-row:3}
   .x33j1x8:not(#\#):not(#\#){grid-row:var(--x-gridRow)}
   .x17y0mx6:not(#\#):not(#\#){inset-inline:0}
+  .x10im51j:not(#\#):not(#\#){margin-block:0}
   .x1yqqeh1:not(#\#):not(#\#){margin-block:var(--spacing-0-5)}
   .xsq74q5:not(#\#):not(#\#){margin-block:var(--spacing-1)}
   .x1g06x3t:not(#\#):not(#\#){margin-block:var(--spacing-2)}
@@ -370,7 +371,15 @@
   .x1cpk1wn:not(#\#):not(#\#):not(#\#){line-height:var(--text-heading-2-leading)}
   .x1kq96og:not(#\#):not(#\#):not(#\#){line-height:var(--text-label-leading)}
   .x1ltkj2j:not(#\#):not(#\#):not(#\#){line-height:var(--text-supporting-leading)}
+  .x43c9pm:not(#\#):not(#\#):not(#\#){list-style-position:outside}
+  .xrylv2j:not(#\#):not(#\#):not(#\#){list-style-type:circle}
+  .x3yw8vx:not(#\#):not(#\#):not(#\#){list-style-type:decimal}
+  .xtaz4m5:not(#\#):not(#\#):not(#\#){list-style-type:disc}
+  .x1sle589:not(#\#):not(#\#):not(#\#){list-style-type:inherit}
+  .x1rrqm6h:not(#\#):not(#\#):not(#\#){list-style-type:lower-alpha}
+  .x19k9dhg:not(#\#):not(#\#):not(#\#){list-style-type:lower-roman}
   .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
+  .x152237o:not(#\#):not(#\#):not(#\#){list-style-type:square}
   .x1h1dc9q:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(var(--spacing-0-5) + var(--border-width))}
   .xhi58n4:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(var(--spacing-1) * -1)}
   .xladpz9:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-0-5)}
@@ -389,6 +398,7 @@
   .xmarwi5:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--icon-inline-offset)}
   .x18gyask:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-0)}
   .x1vsv5vr:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-1)}
+  .x12gdq22:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-2)}
   .x126nfab:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-3)}
   .x1rey3nv:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-4)}
   .x31w388:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-6)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.1.9-canary.fe6baeb",
+  "version": "0.1.9-canary.fef7dca",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.1.9-canary.fe6baeb",
+    "@astryxdesign/core": "0.1.9-canary.fef7dca",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",

package/src/RichTextEditor/RichTextEditor.doc.mjs

@@ -93,9 +93,16 @@ export const docs = {
       name: 'hasMarkdownShortcuts',
       type: 'boolean',
       description:
-        'Enable Markdown shortcut typing (e.g. "# " for a heading). Uses default @lexical/markdown transformers.',
+        'Enable Markdown shortcut typing (e.g. "# " for a heading). Uses the transformers prop (defaults to the standard @lexical/markdown transformers).',
       default: 'true',
     },
+    {
+      name: 'transformers',
+      type: 'ReadonlyArray<Transformer>',
+      description:
+        'Markdown transformers — the single source of truth for markdown behaviour. Defaults to the standard @lexical/markdown TRANSFORMERS. In Lexical the same array drives all three markdown operations (shortcut typing, markdown->state import, state->markdown export); this prop wires shortcut typing today and is the intended input for the serialization APIs added in later phases. Pass a custom array to support additional node types (e.g. transformers layered in via the nodes extension point) consistently across all three. Shortcut typing is only applied when hasMarkdownShortcuts is true.',
+      default: 'TRANSFORMERS',
+    },
     {
       name: 'hasAutoFocus',
       type: 'boolean',

package/src/RichTextEditor/RichTextEditor.test.tsx

@@ -16,11 +16,132 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import type {LexicalEditor} from 'lexical';
 import {$getRoot, $createParagraphNode, $createTextNode} from 'lexical';
 import {HeadingNode} from '@lexical/rich-text';
+import {
+  TRANSFORMERS,
+  $convertFromMarkdownString,
+} from '@lexical/markdown';
 import {RichTextEditor} from './RichTextEditor';
 import {RichTextView} from './RichTextView';
 
+// Small plugin that captures the editor instance so tests can drive real
+// Lexical updates (jsdom does not implement contenteditable editing).
+function CaptureEditor({
+  onReady,
+}: {
+  onReady: (editor: LexicalEditor) => void;
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    onReady(editor);
+  }, [editor, onReady]);
+  return null;
+}
+
 // A minimal valid serialized Lexical editor state containing a single
 // paragraph with the text "Hello world".
+// Builds a serialized Lexical state containing a list. `listType` is
+// 'bullet' (renders <ul>) or 'number' (renders <ol>). Used to verify that the
+// editor theme applies visible list markers rather than bare indentation.
+function makeListState(listType: 'bullet' | 'number'): string {
+  const tag = listType === 'number' ? 'ol' : 'ul';
+  return JSON.stringify({
+    root: {
+      children: [
+        {
+          children: [
+            {
+              children: [
+                {
+                  detail: 0,
+                  format: 0,
+                  mode: 'normal',
+                  style: '',
+                  text: 'Item one',
+                  type: 'text',
+                  version: 1,
+                },
+              ],
+              direction: 'ltr',
+              format: '',
+              indent: 0,
+              type: 'listitem',
+              version: 1,
+              value: 1,
+            },
+          ],
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          type: 'list',
+          version: 1,
+          listType,
+          start: 1,
+          tag,
+        },
+      ],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1,
+    },
+  });
+}
+
+// Builds a serialized Lexical state with a two-level nested bullet list:
+//   • Item one
+//     ◦ Nested item
+// Lexical models nesting as a child `list` node inside a `listitem`. Used to
+// verify that depth-2 markers differ from depth-1 (disc → circle) rather than
+// falling back to bare indentation.
+function makeNestedBulletState(): string {
+  const textNode = (text: string) => ({
+    detail: 0,
+    format: 0,
+    mode: 'normal',
+    style: '',
+    text,
+    type: 'text',
+    version: 1,
+  });
+  const listItem = (children: unknown[], value: number) => ({
+    children,
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'listitem',
+    version: 1,
+    value,
+  });
+  const bulletList = (children: unknown[]) => ({
+    children,
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'list',
+    version: 1,
+    listType: 'bullet',
+    start: 1,
+    tag: 'ul',
+  });
+  return JSON.stringify({
+    root: {
+      children: [
+        bulletList([
+          listItem([textNode('Item one')], 1),
+          // A nested list lives inside its own list item wrapper.
+          listItem([bulletList([listItem([textNode('Nested item')], 1)])], 2),
+        ]),
+      ],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1,
+    },
+  });
+}
+
 const HELLO_STATE = JSON.stringify({
   root: {
     children: [
@@ -112,19 +233,12 @@ describe('RichTextEditor', () => {
     // instance via a small capture plugin and drive a real Lexical update,
     // then assert onChange fires.
     let editorRef: LexicalEditor | undefined;
-    function CaptureEditor() {
-      const [editor] = useLexicalComposerContext();
-      useEffect(() => {
-        editorRef = editor;
-      }, [editor]);
-      return null;
-    }
     const onChange = vi.fn();
     render(
       <RichTextEditor
         label="Notes"
         onChange={onChange}
-        plugins={<CaptureEditor />}
+        plugins={<CaptureEditor onReady={e => (editorRef = e)} />}
       />,
     );
     await waitFor(() => expect(editorRef).toBeDefined());
@@ -155,6 +269,70 @@ describe('RichTextEditor', () => {
     );
     expect(screen.getByTestId('custom-plugin')).toBeInTheDocument();
   });
+
+  it('accepts a custom transformers array without throwing', () => {
+    // Empty transformer set is a valid custom configuration (disables all
+    // markdown shortcuts while keeping the plugin mounted).
+    render(<RichTextEditor label="Notes" transformers={[]} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders when markdown shortcuts are disabled', () => {
+    render(<RichTextEditor label="Notes" hasMarkdownShortcuts={false} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('applies the default transformers to convert markdown to a heading', async () => {
+    // jsdom can't dispatch the keystrokes that trigger registerMarkdownShortcuts
+    // live, so we drive $convertFromMarkdownString with the same TRANSFORMERS
+    // the component registers by default. This proves the default transformer
+    // set actually produces the expected node structure (a heading), rather
+    // than only asserting the editor mounts.
+    let editorRef: LexicalEditor | undefined;
+    render(
+      <RichTextEditor
+        label="Notes"
+        plugins={<CaptureEditor onReady={e => (editorRef = e)} />}
+      />,
+    );
+    await waitFor(() => expect(editorRef).toBeDefined());
+    editorRef!.update(() => {
+      $convertFromMarkdownString('# Title', TRANSFORMERS);
+    });
+    await waitFor(() => {
+      editorRef!.getEditorState().read(() => {
+        const first = $getRoot().getFirstChild();
+        expect(first?.getType()).toBe('heading');
+        expect(first?.getTextContent()).toBe('Title');
+      });
+    });
+  });
+
+  it('leaves markdown untransformed when given an empty transformers array', async () => {
+    // With no transformers, the same markdown text stays a plain paragraph —
+    // demonstrating the transformers prop is the effective source of truth for
+    // markdown behaviour, not a fixed internal default.
+    let editorRef: LexicalEditor | undefined;
+    render(
+      <RichTextEditor
+        label="Notes"
+        transformers={[]}
+        plugins={<CaptureEditor onReady={e => (editorRef = e)} />}
+      />,
+    );
+    await waitFor(() => expect(editorRef).toBeDefined());
+    editorRef!.update(() => {
+      // Empty transformer set: markdown syntax is preserved verbatim.
+      $convertFromMarkdownString('# Title', []);
+    });
+    await waitFor(() => {
+      editorRef!.getEditorState().read(() => {
+        const first = $getRoot().getFirstChild();
+        expect(first?.getType()).toBe('paragraph');
+        expect(first?.getTextContent()).toBe('# Title');
+      });
+    });
+  });
 });
 
 describe('RichTextView', () => {
@@ -213,6 +391,48 @@ describe('RichTextView', () => {
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
   });
 
+  it('renders bullet lists with a disc marker (not bare indentation)', async () => {
+    const {container} = render(<RichTextView value={makeListState('bullet')} />);
+    await waitFor(() =>
+      expect(screen.getByText('Item one')).toBeInTheDocument(),
+    );
+    const ul = container.querySelector('ul');
+    expect(ul).not.toBeNull();
+    // The theme must give the <ul> a marker class so the browser draws a
+    // bullet. A bare list with only padding would show indentation only —
+    // the exact bug this guards against.
+    expect(ul?.className.trim()).not.toBe('');
+    expect(getComputedStyle(ul as Element).listStyleType).toBe('disc');
+  });
+
+  it('renders numbered lists with a decimal marker (not bare indentation)', async () => {
+    const {container} = render(<RichTextView value={makeListState('number')} />);
+    await waitFor(() =>
+      expect(screen.getByText('Item one')).toBeInTheDocument(),
+    );
+    const ol = container.querySelector('ol');
+    expect(ol).not.toBeNull();
+    expect(ol?.className.trim()).not.toBe('');
+    expect(getComputedStyle(ol as Element).listStyleType).toBe('decimal');
+  });
+
+  it('renders nested bullet lists with a distinct depth-2 marker (circle)', async () => {
+    const {container} = render(
+      <RichTextView value={makeNestedBulletState()} />,
+    );
+    await waitFor(() =>
+      expect(screen.getByText('Nested item')).toBeInTheDocument(),
+    );
+    const lists = container.querySelectorAll('ul');
+    // Outer <ul> plus the nested <ul>.
+    expect(lists.length).toBe(2);
+    const [outer, nested] = lists;
+    expect(getComputedStyle(outer).listStyleType).toBe('disc');
+    // Depth-2 must cycle to a different marker so nesting is visually legible,
+    // matching the native browser disc → circle progression.
+    expect(getComputedStyle(nested).listStyleType).toBe('circle');
+  });
+
   it('renders nothing (no crash) on malformed JSON with no fallback', () => {
     expect(() => render(<RichTextView value={'garbage'} />)).not.toThrow();
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();

package/src/RichTextEditor/RichTextEditor.tsx

@@ -24,7 +24,7 @@
  * dependencies — install them to use this component.
  */
 
-import {useEffect, useId, useRef, type ReactNode} from 'react';
+import {useEffect, useId, useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -59,7 +59,8 @@ import {LinkPlugin} from '@lexical/react/LexicalLinkPlugin';
 import {TabIndentationPlugin} from '@lexical/react/LexicalTabIndentationPlugin';
 import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
-import {TRANSFORMERS} from '@lexical/markdown';
+import {TRANSFORMERS, type Transformer} from '@lexical/markdown';
+export type {Transformer} from '@lexical/markdown';
 import {ListNode, ListItemNode} from '@lexical/list';
 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {LinkNode, AutoLinkNode} from '@lexical/link';
@@ -224,10 +225,29 @@ export interface RichTextEditorProps extends Omit<
   plugins?: ReactNode;
   /**
    * Whether to enable Markdown shortcut typing (e.g. `# ` for a heading,
-   * `- ` for a list). Uses the default `@lexical/markdown` transformers.
+   * `- ` for a list). Uses the `transformers` prop (defaults to the standard
+   * `@lexical/markdown` transformers).
    * @default true
    */
   hasMarkdownShortcuts?: boolean;
+  /**
+   * Markdown transformers — the single source of truth for markdown behaviour.
+   * Defaults to the standard `@lexical/markdown` `TRANSFORMERS`.
+   *
+   * The same array drives all three markdown operations in Lexical (see the
+   * lexical-playground reference, where one `PLAYGROUND_TRANSFORMERS` array
+   * feeds each):
+   *  - shortcut typing        — `registerMarkdownShortcuts` (wired here today)
+   *  - markdown -> state       — `$convertFromMarkdownString` (future import API)
+   *  - state -> markdown       — `$convertToMarkdownString` (future `getMarkdown`)
+   *
+   * Pass a custom array to support additional node types (e.g. custom
+   * transformers layered in via the `nodes` extension point) consistently
+   * across all three. Shortcut typing is only applied when
+   * `hasMarkdownShortcuts` is true; the array is still the intended input for
+   * the serialization APIs added in later phases.
+   */
+  transformers?: ReadonlyArray<Transformer>;
   /** Whether to automatically focus the editor on mount. @default false */
   hasAutoFocus?: boolean;
   /**
@@ -275,6 +295,7 @@ export function RichTextEditor({
   nodes,
   plugins,
   hasMarkdownShortcuts = true,
+  transformers = TRANSFORMERS,
   hasAutoFocus = false,
   namespace = 'astryx-editor',
   xstyle,
@@ -296,6 +317,12 @@ export function RichTextEditor({
 
   const editable = !isReadOnly && !isDisabled;
 
+  // Stabilize the transformers array so MarkdownShortcutPlugin doesn't
+  // re-register on every render. `[...transformers]` would allocate a new
+  // array each time; memoize on the prop identity instead. (React Compiler
+  // isn't running the transform in this repo, so this isn't auto-memoized.)
+  const markdownTransformers = useMemo(() => [...transformers], [transformers]);
+
   const initialConfig: InitialConfigType = {
     namespace,
     theme: themeRef.current,
@@ -379,7 +406,7 @@ export function RichTextEditor({
             <LinkPlugin />
             <TabIndentationPlugin />
             {hasMarkdownShortcuts && (
-              <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+              <MarkdownShortcutPlugin transformers={markdownTransformers} />
             )}
             {hasAutoFocus && <AutoFocusOnMount />}
             {onChange && (

package/src/RichTextEditor/editorTheme.ts

@@ -53,12 +53,50 @@ const editorTheme = stylex.create({
     borderInlineStartColor: colorVars['--color-border-emphasized'],
     color: colorVars['--color-text-secondary'],
   },
-  list: {
+  ul: {
     marginBlock: spacingVars['--spacing-1'],
     paddingInlineStart: spacingVars['--spacing-6'],
+    listStyleType: 'disc',
+    listStylePosition: 'outside',
+  },
+  ol: {
+    marginBlock: spacingVars['--spacing-1'],
+    paddingInlineStart: spacingVars['--spacing-6'],
+    listStyleType: 'decimal',
+    listStylePosition: 'outside',
+  },
+  // Nested lists: no extra vertical margin, and cycle marker styles per depth
+  // to match native browser list nesting. Lexical indexes ulDepth/olDepth by
+  // `depth % array.length`, so three entries give three distinct levels that
+  // then repeat — matching the browser default disc → circle → square cycle.
+  ulNested: {
+    marginBlock: 0,
+  },
+  ulDepth2: {
+    listStyleType: 'circle',
+  },
+  ulDepth3: {
+    listStyleType: 'square',
+  },
+  olNested: {
+    marginBlock: 0,
+  },
+  olDepth2: {
+    listStyleType: 'lower-alpha',
+  },
+  olDepth3: {
+    listStyleType: 'lower-roman',
+  },
+  // Checklists render as a <ul listtype="check">; Lexical draws checkbox
+  // affordances on the list items, so suppress the disc marker here.
+  checklist: {
+    listStyleType: 'none',
+    paddingInlineStart: spacingVars['--spacing-2'],
   },
   listItem: {
     marginBlock: spacingVars['--spacing-0-5'],
+    // Ensure the marker is shown (some CSS resets set list-style: none on li).
+    listStyleType: 'inherit',
   },
   link: {
     color: colorVars['--color-text-accent'],
@@ -94,6 +132,20 @@ const editorTheme = stylex.create({
  * class-name strings, which `stylex.props(...).className` yields.
  */
 export function sharedEditorTheme(): EditorThemeClasses {
+  const ulClass = stylex.props(editorTheme.ul).className ?? '';
+  const olClass = stylex.props(editorTheme.ol).className ?? '';
+  const ulDepth2Class =
+    stylex.props(editorTheme.ul, editorTheme.ulNested, editorTheme.ulDepth2)
+      .className ?? '';
+  const ulDepth3Class =
+    stylex.props(editorTheme.ul, editorTheme.ulNested, editorTheme.ulDepth3)
+      .className ?? '';
+  const olDepth2Class =
+    stylex.props(editorTheme.ol, editorTheme.olNested, editorTheme.olDepth2)
+      .className ?? '';
+  const olDepth3Class =
+    stylex.props(editorTheme.ol, editorTheme.olNested, editorTheme.olDepth3)
+      .className ?? '';
   return {
     paragraph: stylex.props(editorTheme.paragraph).className,
     heading: {
@@ -103,9 +155,17 @@ export function sharedEditorTheme(): EditorThemeClasses {
     },
     quote: stylex.props(editorTheme.quote).className,
     list: {
-      ul: stylex.props(editorTheme.list).className,
-      ol: stylex.props(editorTheme.list).className,
+      ul: ulClass,
+      ol: olClass,
+      checklist: stylex.props(editorTheme.ul, editorTheme.checklist).className,
       listitem: stylex.props(editorTheme.listItem).className,
+      nested: {
+        listitem: stylex.props(editorTheme.listItem).className,
+      },
+      // Depth arrays cycle via `depth % length`, so three entries give three
+      // distinct nesting levels before repeating (disc→circle→square, etc.).
+      ulDepth: [ulClass, ulDepth2Class, ulDepth3Class],
+      olDepth: [olClass, olDepth2Class, olDepth3Class],
     },
     link: stylex.props(editorTheme.link).className,
     text: {

package/src/RichTextEditor/index.ts

@@ -18,6 +18,7 @@ export type {
   RichTextEditorStatus,
   RichTextEditorStatusType,
   RichTextEditorSize,
+  Transformer,
 } from './RichTextEditor';
 
 export {RichTextView} from './RichTextView';

package/src/index.ts

@@ -238,6 +238,7 @@ export {
   type RichTextEditorStatus,
   type RichTextEditorStatusType,
   type RichTextEditorSize,
+  type Transformer,
   RichTextView,
   type RichTextViewProps,
   sharedEditorTheme,