frappe-ui 1.0.0-beta.73 → 1.0.0-beta.75

package/experimental/ListView/ListFooter.vue

@@ -4,7 +4,9 @@
       <slot name="left">
         <TabButtons
           v-model="pageLengthCount"
-          :buttons="pageLengthOptions.map((o) => ({ label: o, value: o }))"
+          :options="
+            pageLengthOptions.map((o) => ({ label: String(o), value: o }))
+          "
         />
       </slot>
       <slot name="right">
@@ -27,7 +29,7 @@
 </template>
 <script setup>
 import TabButtons from '#components/TabButtons/TabButtons.vue'
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   modelValue: {
@@ -51,7 +53,9 @@ const pageLengthCount = computed({
   set: (value) => emit('update:modelValue', value),
 })
 
-const pageLengthOptions = ref(props.options.pageLengthOptions || [20, 50, 100])
+const pageLengthOptions = computed(
+  () => props.options.pageLengthOptions || [20, 50, 100],
+)
 
 const showLoadMore = computed(() => {
   return (

package/experimental.ts

@@ -10,17 +10,6 @@ export {
   InputError,
 } from './src/components/InputLabeling'
 export { useInputLabeling } from './src/composables/useInputLabeling'
-export {
-  CodeEditor,
-  CodePreview,
-  loadLanguage,
-} from './experimental/CodeEditor'
-export type {
-  CodeLanguage,
-  CodeEditorProps,
-  CodeEditorEmits,
-  CodePreviewProps,
-} from './experimental/CodeEditor'
 // Calendar family. Moved out of root (#1020, redirect of #989) — parked
 // here, unstable, with its public API unchanged, until a redesigned
 // calendar family replaces it. Migration is the import-path change only.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -69,7 +69,8 @@
     "docs:gen": "tsx docs/scripts/propsgen.ts",
     "docs:gen:all": "yarn docs:gen --all",
     "docs:check": "tsx docs/scripts/propsgen.ts --check",
-    "sync-tokens": "node tailwind/figma-tokens-to-theme.js"
+    "sync-tokens": "node tailwind/tokens/build.js",
+    "sync-token-types": "node tailwind/tokens/build-types.js"
   },
   "exports": {
     ".": {
@@ -84,6 +85,10 @@
       "import": "./src/molecules/editor/index.ts",
       "types": "./src/molecules/editor/index.ts"
     },
+    "./code-editor": {
+      "import": "./src/molecules/code-editor/index.ts",
+      "types": "./src/molecules/code-editor/index.ts"
+    },
     "./list": {
       "import": "./src/molecules/list/index.ts",
       "types": "./src/molecules/list/index.ts"
@@ -101,6 +106,11 @@
       "import": "./tailwind/index.js",
       "default": "./tailwind/index.js"
     },
+    "./tailwind/tokens": {
+      "types": "./tailwind/tokens.d.ts",
+      "import": "./tailwind/tokens.js",
+      "default": "./tailwind/tokens.js"
+    },
     "./vite": {
       "types": "./vite/index.d.ts",
       "import": "./vite/index.js"
@@ -158,25 +168,15 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
-    "@vue/compiler-sfc": "^3.5.13",
-    "@codemirror/lang-css": "^6.3.0",
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.3.1",
-    "@codemirror/lang-python": "^6.1.6",
-    "@codemirror/lang-sass": "^6.0.2",
-    "@codemirror/lang-sql": "^6.8.0",
-    "@codemirror/lang-xml": "^6.1.0",
-    "@codemirror/lang-yaml": "^6.1.3",
-    "@codemirror/language": "^6.0.0",
-    "@codemirror/lint": "^6.0.0",
+    "@codemirror/autocomplete": "^6.0.0",
     "@codemirror/commands": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/search": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
-    "@lezer/highlight": "^1.0.0",
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/vue": "^1.1.9",
+    "@lezer/highlight": "^1.0.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.16",
     "@tiptap/core": "^3.26.0",
@@ -209,8 +209,8 @@
     "@tiptap/starter-kit": "^3.26.0",
     "@tiptap/suggestion": "^3.26.0",
     "@tiptap/vue-3": "^3.26.0",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vueuse/core": "^14.1.0",
-    "codemirror": "^6.0.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.4.0",
     "echarts": "^6.1.0",
@@ -232,16 +232,60 @@
     "vue-sonner": "^2.0.9"
   },
   "peerDependencies": {
+    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.1",
+    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/lint": "^6.0.0",
     "@shikijs/transformers": ">=3.15.0",
     "@vue/compiler-dom": ">=3.5.0",
     "shiki": ">=3.15.0",
-    "tailwindcss": ">=3.4.0 <4",
+    "tailwindcss": ">=3.4.2 <4",
     "vite": ">=5",
     "vitepress": ">=2.0.0-alpha.15",
     "vue": ">=3.5.0",
     "vue-router": "^4.1.6"
   },
   "peerDependenciesMeta": {
+    "@codemirror/lang-css": {
+      "optional": true
+    },
+    "@codemirror/lang-html": {
+      "optional": true
+    },
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/lang-python": {
+      "optional": true
+    },
+    "@codemirror/lang-sass": {
+      "optional": true
+    },
+    "@codemirror/lang-sql": {
+      "optional": true
+    },
+    "@codemirror/lang-xml": {
+      "optional": true
+    },
+    "@codemirror/lang-yaml": {
+      "optional": true
+    },
+    "@codemirror/lint": {
+      "optional": true
+    },
     "@shikijs/transformers": {
       "optional": true
     },
@@ -259,6 +303,17 @@
     }
   },
   "devDependencies": {
+    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.1",
+    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/lint": "^6.0.0",
     "@cypress/code-coverage": "^3.13.10",
     "@shikijs/transformers": "^3.15.0",
     "@vitejs/plugin-vue": "^6.0.7",
@@ -277,7 +332,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "shiki": "^3.15.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.2",
     "tsx": "^4.20.6",
     "vite": "^7.3.2",
     "vite-plugin-istanbul": "^9.0.0",

package/src/components/Badge/Badge.vue

@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   variant: 'subtle',
 })
 
-// The semantic scale (Figma export → tailwind/generated/colors.json) is
+// The semantic scale (Figma export → tailwind/tokens/colors.js) is
 // consistent across all themes — gray is the only exception (`-7` is its
 // saturated step, since gray needs more headroom). Tailwind's JIT needs
 // literal class names so the per-theme strings are inlined below.

package/src/molecules/code-editor/CodeEditor.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { Extension } from '@codemirror/state'
+import type { EditorView } from '@codemirror/view'
+import { useCodeEditor } from './useCodeEditor'
+import { provideCodeEditor } from './code-editor-context'
+import type { CodeEditorExposed } from './types'
+
+const model = defineModel<string>({ default: '' })
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Every capability the editor has: languages, keymaps, completion sources,
+     * themes. Required, and reactive — a new array is re-applied without
+     * recreating the view, so the document, the selection and the undo history
+     * survive a language change.
+     */
+    extensions: Extension[]
+    editable?: boolean
+    autofocus?: boolean
+  }>(),
+  {
+    editable: true,
+    autofocus: false,
+  },
+)
+
+const emit = defineEmits<{
+  /** Blur: the commit point. */
+  change: [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+defineSlots<{
+  // The consumer owns the layout: render CodeEditorContent, and whatever chrome
+  // the app draws around it.
+  default?(props: { editor: EditorView | null }): any
+}>()
+
+const editor = useCodeEditor({
+  content: model,
+  extensions: () => props.extensions,
+  editable: () => props.editable,
+  autofocus: props.autofocus,
+  onChange(view) {
+    // Read straight off the view rather than off `model`: `change` is a
+    // side-event and must not depend on v-model timing.
+    emit('change', view.state.doc.toString())
+  },
+  onFocus(_view, event) {
+    emit('focus', event)
+  },
+  onBlur(_view, event) {
+    emit('blur', event)
+  },
+})
+
+// Publish the view to the parts in the slot, so they need no explicit `:editor`.
+provideCodeEditor(editor)
+
+// Sanctioned template-ref escape hatch (ADR-0012): a parent's script reaches the
+// live view — to focus it, insert at the cursor, or open the search panel — with
+// no other surface that gets there. The exposed member is the view itself, so no
+// new verbs join the imperative surface.
+//
+// A getter, and typed: Vue unwraps a handed-back ref at the proxy boundary, so
+// `defineExpose({ editor })` would document a ref the caller never sees and
+// leave that ref writable from outside. Same shape as `TextInput.vue`.
+defineExpose<CodeEditorExposed>({
+  get editor() {
+    return editor.value
+  },
+})
+</script>
+
+<template>
+  <!-- Renderless. <CodeEditor> owns the view lifecycle and the content v-model,
+       and draws nothing: there is no label, no box and no toolbar here. The box
+       is <CodeEditorContent>, and the label belongs to the app's own field. -->
+  <slot :editor="editor" />
+</template>

package/src/molecules/code-editor/CodeEditorContent.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watch,
+} from 'vue'
+import type { EditorView } from '@codemirror/view'
+import { useResolvedCodeEditor } from './code-editor-context'
+
+const props = defineProps<{
+  /** Optional inside <CodeEditor> — falls back to the provided view. */
+  editor?: EditorView | null
+}>()
+
+const emit = defineEmits<{
+  /**
+   * The content crossed the height cap, or stopped crossing it. Only
+   * transitions are emitted.
+   *
+   * CSS cannot measure the crossing: a cap clips silently, and no selector
+   * matches "this element is scrolling". Three consumers draw an expand
+   * affordance off exactly this fact. frappe-ui draws none of them — it emits
+   * the boolean and sets `data-overflowing`.
+   */
+  overflow: [overflowing: boolean]
+}>()
+
+const resolved = useResolvedCodeEditor(() => props.editor)
+const rootEl = useTemplateRef<HTMLElement>('rootEl')
+const overflowing = ref(false)
+// Both flags live on the part's own root, never on `view.dom`. CodeMirror owns
+// that element's `class` attribute: it builds one string from `cm-editor`,
+// `cm-focused`, the theme classes and every `editorAttributes` value, then
+// writes it with `setAttribute`, which drops anything added from outside. A
+// class set here would survive until the next focus, blur or theme change.
+const scrolledX = ref(false)
+
+let mounted: EditorView | null = null
+let observer: ResizeObserver | null = null
+// Last value written to the DOM. `measure` runs inside a ResizeObserver
+// callback, so writing a style it already holds is how an observer loop starts.
+let textHeight = ''
+
+function measure() {
+  const view = mounted
+  if (!view) return
+
+  const scroller = view.scrollDOM
+  const next = scroller.scrollHeight > scroller.clientHeight + 1
+  if (next !== overflowing.value) {
+    overflowing.value = next
+    emit('overflow', next)
+  }
+
+  // Drives the gutter's horizontal-scroll shadow (see style.css).
+  scrolledX.value = scroller.scrollLeft > 0
+
+  // The shadow is capped to the bottom of the last line rather than the full
+  // gutter height: CodeMirror stretches the gutter past the code, and a shadow
+  // running down into the empty area below reads as one floating in space.
+  const nextTextHeight = `${view.lineBlockAt(view.state.doc.length).bottom}px`
+  if (nextTextHeight !== textHeight) {
+    textHeight = nextTextHeight
+    view.dom.style.setProperty('--_code-text-height', nextTextHeight)
+  }
+}
+
+function unmountView() {
+  if (!mounted) return
+  mounted.scrollDOM.removeEventListener('scroll', measure)
+  mounted.dom.remove()
+  mounted = null
+  // The observer holds the departed view's `contentDOM` and `scrollDOM`. It has
+  // to go here rather than next to the re-observe below, because the part can
+  // lose its view without gaining another one (`:editor="null"`, or the engine
+  // destroying the view on unmount).
+  observer?.disconnect()
+  observer = null
+  // The cached value belongs to the view that just left, not to the next one.
+  textHeight = ''
+  // An empty box scrolls nowhere.
+  scrolledX.value = false
+  // An empty box overflows nothing. Without this the part keeps
+  // `data-overflowing` set, and the consumer that drew an expand affordance off
+  // the last `true` never hears it go away.
+  if (overflowing.value) {
+    overflowing.value = false
+    emit('overflow', false)
+  }
+}
+
+function mountView(view: EditorView | null) {
+  const el = rootEl.value
+  if (!el || mounted === view) return
+  unmountView()
+  if (!view) return
+
+  // The view is created with no `parent`, so `view.dom` is detached until a
+  // part appends it. This is the append. The part never destroys the view: the
+  // engine owns that, and a part that outlived its editor would take it down.
+  el.appendChild(view.dom)
+  mounted = view
+  view.scrollDOM.addEventListener('scroll', measure, { passive: true })
+
+  if (typeof ResizeObserver !== 'undefined') {
+    // `contentDOM` catches doc edits and folds; `scrollDOM` catches the cap
+    // itself changing and wrapping reflow on a width change. Neither alone
+    // covers both: a capped scroller keeps its box size while the content
+    // height shifts under it.
+    observer = new ResizeObserver(() => measure())
+    observer.observe(view.contentDOM)
+    observer.observe(view.scrollDOM)
+  }
+  measure()
+}
+
+onMounted(() => mountView(resolved.value))
+watch(resolved, async (view) => {
+  await nextTick()
+  mountView(view)
+})
+onBeforeUnmount(() => unmountView())
+</script>
+
+<template>
+  <!-- The box. `class` falls through the normal way (P10: no class-name prop) —
+       unlike the editor family's content part, this root is ours, not the
+       engine's, so nothing else writes to its class attribute. -->
+  <div
+    ref="rootEl"
+    data-slot="code-editor-content"
+    :data-overflowing="overflowing ? 'true' : undefined"
+    :data-scrolled-x="scrolledX ? 'true' : undefined"
+  />
+</template>

package/src/molecules/code-editor/code-editor-context.ts

@@ -0,0 +1,46 @@
+import {
+  computed,
+  inject,
+  provide,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+import type { EditorView } from '@codemirror/view'
+
+/**
+ * Code editor context.
+ *
+ * `<CodeEditor>` provides its live `EditorView` ref through this key so the
+ * parts rendered in its slot (`CodeEditorContent`) can pull it via `inject`
+ * instead of having `:editor` threaded down by hand. An explicit `:editor`
+ * prop always wins, which is what keeps the parts usable WITHOUT
+ * `<CodeEditor>` (composed directly on a `useCodeEditor` ref).
+ *
+ * The shape mirrors `frappe-ui/editor`'s `editor-context.ts`. The two families
+ * keep separate keys: a code editor nested inside a rich-text editor must not
+ * inject the TipTap instance, and vice versa.
+ */
+export const CodeEditorContextKey: InjectionKey<Ref<EditorView | null>> =
+  Symbol('frappe-ui-code-editor-context')
+
+/** Publish a view ref to descendant parts. Called by `<CodeEditor>`. */
+export function provideCodeEditor(editor: Ref<EditorView | null>): void {
+  provide(CodeEditorContextKey, editor)
+}
+
+/**
+ * Resolve the view a part should use: the explicit `:editor` prop when one was
+ * passed (even `null`), otherwise the injected context. Returns a reactive
+ * `ComputedRef` so the part tracks the view coming online.
+ */
+export function useResolvedCodeEditor(
+  getProp: () => EditorView | null | undefined,
+): ComputedRef<EditorView | null> {
+  const injected = inject(CodeEditorContextKey, null)
+  return computed(() => {
+    const fromProp = getProp()
+    if (fromProp !== undefined) return fromProp
+    return injected?.value ?? null
+  })
+}

package/src/molecules/code-editor/extensions.ts

@@ -0,0 +1,133 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { indentWithTab } from '@codemirror/commands'
+import { searchPanelOpen } from '@codemirror/search'
+import { Prec, type Extension } from '@codemirror/state'
+import { EditorView, keymap } from '@codemirror/view'
+import { tags } from '@lezer/highlight'
+
+/**
+ * The class every frappe rule in `style.css` is scoped under. Nothing about the
+ * frappe look is ambient: without `codeChrome` in the extension array the class
+ * is absent and none of those rules match.
+ */
+export const CODE_CHROME_CLASS = 'frappe-code'
+
+/**
+ * Layer 2 of the styling model: the frappe box. Adds one class to the editor's
+ * root, and the package stylesheet does the rest.
+ *
+ * The styling lives in plain CSS rather than in an `EditorView.theme`, because
+ * a theme is a StyleModule whose injection order decides equal-specificity
+ * fights. The old field lost that fight often enough to leave a comment about
+ * it. A CSS custom property read at one use site has no ordering problem, so
+ * every knob here is a `--code-*` variable a consumer sets on the editor or on
+ * any ancestor.
+ */
+export const codeChrome: Extension = EditorView.editorAttributes.of({
+  class: CODE_CHROME_CLASS,
+})
+
+/**
+ * Layer 3: frappe syntax colours.
+ *
+ * Syntax highlighting needs an extension in any case. CodeMirror maps Lezer
+ * tags to classes through `syntaxHighlighting(HighlightStyle.define(...))`, and
+ * plain CSS cannot do that mapping.
+ *
+ * Every colour is an `--ink-*` token, and those tokens re-map under the app's
+ * colour scheme — so the palette follows dark mode with no second theme and no
+ * `Compartment`. `Prec.highest` makes these win over a default highlight style
+ * a consumer also loaded, which then only fills the tags this one omits.
+ */
+export const codeHighlight: Extension = Prec.highest(
+  syntaxHighlighting(
+    HighlightStyle.define([
+      {
+        tag: [tags.keyword, tags.moduleKeyword, tags.controlKeyword],
+        color: 'var(--ink-blue-5)',
+      },
+      {
+        tag: [tags.string, tags.special(tags.string), tags.regexp],
+        color: 'var(--ink-green-5)',
+      },
+      {
+        tag: [tags.comment, tags.lineComment, tags.blockComment],
+        color: 'var(--ink-gray-5)',
+        fontStyle: 'italic',
+      },
+      {
+        tag: [tags.number, tags.bool, tags.null, tags.atom],
+        color: 'var(--ink-amber-5)',
+      },
+      {
+        tag: [tags.typeName, tags.className, tags.namespace],
+        color: 'var(--ink-amber-5)',
+      },
+      {
+        tag: [
+          tags.function(tags.variableName),
+          tags.function(tags.propertyName),
+          tags.labelName,
+        ],
+        color: 'var(--ink-blue-5)',
+      },
+      {
+        tag: [tags.propertyName, tags.attributeName],
+        color: 'var(--ink-red-5)',
+      },
+      { tag: [tags.tagName, tags.angleBracket], color: 'var(--ink-red-5)' },
+      {
+        tag: [tags.operator, tags.punctuation, tags.separator, tags.bracket],
+        color: 'var(--ink-gray-6)',
+      },
+      {
+        tag: [tags.variableName, tags.definition(tags.variableName)],
+        color: 'var(--ink-gray-8)',
+      },
+      { tag: tags.meta, color: 'var(--ink-gray-5)' },
+      {
+        tag: [tags.link, tags.url],
+        color: 'var(--ink-blue-5)',
+        textDecoration: 'underline',
+      },
+      { tag: tags.heading, color: 'var(--ink-blue-5)', fontWeight: 'bold' },
+      { tag: tags.strong, fontWeight: 'bold' },
+      { tag: tags.emphasis, fontStyle: 'italic' },
+      { tag: tags.strikethrough, textDecoration: 'line-through' },
+      { tag: tags.invalid, color: 'var(--ink-red-7)' },
+    ]),
+  ),
+)
+
+/**
+ * The frappe keymap: Tab and Shift-Tab indent and dedent, Escape blurs.
+ *
+ * Escape is a WCAG 2.1.2 obligation, not a nicety. `indentWithTab` takes Tab
+ * away from the browser's focus-move, so without an escape hatch a keyboard
+ * user who tabs into the editor cannot tab out. Esc-then-Tab is CodeMirror's
+ * standard way out of that trap.
+ *
+ * `Prec.high` puts both bindings above the default keymaps, so a kit member can
+ * never shadow them by landing earlier in the array.
+ *
+ * That precedence is why the blur is conditional. `searchKeymap` declares
+ * `{key: 'Escape', run: closeSearchPanel, scope: 'editor search-panel'}` —
+ * two scopes, and CodeMirror registers the binding under both. In the `editor`
+ * scope this one runs first, so returning `true` with a panel open would blur
+ * the editor, leave the panel up, and fire the blur commit as a side effect.
+ * Falling through hands Escape back to `closeSearchPanel`, and the next Escape
+ * blurs.
+ */
+export const codeKeymap: Extension = Prec.high(
+  keymap.of([
+    indentWithTab,
+    {
+      key: 'Escape',
+      run: (view) => {
+        if (searchPanelOpen(view.state)) return false
+        view.contentDOM.blur()
+        return true
+      },
+    },
+  ]),
+)

package/src/molecules/code-editor/index.ts

@@ -0,0 +1,32 @@
+// Code editor styles ship with the package: importing from
+// `frappe-ui/code-editor` pulls in the frappe chrome rules so the family is
+// self-contained. The rules are scoped under the class `codeChrome` adds, so
+// loading this stylesheet still styles nothing until that extension is in the
+// extension array.
+import './style.css'
+
+// Engine
+export { useCodeEditor, type CodeEditorOptions } from './useCodeEditor'
+
+// The component, and the one part. There are no menu parts: CodeMirror renders
+// its own gutters, panels, tooltips and completion popups inside `view.dom`.
+export { default as CodeEditor } from './CodeEditor.vue'
+export { default as CodeEditorContent } from './CodeEditorContent.vue'
+
+// Kit — one configurable extension bundle
+export { CodeKit, type CodeKitOptions, type CodeKitExtension } from './kit'
+
+// Individual extensions (each also a CodeKit member). No placeholder wrapper:
+// `@codemirror/view` already exports `placeholder()`, so one would add a name
+// frappe-ui owns until 2.0.0 and nothing else.
+//
+// The list is written out rather than re-exported with `export *`: a wildcard
+// from an implementation module publishes whatever that file exports next
+// (PHILOSOPHY.md, P15).
+export { codeChrome, codeHighlight, codeKeymap } from './extensions'
+
+// Languages
+export { loadLanguage, type LanguageKey } from './languages'
+
+// Types
+export type { CodeEditorExposed } from './types'