@jbpark/live-editor 4.6.0 → 5.0.0

package/README.ko.md

@@ -117,7 +117,7 @@ export default function Example() {
 
 ## 🔒 보안 참고사항
 
-- 프리뷰 `<iframe>`(`src/components/frame/iframe.tsx`)의 `sandbox` prop은 **실제 보안 경계가 아닙니다**. 컴파일된 프리뷰 코드는 host 페이지 자신의 JS realm에서 `new Function(...)`으로 실행되며(`src/utils/index.ts`의 `compileModule`), iframe에는 그 결과로 생성된 React 엘리먼트만 `contentDocument`에 포탈되어 DOM/CSS 렌더링 용도로만 쓰입니다. iframe 자체는 사용자 코드를 실행하지 않습니다.
+- 프리뷰 `<iframe>`(`src/components/frame/iframe/iframe.tsx`)의 `sandbox` prop은 **실제 보안 경계가 아닙니다**. 컴파일된 프리뷰 코드는 host 페이지 자신의 JS realm에서 `new Function(...)`으로 실행되며(`src/utils/compile.ts`의 `compileModule`), iframe에는 그 결과로 생성된 React 엘리먼트만 `contentDocument`에 포탈되어 DOM/CSS 렌더링 용도로만 쓰입니다. iframe 자체는 사용자 코드를 실행하지 않습니다.
 - 실질적 의미: 미리보기되는 코드는 호스트 애플리케이션과 동일한 수준의 JS 접근 권한(쿠키, DOM, 메모리상의 상태 등)을 가지며, iframe 경계가 이를 막아주지 않습니다.
 - 신뢰할 수 있는 프로젝트만 열어서 편집하세요. 직접 별도의 격리 조치(예: iframe 자체 `contentWindow` realm에서 컴파일을 실행하고 결과를 `postMessage`로 주고받는 방식)를 추가하지 않은 채로, 신뢰할 수 없는 제3자 프로젝트 파일을 미리보기하는 용도로 사용하지 마세요 — 그런 격리는 현재 구현되어 있지 않습니다.
 
@@ -132,7 +132,7 @@ export default function Example() {
 ## ⚙️ 요구 사항
 
 - Peer dependencies: `react >=19`, `react-dom >=19`
-- 패키지 메타데이터는 Node.js >=20을 선언합니다. 저장소 개발·빌드와 CI는 `.nvmrc`에 고정된 버전(현재 24.18.0)을 사용합니다.
+- 패키지 메타데이터는 Babel 8이 지원하는 범위인 Node.js `^22.18.0 || >=24.11.0`을 선언합니다. CI는 Node용 진입점(`utils`, `utils/ast`, `utils/tailwind`, `provider`, `error`)이 Node 22.18에서 로드되는지 확인합니다. 저장소 개발·빌드와 나머지 CI는 `.nvmrc`에 고정된 버전(현재 24.18.0)을 사용합니다.
 - **pnpm**: 10.x 이상 ([Corepack](https://nodejs.org/api/corepack.html)으로 관리)
 
 ## 🚀 개발 (이 저장소)

package/README.md

@@ -118,7 +118,7 @@ can avoid pulling in the rest (e.g. no CodeMirror in a preview-only build) — s
 
 ## 🔒 Security Notes
 
-- The `sandbox` prop on the preview `<iframe>` (`src/components/frame/iframe.tsx`) is **not a security boundary**. Compiled preview code is executed via `new Function(...)` in the host page's own JS realm (`compileModule` in `src/utils/index.ts`); only the resulting React elements are portaled into the iframe's `contentDocument` for DOM/CSS rendering. The iframe itself never evaluates user code.
+- The `sandbox` prop on the preview `<iframe>` (`src/components/frame/iframe/iframe.tsx`) is **not a security boundary**. Compiled preview code is executed via `new Function(...)` in the host page's own JS realm (`compileModule` in `src/utils/compile.ts`); only the resulting React elements are portaled into the iframe's `contentDocument` for DOM/CSS rendering. The iframe itself never evaluates user code.
 - Practical implication: previewed code runs with the same JS-level access as the host application (cookies, DOM, in-memory state) — the iframe boundary does not contain it.
 - Only open/edit projects you trust. Don't use this editor to preview arbitrary third-party project files without adding real isolation yourself (e.g. running compilation inside the iframe's own `contentWindow` realm and communicating results back via `postMessage`) — that isolation is not implemented here today.
 
@@ -133,7 +133,7 @@ can avoid pulling in the rest (e.g. no CodeMirror in a preview-only build) — s
 ## ⚙️ Requirements
 
 - Peer deps: `react >=19`, `react-dom >=19`
-- Package metadata declares Node.js >=20. CI checks that the entries meant for Node (`utils`, `utils/ast`, `utils/tailwind`, `provider`, `error`) load on Node 20. Repository development, builds and the rest of CI use the version pinned in `.nvmrc` (currently 24.18.0).
+- Package metadata declares Node.js `^22.18.0 || >=24.11.0`, the range Babel 8 supports. CI checks that the entries meant for Node (`utils`, `utils/ast`, `utils/tailwind`, `provider`, `error`) load on Node 22.18. Repository development, builds and the rest of CI use the version pinned in `.nvmrc` (currently 24.18.0).
 - **pnpm** (developing this repo only): the version in `packageManager` (currently 12.8.1), managed via [Corepack](https://nodejs.org/api/corepack.html). Installing the package works with any package manager.
 
 ## 🚀 Development (this repo)

package/dist/{boundary-BLB80tyw.js → boundary-6_nTsWxP.js}

@@ -1,4 +1,4 @@
-import { i as useLiveMessages, t as MessagesContext } from "./messages-CSrMI4Rm.js";
+import { i as useLiveMessages, t as MessagesContext } from "./messages-Bt5WXKTE.js";
 import { t as cn } from "./cn-CAnad2vL.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -96,4 +96,4 @@ var ErrorBoundary = class extends React.Component {
 //#endregion
 export { Error as n, ErrorBoundary as t };
 
-//# sourceMappingURL=boundary-BLB80tyw.js.map
+//# sourceMappingURL=boundary-6_nTsWxP.js.map

package/dist/{boundary-BLB80tyw.js.map → boundary-6_nTsWxP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"boundary-BLB80tyw.js","names":[],"sources":["../src/components/error/error.tsx","../src/components/error/boundary.tsx"],"sourcesContent":["import { useLiveMessages } from '~/components/context/messages';\nimport { cn } from '~/utils/cn';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  message?: string | null;\n  title?: string;\n  onReset?: () => void;\n}\n\nconst Error = ({ message, title, className, onReset }: Props) => {\n  const messages = useLiveMessages();\n\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(className)}\n      style={{\n        padding: '16px',\n        backgroundColor: '#fee2e2',\n        border: '1px solid #fca5a5',\n        borderRadius: '6px',\n        color: '#7f1d1d',\n      }}\n    >\n      <h3 style={{ fontSize: '14px', fontWeight: 'bold', margin: 0 }}>\n        {title ?? messages.errors.default}\n      </h3>\n      <pre\n        style={{\n          marginTop: '8px',\n          fontSize: '12px',\n          whiteSpace: 'pre-wrap',\n          margin: '8px 0 0 0',\n        }}\n      >\n        {message}\n      </pre>\n      {onReset && (\n        <button\n          style={{\n            marginTop: '8px',\n            padding: '4px 12px',\n            fontSize: '12px',\n            color: 'white',\n            backgroundColor: '#dc2626',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: 'pointer',\n          }}\n          onClick={onReset}\n        >\n          {messages.errors.tryAgain}\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Error;\n","import React from 'react';\n\nimport {\n  type LiveMessages,\n  MessagesContext,\n} from '~/components/context/messages';\n\nimport Error from './error';\n\ninterface Props {\n  children: React.ReactNode;\n  // `reset` clears the caught error and renders `children` again, the same\n  // thing the built-in error's reset button does.\n  fallback?: (message?: string, reset?: () => void) => React.ReactNode;\n  onError?: (e: Error, info: React.ErrorInfo) => void;\n  // When any of these values changes (compared one by one, by identity), a\n  // caught error resets and `children` render again, such as when the code\n  // that failed is edited.\n  resetKeys?: readonly unknown[];\n}\n\ninterface State {\n  hasError: boolean;\n  error?: Error;\n  // The resetKeys the last render saw, so getDerivedStateFromProps can tell\n  // when they change.\n  resetKeys?: readonly unknown[];\n}\n\nconst keysChanged = (\n  prev: readonly unknown[] = [],\n  next: readonly unknown[] = [],\n) => prev.length !== next.length || next.some((key, i) => key !== prev[i]);\n\nclass ErrorBoundary extends React.Component<Props, State> {\n  static contextType = MessagesContext;\n  declare context: LiveMessages;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false, resetKeys: props.resetKeys };\n  }\n\n  static getDerivedStateFromError(error: Error): Partial<State> {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('🚨 [Boundary] Rendering error:', error, errorInfo);\n    this.props.onError?.(error, errorInfo);\n  }\n\n  // Clears a caught error in the same render that sees new resetKeys, so\n  // `children` get their next chance right away and the fallback doesn't\n  // render (and run its effects) once more first (#442). If `children` throw\n  // again with the new keys, getDerivedStateFromError catches that in this\n  // same render pass.\n  static getDerivedStateFromProps(\n    props: Props,\n    state: State,\n  ): Partial<State> | null {\n    if (!keysChanged(state.resetKeys, props.resetKeys)) {\n      return null;\n    }\n\n    return state.hasError\n      ? { hasError: false, error: undefined, resetKeys: props.resetKeys }\n      : { resetKeys: props.resetKeys };\n  }\n\n  reset = () => this.setState({ hasError: false, error: undefined });\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback ? (\n        <>{this.props.fallback(this.state.error?.message, this.reset)}</>\n      ) : (\n        <Error\n          message={this.state.error?.message}\n          onReset={this.reset}\n          title={this.context.errors.rendering}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;;AASA,MAAM,SAAS,EAAE,SAAS,OAAO,WAAW,cAAqB;CAC/D,MAAM,WAAW,gBAAgB;CAEjC,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,SAAS;EACvB,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,OAAO;EACT;EARF,UAAA;GAUE,oBAAC,MAAD;IAAI,OAAO;KAAE,UAAU;KAAQ,YAAY;KAAQ,QAAQ;IAAE;IAC1D,UAAA,SAAS,SAAS,OAAO;GACxB,CAAA;GACJ,oBAAC,OAAD;IACE,OAAO;KACL,WAAW;KACX,UAAU;KACV,YAAY;KACZ,QAAQ;IACV;IAEC,UAAA;GACE,CAAA;GACJ,WACC,oBAAC,UAAD;IACE,OAAO;KACL,WAAW;KACX,SAAS;KACT,UAAU;KACV,OAAO;KACP,iBAAiB;KACjB,QAAQ;KACR,cAAc;KACd,QAAQ;IACV;IACA,SAAS;IAER,UAAA,SAAS,OAAO;GACX,CAAA;EAEP;;AAET;;;AC9BA,MAAM,eACJ,OAA2B,CAAC,GAC5B,OAA2B,CAAC,MACzB,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,KAAK,MAAM,QAAQ,KAAK,EAAE;AAEzE,IAAM,gBAAN,cAA4B,MAAM,UAAwB;CACxD,OAAO,cAAc;CAGrB,YAAY,OAAc;EACxB,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,UAAU;GAAO,WAAW,MAAM;EAAU;CAC7D;CAEA,OAAO,yBAAyB,OAA8B;EAC5D,OAAO;GAAE,UAAU;GAAM;EAAM;CACjC;CAEA,kBAAkB,OAAc,WAA4B;EAC1D,QAAQ,MAAM,kCAAkC,OAAO,SAAS;EAChE,KAAK,MAAM,UAAU,OAAO,SAAS;CACvC;CAOA,OAAO,yBACL,OACA,OACuB;EACvB,IAAI,CAAC,YAAY,MAAM,WAAW,MAAM,SAAS,GAC/C,OAAO;EAGT,OAAO,MAAM,WACT;GAAE,UAAU;GAAO,OAAO,KAAA;GAAW,WAAW,MAAM;EAAU,IAChE,EAAE,WAAW,MAAM,UAAU;CACnC;CAEA,cAAc,KAAK,SAAS;EAAE,UAAU;EAAO,OAAO,KAAA;CAAU,CAAC;CAEjE,SAAS;EACP,IAAI,KAAK,MAAM,UACb,OAAO,KAAK,MAAM,WAChB,oBAAA,UAAA,EAAA,UAAG,KAAK,MAAM,SAAS,KAAK,MAAM,OAAO,SAAS,KAAK,KAAK,EAAI,CAAA,IAEhE,oBAAC,OAAD;GACE,SAAS,KAAK,MAAM,OAAO;GAC3B,SAAS,KAAK;GACd,OAAO,KAAK,QAAQ,OAAO;EAC5B,CAAA;EAIL,OAAO,KAAK,MAAM;CACpB;AACF"}
+{"version":3,"file":"boundary-6_nTsWxP.js","names":[],"sources":["../src/components/error/error.tsx","../src/components/error/boundary.tsx"],"sourcesContent":["import { useLiveMessages } from '~/components/context/messages';\nimport { cn } from '~/utils/cn';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  message?: string | null;\n  title?: string;\n  onReset?: () => void;\n}\n\nconst Error = ({ message, title, className, onReset }: Props) => {\n  const messages = useLiveMessages();\n\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(className)}\n      style={{\n        padding: '16px',\n        backgroundColor: '#fee2e2',\n        border: '1px solid #fca5a5',\n        borderRadius: '6px',\n        color: '#7f1d1d',\n      }}\n    >\n      <h3 style={{ fontSize: '14px', fontWeight: 'bold', margin: 0 }}>\n        {title ?? messages.errors.default}\n      </h3>\n      <pre\n        style={{\n          marginTop: '8px',\n          fontSize: '12px',\n          whiteSpace: 'pre-wrap',\n          margin: '8px 0 0 0',\n        }}\n      >\n        {message}\n      </pre>\n      {onReset && (\n        <button\n          style={{\n            marginTop: '8px',\n            padding: '4px 12px',\n            fontSize: '12px',\n            color: 'white',\n            backgroundColor: '#dc2626',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: 'pointer',\n          }}\n          onClick={onReset}\n        >\n          {messages.errors.tryAgain}\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Error;\n","import React from 'react';\n\nimport {\n  type LiveMessages,\n  MessagesContext,\n} from '~/components/context/messages';\n\nimport Error from './error';\n\ninterface Props {\n  children: React.ReactNode;\n  // `reset` clears the caught error and renders `children` again, the same\n  // thing the built-in error's reset button does.\n  fallback?: (message?: string, reset?: () => void) => React.ReactNode;\n  onError?: (e: Error, info: React.ErrorInfo) => void;\n  // When any of these values changes (compared one by one, by identity), a\n  // caught error resets and `children` render again, such as when the code\n  // that failed is edited.\n  resetKeys?: readonly unknown[];\n}\n\ninterface State {\n  hasError: boolean;\n  error?: Error;\n  // The resetKeys the last render saw, so getDerivedStateFromProps can tell\n  // when they change.\n  resetKeys?: readonly unknown[];\n}\n\nconst keysChanged = (\n  prev: readonly unknown[] = [],\n  next: readonly unknown[] = [],\n) => prev.length !== next.length || next.some((key, i) => key !== prev[i]);\n\nclass ErrorBoundary extends React.Component<Props, State> {\n  static contextType = MessagesContext;\n  declare context: LiveMessages;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false, resetKeys: props.resetKeys };\n  }\n\n  static getDerivedStateFromError(error: Error): Partial<State> {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('🚨 [Boundary] Rendering error:', error, errorInfo);\n    this.props.onError?.(error, errorInfo);\n  }\n\n  // Clears a caught error in the same render that sees new resetKeys, so\n  // `children` get their next chance right away and the fallback doesn't\n  // render (and run its effects) once more first (#442). If `children` throw\n  // again with the new keys, getDerivedStateFromError catches that in this\n  // same render pass.\n  static getDerivedStateFromProps(\n    props: Props,\n    state: State,\n  ): Partial<State> | null {\n    if (!keysChanged(state.resetKeys, props.resetKeys)) {\n      return null;\n    }\n\n    return state.hasError\n      ? { hasError: false, error: undefined, resetKeys: props.resetKeys }\n      : { resetKeys: props.resetKeys };\n  }\n\n  reset = () => this.setState({ hasError: false, error: undefined });\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback ? (\n        <>{this.props.fallback(this.state.error?.message, this.reset)}</>\n      ) : (\n        <Error\n          message={this.state.error?.message}\n          onReset={this.reset}\n          title={this.context.errors.rendering}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;;AASA,MAAM,SAAS,EAAE,SAAS,OAAO,WAAW,cAAqB;CAC/D,MAAM,WAAW,gBAAgB;CAEjC,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,SAAS;EACvB,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,OAAO;EACT;EARF,UAAA;GAUE,oBAAC,MAAD;IAAI,OAAO;KAAE,UAAU;KAAQ,YAAY;KAAQ,QAAQ;IAAE;IAC1D,UAAA,SAAS,SAAS,OAAO;GACxB,CAAA;GACJ,oBAAC,OAAD;IACE,OAAO;KACL,WAAW;KACX,UAAU;KACV,YAAY;KACZ,QAAQ;IACV;IAEC,UAAA;GACE,CAAA;GACJ,WACC,oBAAC,UAAD;IACE,OAAO;KACL,WAAW;KACX,SAAS;KACT,UAAU;KACV,OAAO;KACP,iBAAiB;KACjB,QAAQ;KACR,cAAc;KACd,QAAQ;IACV;IACA,SAAS;IAER,UAAA,SAAS,OAAO;GACX,CAAA;EAEP;;AAET;;;AC9BA,MAAM,eACJ,OAA2B,CAAC,GAC5B,OAA2B,CAAC,MACzB,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,KAAK,MAAM,QAAQ,KAAK,EAAE;AAEzE,IAAM,gBAAN,cAA4B,MAAM,UAAwB;CACxD,OAAO,cAAc;CAGrB,YAAY,OAAc;EACxB,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,UAAU;GAAO,WAAW,MAAM;EAAU;CAC7D;CAEA,OAAO,yBAAyB,OAA8B;EAC5D,OAAO;GAAE,UAAU;GAAM;EAAM;CACjC;CAEA,kBAAkB,OAAc,WAA4B;EAC1D,QAAQ,MAAM,kCAAkC,OAAO,SAAS;EAChE,KAAK,MAAM,UAAU,OAAO,SAAS;CACvC;CAOA,OAAO,yBACL,OACA,OACuB;EACvB,IAAI,CAAC,YAAY,MAAM,WAAW,MAAM,SAAS,GAC/C,OAAO;EAGT,OAAO,MAAM,WACT;GAAE,UAAU;GAAO,OAAO,KAAA;GAAW,WAAW,MAAM;EAAU,IAChE,EAAE,WAAW,MAAM,UAAU;CACnC;CAEA,cAAc,KAAK,SAAS;EAAE,UAAU;EAAO,OAAO,KAAA;CAAU,CAAC;CAEjE,SAAS;EACP,IAAI,KAAK,MAAM,UACb,OAAO,KAAK,MAAM,WAChB,oBAAA,UAAA,EAAA,UAAG,KAAK,MAAM,SAAS,KAAK,MAAM,OAAO,SAAS,KAAK,KAAK,EAAI,CAAA,IAEhE,oBAAC,OAAD;GACE,SAAS,KAAK,MAAM,OAAO;GAC3B,SAAS,KAAK;GACd,OAAO,KAAK,QAAQ,OAAO;EAC5B,CAAA;EAIL,OAAO,KAAK,MAAM;CACpB;AACF"}

package/dist/{compile-Dxas-D05.js → compile-DwOyWrmI.js}

@@ -1,7 +1,7 @@
-import { n as CONFIG } from "./constants-DU17Tdwo.js";
+import { n as CONFIG } from "./constants-D-XKuEY2.js";
 import { n as registerEditorCache } from "./editor-caches-ClMvdcQF.js";
 import { t as createBoundedCache } from "./cache-B0-XcIxJ.js";
-import { t as detectTypeScript } from "./detect-typescript-Dr_oLniM.js";
+import { t as detectTypeScript } from "./detect-typescript-CoAO-QUJ.js";
 import React from "react";
 import * as Babel from "@babel/standalone";
 //#region src/utils/scripts.ts
@@ -84,6 +84,7 @@ const compile = (code, modules) => {
 const clearCompilationCache = () => {
 	compilationCache.clear();
 };
+const REACT_PRESET = ["react", { runtime: "classic" }];
 const transformCode = (code, isTypeScript = false) => {
 	try {
 		return Babel.transform(code, {
@@ -91,11 +92,11 @@ const transformCode = (code, isTypeScript = false) => {
 			presets: isTypeScript ? [
 				"typescript",
 				"env",
-				"react"
-			] : ["env", "react"],
+				REACT_PRESET
+			] : ["env", REACT_PRESET],
 			sourceType: "module",
 			plugins: [Babel.availablePlugins["transform-modules-commonjs"]]
-		}).code || "";
+		})?.code || "";
 	} catch (e) {
 		console.error("❌ Babel transformation error:", e);
 		return code;
@@ -130,6 +131,6 @@ const compileModule = (code, modules) => {
 };
 registerEditorCache(clearCompilationCache);
 //#endregion
-export { getCachedScriptBlob as a, clearScriptCache as i, compile as n, preloadScripts as o, transformCode as r, withScriptBlobs as s, clearCompilationCache as t };
+export { withScriptBlobs as i, compile as n, preloadScripts as r, clearCompilationCache as t };
 
-//# sourceMappingURL=compile-Dxas-D05.js.map
+//# sourceMappingURL=compile-DwOyWrmI.js.map

package/dist/compile-DwOyWrmI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile-DwOyWrmI.js","names":[],"sources":["../src/utils/scripts.ts","../src/utils/compile.ts"],"sourcesContent":["import { CONFIG } from '../constants';\nimport { createBoundedCache } from './cache';\nimport { registerEditorCache } from './editor-caches';\n\n// How many callers have requested each script and not yet injected it. A\n// blob URL evicted in that time isn't revoked until the last of them is done\n// (`deferredRevocations`), or its `<script>` would fail to load without an\n// error (#443).\nconst pins = new Map<string, number>();\nconst deferredRevocations = new Map<string, string[]>();\n\nconst revoke = (src: string, blobUrl: string) => {\n  if (!pins.has(src)) {\n    URL.revokeObjectURL(blobUrl);\n    return;\n  }\n\n  deferredRevocations.set(src, [\n    ...(deferredRevocations.get(src) ?? []),\n    blobUrl,\n  ]);\n};\n\nconst pin = (src: string) => {\n  pins.set(src, (pins.get(src) ?? 0) + 1);\n};\n\nconst unpin = (src: string) => {\n  const count = (pins.get(src) ?? 0) - 1;\n\n  if (count > 0) {\n    pins.set(src, count);\n    return;\n  }\n\n  pins.delete(src);\n  deferredRevocations.get(src)?.forEach(blobUrl => {\n    URL.revokeObjectURL(blobUrl);\n  });\n  deferredRevocations.delete(src);\n};\n\nconst scriptCache = createBoundedCache<string, string>(\n  CONFIG.SCRIPT_CACHE_LIMIT,\n  revoke,\n);\nconst loadingScriptCache = new Map<string, Promise<string>>();\n\nexport const getCachedScriptBlob = async (src: string): Promise<string> => {\n  const cached = scriptCache.get(src);\n\n  if (cached) {\n    return cached;\n  }\n\n  const existing = loadingScriptCache.get(src);\n\n  if (existing) {\n    return existing;\n  }\n\n  const promise = fetch(src)\n    .then(res => res.text())\n    .then(text => {\n      const blob = new Blob([text], { type: 'application/javascript' });\n      const blobUrl = URL.createObjectURL(blob);\n\n      scriptCache.set(src, blobUrl);\n\n      return blobUrl;\n    })\n    // Clean up after a failure too: a rejected promise left here would be\n    // reused by every later caller, so the script could never load again.\n    .finally(() => {\n      loadingScriptCache.delete(src);\n    });\n\n  loadingScriptCache.set(src, promise);\n\n  return promise;\n};\n\n// Resolves every script to a blob URL and hands them to `inject` while none\n// of them can be revoked. `inject` must use them at once, as appending\n// `<script>` elements does: the browser resolves a blob URL on insertion.\n// Several scripts, or several frames, can push more scripts through the cache\n// than it holds before the last one arrives (#443).\nexport const withScriptBlobs = async (\n  scripts: string[],\n  inject: (blobUrls: string[]) => void,\n): Promise<void> => {\n  scripts.forEach(pin);\n\n  try {\n    inject(await Promise.all(scripts.map(getCachedScriptBlob)));\n  } finally {\n    scripts.forEach(unpin);\n  }\n};\n\nexport const preloadScripts = (scripts: string[]): void => {\n  scripts.forEach(src => {\n    // Not awaited, so the rejection is handled here. The real load reports a\n    // failure to whoever awaits it.\n    getCachedScriptBlob(src).catch(() => {});\n  });\n};\n\n// Revokes every blob URL, through the same `onEvict` the LRU uses, and drops\n// the pending loads, so the next session doesn't get a URL created before\n// the revocation.\nexport const clearScriptCache = () => {\n  scriptCache.clear();\n  loadingScriptCache.clear();\n};\n\nregisterEditorCache(clearScriptCache);\n","import React from 'react';\n\nimport * as Babel from '@babel/standalone';\n\nimport type { Module } from '~/types';\n\nimport { CONFIG } from '../constants';\nimport { createBoundedCache } from './cache';\nimport { detectTypeScript } from './detect-typescript';\nimport { registerEditorCache } from './editor-caches';\n\ninterface CompilationKey {\n  code: string;\n  modules: [string, unknown][];\n}\n\n// The keys still in the LRU. Comparing at most `CACHE_LIMIT` of them avoids\n// keeping every module object ever seen, or serializing modules, which can be\n// cyclic or closures.\nconst compilationKeys = new Set<CompilationKey>();\nconst compilationCache = createBoundedCache<CompilationKey, Module>(\n  CONFIG.CACHE_LIMIT,\n  key => compilationKeys.delete(key),\n);\n\nconst createCacheKey = (\n  code: string,\n  modules: Record<string, unknown>,\n): CompilationKey => ({\n  code,\n  modules: Object.keys(modules)\n    .sort()\n    .map(name => [name, modules[name]]),\n});\n\n// Objects/functions compare by reference; primitives compare by value.\n// Replace a module object when its implementation changes. In-place edits\n// inside an existing module are intentionally not observed by this cache.\nexport const compile = (\n  code: string,\n  modules: Record<string, unknown>,\n): Module => {\n  const candidate = createCacheKey(code, modules);\n\n  for (const key of compilationKeys) {\n    if (\n      key.code === candidate.code &&\n      key.modules.length === candidate.modules.length &&\n      key.modules.every(\n        ([name, value], index) =>\n          name === candidate.modules[index]![0] &&\n          Object.is(value, candidate.modules[index]![1]),\n      )\n    ) {\n      return compilationCache.get(key)!;\n    }\n  }\n\n  const result = compileModule(code, Object.fromEntries(candidate.modules));\n\n  compilationCache.set(candidate, result);\n  compilationKeys.add(candidate);\n\n  return result;\n};\n\n// `compilationKeys` needs no separate pass: it is drained by the `onEvict`\n// the cache was built with, which `clear()` runs for every entry.\nexport const clearCompilationCache = () => {\n  compilationCache.clear();\n};\n\n// JSX compiles to `React.createElement` (the classic runtime). The module runs\n// with `React` in scope and has no `react/jsx-runtime` to import.\nconst REACT_PRESET: [string, object] = ['react', { runtime: 'classic' }];\n\n// Transforms JSX and TypeScript with `@babel/standalone`'s presets, without\n// the `typescript` package (#192). Babel works per file without types, so a\n// `const enum` becomes a real enum and legacy decorators aren't supported.\n// On an error, the input comes back unchanged.\nconst transformCode = (code: string, isTypeScript = false): string => {\n  try {\n    const result = Babel.transform(code, {\n      filename: isTypeScript ? 'preview.tsx' : 'preview.jsx',\n      presets: isTypeScript\n        ? ['typescript', 'env', REACT_PRESET]\n        : ['env', REACT_PRESET],\n      sourceType: 'module',\n      plugins: [Babel.availablePlugins['transform-modules-commonjs']],\n    })?.code;\n\n    return result || '';\n  } catch (e) {\n    console.error('❌ Babel transformation error:', e);\n    return code;\n  }\n};\n\nconst compileModule = (\n  code: string,\n  modules: Record<string, unknown>,\n): Module => {\n  const isTypeScript = detectTypeScript(code);\n\n  type RenderFunction = (\n    exports: Module['exports'],\n    require: (name: string) => unknown,\n    module: Module,\n    React: typeof import('react'),\n  ) => void;\n\n  let render: RenderFunction;\n\n  // Runs in this window's own JS realm, not inside the preview iframe — the iframe only\n  // renders the resulting React elements via portal. See README \"Security Notes\".\n  try {\n    render = new Function(\n      'exports',\n      'require',\n      'module',\n      'React',\n      transformCode(code, isTypeScript),\n    ) as RenderFunction;\n  } catch (e) {\n    const errorMessage = e instanceof Error ? e.message : 'Syntax error';\n    return { exports: {}, error: errorMessage };\n  }\n\n  const module: Module = { exports: {} };\n\n  const customRequire = (name: string) => {\n    if (name === 'react') {\n      return React;\n    }\n\n    // Check presence, not truthiness: a module can be a falsy value (`0`, `''`,\n    // `false`, `null`).\n    if (name in modules) {\n      return modules[name];\n    }\n\n    throw new Error(`Module not found: ${name}`);\n  };\n\n  try {\n    render(module.exports, customRequire, module, React);\n  } catch (e) {\n    const errorMessage = e instanceof Error ? e.message : 'Runtime error';\n    return { exports: {}, error: errorMessage };\n  }\n\n  return module;\n};\n\nregisterEditorCache(clearCompilationCache);\n"],"mappings":"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"}

package/dist/constants-D-XKuEY2.js

@@ -0,0 +1,58 @@
+//#region src/constants/index.ts
+const CONFIG = {
+	CACHE_LIMIT: 50,
+	DOCUMENT_CACHE_LIMIT: 4,
+	SCRIPT_CACHE_LIMIT: 10
+};
+const DATA_ATTR = {
+	ID: "data-id",
+	BINDING: "data-binding",
+	BINDING_KEY: "data-binding-key",
+	ITEM: "data-item"
+};
+const RESERVED_BINDING_PROPERTIES = [
+	DATA_ATTR.ID,
+	"data-name",
+	DATA_ATTR.BINDING,
+	DATA_ATTR.BINDING_KEY
+];
+const REGEX = {
+	NUMBER: /^\d+(\.\d+)?$/,
+	BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,
+	MODULE_IMPORT_EXPORT_LINE: /^\s*(?:import|export)\b[^\n]*\bfrom\s+['"][^'"]*['"];?\s*$/gm
+};
+const TS_PATTERNS = [
+	/interface\s+\w+/,
+	/type\s+\w+\s*=/,
+	/:\s*\w+(\[\])?(\s*\||\s*&|\s*=|\s*;|\s*,|\s*\))/,
+	/as\s+\w+/,
+	/<[A-Z]\w*>/,
+	/enum\s+\w+/,
+	/public\s+|private\s+|protected\s+/,
+	/readonly\s+/,
+	/\?\s*:/
+];
+const BINDING_PROP = {
+	CHILDREN: "children",
+	INNER_TEXT: "innerText",
+	INNER_HTML: "innerHTML",
+	ITEMS: "items"
+};
+const DEFAULT_CONTAINER_ID = "app-container";
+const documentTemplate = (containerId) => `
+import * as ui from 'ui-kit';
+import { cn } from 'ui-kit/utils';
+
+const App = () => {
+  return (
+    <main id="${containerId}"></main>
+  )
+}
+
+export default App;
+`;
+const DEFAULT_TEMPLATE = documentTemplate(DEFAULT_CONTAINER_ID);
+//#endregion
+export { DEFAULT_TEMPLATE as a, TS_PATTERNS as c, DEFAULT_CONTAINER_ID as i, documentTemplate as l, CONFIG as n, REGEX as o, DATA_ATTR as r, RESERVED_BINDING_PROPERTIES as s, BINDING_PROP as t };
+
+//# sourceMappingURL=constants-D-XKuEY2.js.map

package/dist/constants-D-XKuEY2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-D-XKuEY2.js","names":[],"sources":["../src/constants/index.ts"],"sourcesContent":["export const STORAGE_KEY = 'live-editor-code';\n\nexport const CONFIG = {\n  CACHE_LIMIT: 50,\n  // The document parse cache. Its entries are whole Babel ASTs (about\n  // 0.66 MB per document), and only the current and previous version get hits,\n  // so it keeps few (#106).\n  DOCUMENT_CACHE_LIMIT: 4,\n  // The script cache (`utils/scripts.ts`). Its entries are live blob URLs,\n  // revoked on eviction, and a preview loads only a few scripts (#104).\n  SCRIPT_CACHE_LIMIT: 10,\n} as const;\n\nexport const DATA_ATTR = {\n  ID: 'data-id',\n  BINDING: 'data-binding',\n  // Names an entry of `Live.Dnd`'s `bindingKeys` instead of declaring the\n  // bindings inline (#513).\n  BINDING_KEY: 'data-binding-key',\n  ITEM: 'data-item',\n} as const;\n\n// Attributes the editor owns. `data-id` links the canvas to the source,\n// `data-name` is a section's name, and `data-binding` and `data-binding-key`\n// declare what each edit is checked against. A binding can't target them,\n// since rewriting one would break that link (#429).\nexport const RESERVED_BINDING_PROPERTIES: readonly string[] = [\n  DATA_ATTR.ID,\n  'data-name',\n  DATA_ATTR.BINDING,\n  DATA_ATTR.BINDING_KEY,\n];\n\nexport const REGEX = {\n  NUMBER: /^\\d+(\\.\\d+)?$/,\n  BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,\n  MODULE_IMPORT_EXPORT_LINE:\n    /^\\s*(?:import|export)\\b[^\\n]*\\bfrom\\s+['\"][^'\"]*['\"];?\\s*$/gm,\n} as const;\n\nexport const TS_PATTERNS = [\n  /interface\\s+\\w+/,\n  /type\\s+\\w+\\s*=/,\n  /:\\s*\\w+(\\[\\])?(\\s*\\||\\s*&|\\s*=|\\s*;|\\s*,|\\s*\\))/,\n  /as\\s+\\w+/,\n  /<[A-Z]\\w*>/,\n  /enum\\s+\\w+/,\n  /public\\s+|private\\s+|protected\\s+/,\n  /readonly\\s+/,\n  /\\?\\s*:/,\n] as const;\n\nexport const BINDING_PROP = {\n  CHILDREN: 'children',\n  INNER_TEXT: 'innerText',\n  INNER_HTML: 'innerHTML',\n  ITEMS: 'items',\n} as const;\n\n// The element whose `<section>` children are a document's sections, unless\n// `Live.Dnd`'s `containerId` says otherwise (#449).\nexport const DEFAULT_CONTAINER_ID = 'app-container';\n\n// A new, empty document built around `containerId`. `createDocument()` in\n// `@jbpark/live-editor/utils` is the public way in; this is the template\n// behind it and behind `DEFAULT_TEMPLATE`.\nexport const documentTemplate = (containerId: string) => `\nimport * as ui from 'ui-kit';\nimport { cn } from 'ui-kit/utils';\n\nconst App = () => {\n  return (\n    <main id=\"${containerId}\"></main>\n  )\n}\n\nexport default App;\n`;\n\nexport const DEFAULT_TEMPLATE = documentTemplate(DEFAULT_CONTAINER_ID);\n\nexport { PALETTE_SECTIONS } from './palette-sections';\n"],"mappings":";AAEA,MAAa,SAAS;CACpB,aAAa;CAIb,sBAAsB;CAGtB,oBAAoB;AACtB;AAEA,MAAa,YAAY;CACvB,IAAI;CACJ,SAAS;CAGT,aAAa;CACb,MAAM;AACR;AAMA,MAAa,8BAAiD;CAC5D,UAAU;CACV;CACA,UAAU;CACV,UAAU;AACZ;AAEA,MAAa,QAAQ;CACnB,QAAQ;CACR,iBAAiB;CACjB,2BACE;AACJ;AAEA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,eAAe;CAC1B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO;AACT;AAIA,MAAa,uBAAuB;AAKpC,MAAa,oBAAoB,gBAAwB;;;;;;gBAMzC,YAAY;;;;;;AAO5B,MAAa,mBAAmB,iBAAiB,oBAAoB"}

package/dist/{context-B8MzP7_p.js → context-DDR1xVKo.js}

@@ -1,6 +1,6 @@
-import { a as DEFAULT_TEMPLATE } from "./constants-DU17Tdwo.js";
+import { a as DEFAULT_TEMPLATE } from "./constants-D-XKuEY2.js";
 import { r as registerEditorSession } from "./editor-caches-ClMvdcQF.js";
-import { r as mergeMessages, t as MessagesContext } from "./messages-CSrMI4Rm.js";
+import { r as mergeMessages, t as MessagesContext } from "./messages-Bt5WXKTE.js";
 import { n as PreviewContext, t as ErrorContext } from "./states-Ci1AvoQ9.js";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -37,4 +37,4 @@ const ContextProvider = ({ children, messages }) => {
 //#endregion
 export { ContextProvider as t };
 
-//# sourceMappingURL=context-B8MzP7_p.js.map
+//# sourceMappingURL=context-DDR1xVKo.js.map

package/dist/{context-B8MzP7_p.js.map → context-DDR1xVKo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-B8MzP7_p.js","names":[],"sources":["../src/components/context/context.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { DEFAULT_TEMPLATE } from '~/constants';\nimport { registerEditorSession } from '~/utils/editor-caches';\n\nimport {\n  type LiveMessagesInput,\n  MessagesContext,\n  mergeMessages,\n} from './messages';\nimport type { ErrorContextType, PreviewContextType } from './states';\nimport { ErrorContext, PreviewContext } from './states';\n\nexport interface Props {\n  children?: React.ReactNode;\n  // Replaces any of the editor's text, group by group; the rest stays\n  // English, or the enclosing `Live`'s. Define it outside render or memoize\n  // it: a new object re-renders everything that shows text (#524).\n  messages?: LiveMessagesInput;\n}\n\nconst ContextProvider = ({ children, messages }: Props) => {\n  const [code, setCodeState] = useState(DEFAULT_TEMPLATE);\n  const [error, setError] = useState<ErrorContextType['error']>(null);\n\n  // Clears the last error in the same update that sets the code. An effect\n  // would run after the new code's own error was reported, and wipe it.\n  const setCode = useCallback<PreviewContextType['setCode']>(next => {\n    setError(null);\n    setCodeState(next);\n  }, []);\n\n  // Counts this editor, so the page-wide caches are released when the last\n  // one unmounts (`utils/editor-caches.ts`).\n  useEffect(() => registerEditorSession(), []);\n\n  // Memoized, so a parent re-render doesn't re-render every `usePreview()`\n  // and `useError()` consumer.\n  const previewValue = useMemo<PreviewContextType>(\n    () => ({ code, setCode }),\n    [code, setCode],\n  );\n\n  const errorValue = useMemo<ErrorContextType>(\n    () => ({ error, setError }),\n    [error, setError],\n  );\n\n  // A provider inside another one starts from the outer one's messages, so\n  // a page can set them once around several editors.\n  const inherited = useContext(MessagesContext);\n  const messagesValue = useMemo(\n    () => mergeMessages(messages, inherited),\n    [messages, inherited],\n  );\n\n  return (\n    <PreviewContext.Provider value={previewValue}>\n      <ErrorContext.Provider value={errorValue}>\n        <MessagesContext.Provider value={messagesValue}>\n          {children}\n        </MessagesContext.Provider>\n      </ErrorContext.Provider>\n    </PreviewContext.Provider>\n  );\n};\n\nexport default ContextProvider;\n"],"mappings":";;;;;;;AA6BA,MAAM,mBAAmB,EAAE,UAAU,eAAsB;CACzD,MAAM,CAAC,MAAM,gBAAgB,SAAS,gBAAgB;CACtD,MAAM,CAAC,OAAO,YAAY,SAAoC,IAAI;CAIlE,MAAM,UAAU,aAA2C,SAAQ;EACjE,SAAS,IAAI;EACb,aAAa,IAAI;CACnB,GAAG,CAAC,CAAC;CAIL,gBAAgB,sBAAsB,GAAG,CAAC,CAAC;CAI3C,MAAM,eAAe,eACZ;EAAE;EAAM;CAAQ,IACvB,CAAC,MAAM,OAAO,CAChB;CAEA,MAAM,aAAa,eACV;EAAE;EAAO;CAAS,IACzB,CAAC,OAAO,QAAQ,CAClB;CAIA,MAAM,YAAY,WAAW,eAAe;CAC5C,MAAM,gBAAgB,cACd,cAAc,UAAU,SAAS,GACvC,CAAC,UAAU,SAAS,CACtB;CAEA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC9B,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,oBAAC,gBAAgB,UAAjB;IAA0B,OAAO;IAC9B;GACuB,CAAA;EACL,CAAA;CACA,CAAA;AAE7B"}
+{"version":3,"file":"context-DDR1xVKo.js","names":[],"sources":["../src/components/context/context.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { DEFAULT_TEMPLATE } from '~/constants';\nimport { registerEditorSession } from '~/utils/editor-caches';\n\nimport {\n  type LiveMessagesInput,\n  MessagesContext,\n  mergeMessages,\n} from './messages';\nimport type { ErrorContextType, PreviewContextType } from './states';\nimport { ErrorContext, PreviewContext } from './states';\n\nexport interface Props {\n  children?: React.ReactNode;\n  // Replaces any of the editor's text, group by group; the rest stays\n  // English, or the enclosing `Live`'s. Define it outside render or memoize\n  // it: a new object re-renders everything that shows text (#524).\n  messages?: LiveMessagesInput;\n}\n\nconst ContextProvider = ({ children, messages }: Props) => {\n  const [code, setCodeState] = useState(DEFAULT_TEMPLATE);\n  const [error, setError] = useState<ErrorContextType['error']>(null);\n\n  // Clears the last error in the same update that sets the code. An effect\n  // would run after the new code's own error was reported, and wipe it.\n  const setCode = useCallback<PreviewContextType['setCode']>(next => {\n    setError(null);\n    setCodeState(next);\n  }, []);\n\n  // Counts this editor, so the page-wide caches are released when the last\n  // one unmounts (`utils/editor-caches.ts`).\n  useEffect(() => registerEditorSession(), []);\n\n  // Memoized, so a parent re-render doesn't re-render every `usePreview()`\n  // and `useError()` consumer.\n  const previewValue = useMemo<PreviewContextType>(\n    () => ({ code, setCode }),\n    [code, setCode],\n  );\n\n  const errorValue = useMemo<ErrorContextType>(\n    () => ({ error, setError }),\n    [error, setError],\n  );\n\n  // A provider inside another one starts from the outer one's messages, so\n  // a page can set them once around several editors.\n  const inherited = useContext(MessagesContext);\n  const messagesValue = useMemo(\n    () => mergeMessages(messages, inherited),\n    [messages, inherited],\n  );\n\n  return (\n    <PreviewContext.Provider value={previewValue}>\n      <ErrorContext.Provider value={errorValue}>\n        <MessagesContext.Provider value={messagesValue}>\n          {children}\n        </MessagesContext.Provider>\n      </ErrorContext.Provider>\n    </PreviewContext.Provider>\n  );\n};\n\nexport default ContextProvider;\n"],"mappings":";;;;;;;AA6BA,MAAM,mBAAmB,EAAE,UAAU,eAAsB;CACzD,MAAM,CAAC,MAAM,gBAAgB,SAAS,gBAAgB;CACtD,MAAM,CAAC,OAAO,YAAY,SAAoC,IAAI;CAIlE,MAAM,UAAU,aAA2C,SAAQ;EACjE,SAAS,IAAI;EACb,aAAa,IAAI;CACnB,GAAG,CAAC,CAAC;CAIL,gBAAgB,sBAAsB,GAAG,CAAC,CAAC;CAI3C,MAAM,eAAe,eACZ;EAAE;EAAM;CAAQ,IACvB,CAAC,MAAM,OAAO,CAChB;CAEA,MAAM,aAAa,eACV;EAAE;EAAO;CAAS,IACzB,CAAC,OAAO,QAAQ,CAClB;CAIA,MAAM,YAAY,WAAW,eAAe;CAC5C,MAAM,gBAAgB,cACd,cAAc,UAAU,SAAS,GACvC,CAAC,UAAU,SAAS,CACtB;CAEA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC9B,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,oBAAC,gBAAgB,UAAjB;IAA0B,OAAO;IAC9B;GACuB,CAAA;EACL,CAAA;CACA,CAAA;AAE7B"}

package/dist/{core-Bgfek364.js → core-CKazr4tT.js}

@@ -1,5 +1,5 @@
 import { t as cn } from "./cn-CAnad2vL.js";
-import { t as detectTypeScript } from "./detect-typescript-Dr_oLniM.js";
+import { t as detectTypeScript } from "./detect-typescript-CoAO-QUJ.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import CodeEditor from "@jbpark/ui-kit/CodeEditor";
@@ -75,4 +75,4 @@ const Core = ({ value, theme, height, className, prettierOptions, fragment, raw,
 //#endregion
 export { useFormatCode as n, Core as t };
 
-//# sourceMappingURL=core-Bgfek364.js.map
+//# sourceMappingURL=core-CKazr4tT.js.map

package/dist/core-CKazr4tT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-CKazr4tT.js","names":[],"sources":["../src/components/editor/use-format-code.ts","../src/components/editor/core.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { detectTypeScript } from '~/utils/detect-typescript';\n\n// Prettier is an optional peer dependency (#282), loaded on first use.\n// Without it, code comes back unformatted.\nconst loadPrettier = async () => {\n  const [prettier, babel, estree, typescript] = await Promise.all([\n    import('prettier'),\n    import('prettier/plugins/babel'),\n    import('prettier/plugins/estree'),\n    import('prettier/plugins/typescript'),\n  ]);\n\n  return {\n    format: prettier.format,\n    plugins: [babel.default, estree.default, typescript.default],\n  };\n};\n\nconst DEFAULT_PRETTIER_OPTIONS: Record<string, unknown> = {\n  tabWidth: 2,\n  singleQuote: true,\n  trailingComma: 'all',\n  htmlWhitespaceSensitivity: 'ignore',\n  arrowParens: 'avoid',\n  printWidth: 60,\n};\n\ninterface UseFormatCodeOptions {\n  fragment?: boolean;\n  prettierOptions?: Record<string, unknown>;\n}\n\n// The formatter the built-in editor uses, shared with a custom\n// `renderEditor`.\nexport const useFormatCode = ({\n  fragment,\n  prettierOptions,\n}: UseFormatCodeOptions = {}) => {\n  const prettierConfig = useMemo(\n    () => ({\n      ...DEFAULT_PRETTIER_OPTIONS,\n      ...prettierOptions,\n    }),\n    [prettierOptions],\n  );\n\n  return useCallback(\n    async (code: string) => {\n      const isTypeScript = detectTypeScript(code);\n      const source = fragment ? `<>${code}</>` : code;\n\n      // Only a missing prettier is swallowed here; a genuine format error\n      // (prettier present, but the code is unparseable) still propagates so\n      // the editor's Cmd+S path can surface it via onError.\n      let prettier: Awaited<ReturnType<typeof loadPrettier>>;\n      try {\n        prettier = await loadPrettier();\n      } catch {\n        return code;\n      }\n\n      const formatted = await prettier.format(source, {\n        parser: isTypeScript ? 'typescript' : 'babel',\n        plugins: prettier.plugins,\n        ...prettierConfig,\n      });\n\n      if (fragment) {\n        return formatted\n          .replace(/^<>\\n?/, '')\n          .replace(/\\n?<\\/>;?\\s*$/, '')\n          .replace(/^ {2}/gm, '')\n          .trim();\n      }\n\n      return formatted;\n    },\n    [prettierConfig, fragment],\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport CodeEditor from '@jbpark/ui-kit/CodeEditor';\nimport { vscodeLight } from '@uiw/codemirror-theme-vscode';\nimport { type Extension } from '@uiw/react-codemirror';\n\nimport { cn } from '~/utils/cn';\n\nimport { useFormatCode } from './use-format-code';\n\nexport interface Props {\n  value: string;\n  height?: string;\n  theme?: Extension | 'light' | 'dark' | 'none';\n  prettierOptions?: Record<string, unknown>;\n  fragment?: boolean;\n  raw?: boolean;\n  className?: string;\n  onChange?: (value: string) => void;\n  onSave?: (value: string) => void;\n  onError?: (error: string | null) => void;\n  onCreateEditor?: ComponentProps<typeof CodeEditor>['onCreateEditor'];\n  onUpdate?: ComponentProps<typeof CodeEditor>['onUpdate'];\n}\n\n// `@jbpark/ui-kit`'s CodeEditor with this library's options (#346, #309):\n// `raw`, `fragment` and `prettierOptions` shape the Prettier formatter, and\n// `onError` is its `onFormatError`.\nconst Core = ({\n  value,\n  theme,\n  height,\n  className,\n  prettierOptions,\n  fragment,\n  raw,\n  onChange,\n  onSave,\n  onError,\n  ...props\n}: Props) => {\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  return (\n    <CodeEditor\n      value={value}\n      theme={theme ?? vscodeLight}\n      height={height || '100%'}\n      className={cn(className)}\n      // `raw` (e.g. innerHTML) skips prettier; otherwise reuse the shared\n      // prettier wiring as the Cmd+S formatter rather than reimplementing it.\n      formatCode={raw ? undefined : formatCode}\n      onChange={onChange}\n      onSave={onSave}\n      onFormatError={onError}\n      {...props}\n    />\n  );\n};\n\nexport default Core;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,YAAY;CAC/B,MAAM,CAAC,UAAU,OAAO,QAAQ,cAAc,MAAM,QAAQ,IAAI;EAC9D,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,CAAC;CAED,OAAO;EACL,QAAQ,SAAS;EACjB,SAAS;GAAC,MAAM;GAAS,OAAO;GAAS,WAAW;EAAO;CAC7D;AACF;AAEA,MAAM,2BAAoD;CACxD,UAAU;CACV,aAAa;CACb,eAAe;CACf,2BAA2B;CAC3B,aAAa;CACb,YAAY;AACd;AASA,MAAa,iBAAiB,EAC5B,UACA,oBACwB,CAAC,MAAM;CAC/B,MAAM,iBAAiB,eACd;EACL,GAAG;EACH,GAAG;CACL,IACA,CAAC,eAAe,CAClB;CAEA,OAAO,YACL,OAAO,SAAiB;EACtB,MAAM,eAAe,iBAAiB,IAAI;EAC1C,MAAM,SAAS,WAAW,KAAK,KAAK,OAAO;EAK3C,IAAI;EACJ,IAAI;GACF,WAAW,MAAM,aAAa;EAChC,QAAQ;GACN,OAAO;EACT;EAEA,MAAM,YAAY,MAAM,SAAS,OAAO,QAAQ;GAC9C,QAAQ,eAAe,eAAe;GACtC,SAAS,SAAS;GAClB,GAAG;EACL,CAAC;EAED,IAAI,UACF,OAAO,UACJ,QAAQ,UAAU,EAAE,CAAC,CACrB,QAAQ,iBAAiB,EAAE,CAAC,CAC5B,QAAQ,WAAW,EAAE,CAAC,CACtB,KAAK;EAGV,OAAO;CACT,GACA,CAAC,gBAAgB,QAAQ,CAC3B;AACF;;;ACrDA,MAAM,QAAQ,EACZ,OACA,OACA,QACA,WACA,iBACA,UACA,KACA,UACA,QACA,SACA,GAAG,YACQ;CACX,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,OACE,oBAAC,YAAD;EACS;EACP,OAAO,SAAS;EAChB,QAAQ,UAAU;EAClB,WAAW,GAAG,SAAS;EAGvB,YAAY,MAAM,KAAA,IAAY;EACpB;EACF;EACR,eAAe;EACf,GAAI;CACL,CAAA;AAEL"}

package/dist/{detect-typescript-Dr_oLniM.js → detect-typescript-CoAO-QUJ.js}

@@ -1,4 +1,4 @@
-import { l as TS_PATTERNS, s as REGEX } from "./constants-DU17Tdwo.js";
+import { c as TS_PATTERNS, o as REGEX } from "./constants-D-XKuEY2.js";
 //#region src/utils/detect-typescript.ts
 const detectTypeScript = (code) => {
 	const withoutModuleLines = code.replace(REGEX.MODULE_IMPORT_EXPORT_LINE, "");
@@ -7,4 +7,4 @@ const detectTypeScript = (code) => {
 //#endregion
 export { detectTypeScript as t };
 
-//# sourceMappingURL=detect-typescript-Dr_oLniM.js.map
+//# sourceMappingURL=detect-typescript-CoAO-QUJ.js.map

package/dist/{detect-typescript-Dr_oLniM.js.map → detect-typescript-CoAO-QUJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"detect-typescript-Dr_oLniM.js","names":[],"sources":["../src/utils/detect-typescript.ts"],"sourcesContent":["import { REGEX, TS_PATTERNS } from '../constants';\n\nexport const detectTypeScript = (code: string): boolean => {\n  // Drop `import` and `export ... from` lines first: their `as`\n  // (`import * as ui`) is plain JavaScript but matches the `as\\s+\\w+` check\n  // below.\n  const withoutModuleLines = code.replace(REGEX.MODULE_IMPORT_EXPORT_LINE, '');\n\n  return TS_PATTERNS.some(pattern => pattern.test(withoutModuleLines));\n};\n"],"mappings":";;AAEA,MAAa,oBAAoB,SAA0B;CAIzD,MAAM,qBAAqB,KAAK,QAAQ,MAAM,2BAA2B,EAAE;CAE3E,OAAO,YAAY,MAAK,YAAW,QAAQ,KAAK,kBAAkB,CAAC;AACrE"}
+{"version":3,"file":"detect-typescript-CoAO-QUJ.js","names":[],"sources":["../src/utils/detect-typescript.ts"],"sourcesContent":["import { REGEX, TS_PATTERNS } from '../constants';\n\nexport const detectTypeScript = (code: string): boolean => {\n  // Drop `import` and `export ... from` lines first: their `as`\n  // (`import * as ui`) is plain JavaScript but matches the `as\\s+\\w+` check\n  // below.\n  const withoutModuleLines = code.replace(REGEX.MODULE_IMPORT_EXPORT_LINE, '');\n\n  return TS_PATTERNS.some(pattern => pattern.test(withoutModuleLines));\n};\n"],"mappings":";;AAEA,MAAa,oBAAoB,SAA0B;CAIzD,MAAM,qBAAqB,KAAK,QAAQ,MAAM,2BAA2B,EAAE;CAE3E,OAAO,YAAY,MAAK,YAAW,QAAQ,KAAK,kBAAkB,CAAC;AACrE"}

package/dist/dnd/index.d.ts

@@ -1,2 +1,2 @@
-import { $ as PanelBindingSource, A as DndLayout, B as DndPalette, C as useDndItems, D as DraggableItem, E as useDndChildren, F as DndLayoutProps, G as useDndInspector, H as Props, I as DndRegionProps, J as Field, K as DndEditError, L as Layout, M as useDndPalette, N as useDndPanel, O as DraggableItemDragState, P as Canvas, Q as PanelBindingElement, R as Palette, S as DndItemsOptions, T as DndChildrenOptions, U as DndInspector, V as DndPanel, W as DndNodePick, X as PanelBinding, Y as FieldProps, Z as PanelBindingData, _ as DndItemsActions, a as ItemsEditorActions, at as DndSectionFallbackArgs, b as DndItemsNestedElement, c as ItemsEditorNestedGroup, d as useItemsEditor, et as PanelNodeChange, f as FieldKind, g as DndItems, h as isStructuralFieldKind, i as ItemsEditor, it as DndRenderSectionFallback, j as useDndLayout, k as DraggableItemProps, l as ItemsEditorOptions, m as getFieldKind, n as ChildrenEditorOptions, nt as resolvePanelBindings, o as ItemsEditorItem, p as FieldKindBinding, q as DndRenderField, r as Dnd, rt as withPanelCommit, s as ItemsEditorNestedElement, t as ChildrenEditor, tt as PanelNodesChange, u as useChildrenEditor, v as DndItemsExpansion, w as DndChildren, x as DndItemsNestedGroup, y as DndItemsItem, z as Panel } from "../index-C69Lv-jR.js";
-export { Canvas, ChildrenEditor, ChildrenEditorOptions, type DndChildren, type DndChildrenOptions, type DndEditError, type DndInspector, type DndItems, type DndItemsActions, type DndItemsExpansion, type DndItemsItem, type DndItemsNestedElement, type DndItemsNestedGroup, type DndItemsOptions, type DndLayout, type DndLayoutProps, type DndNodePick, type DndPalette, type DndPanel, type DndRegionProps, type DndRenderField, type DndRenderSectionFallback, type DndSectionFallbackArgs, DraggableItem, type DraggableItemDragState, type DraggableItemProps, Field, type FieldKind, type FieldKindBinding, type FieldProps, ItemsEditor, ItemsEditorActions, ItemsEditorItem, ItemsEditorNestedElement, ItemsEditorNestedGroup, ItemsEditorOptions, Layout, Palette, Panel, type PanelBinding, type PanelBindingData, type PanelBindingElement, type PanelBindingSource, type PanelNodeChange, type PanelNodesChange, type Props, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useChildrenEditor, useDndChildren, useDndInspector, useDndItems, useDndLayout, useDndPalette, useDndPanel, useItemsEditor, withPanelCommit };
+import { A as Panel, B as PanelBinding, C as useDndPalette, D as DndRegionProps, E as DndLayoutProps, F as DndNodePick, G as PanelNodesChange, H as PanelBindingElement, I as useDndInspector, J as DndRenderSectionFallback, K as resolvePanelBindings, L as DndEditError, M as DndPanel, N as Props, O as Layout, P as DndInspector, R as DndRenderField, S as useDndLayout, T as Canvas, U as PanelBindingSource, V as PanelBindingData, W as PanelNodeChange, Y as DndSectionFallbackArgs, _ as useDndChildren, a as isStructuralFieldKind, b as DraggableItemProps, c as DndItemsExpansion, d as DndItemsNestedGroup, f as DndItemsOptions, g as DndChildrenOptions, h as DndChildren, i as getFieldKind, j as DndPalette, k as Palette, l as DndItemsItem, m as Field, n as FieldKind, o as DndItems, p as useDndItems, q as withPanelCommit, r as FieldKindBinding, s as DndItemsActions, t as Dnd, u as DndItemsNestedElement, v as DraggableItem, w as useDndPanel, x as DndLayout, y as DraggableItemDragState, z as FieldProps } from "../index-0VB5C3Jk.js";
+export { Canvas, type DndChildren, type DndChildrenOptions, type DndEditError, type DndInspector, type DndItems, type DndItemsActions, type DndItemsExpansion, type DndItemsItem, type DndItemsNestedElement, type DndItemsNestedGroup, type DndItemsOptions, type DndLayout, type DndLayoutProps, type DndNodePick, type DndPalette, type DndPanel, type DndRegionProps, type DndRenderField, type DndRenderSectionFallback, type DndSectionFallbackArgs, DraggableItem, type DraggableItemDragState, type DraggableItemProps, Field, type FieldKind, type FieldKindBinding, type FieldProps, Layout, Palette, Panel, type PanelBinding, type PanelBindingData, type PanelBindingElement, type PanelBindingSource, type PanelNodeChange, type PanelNodesChange, type Props, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useDndChildren, useDndInspector, useDndItems, useDndLayout, useDndPalette, useDndPanel, withPanelCommit };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { _ as useDndPanel, a as Layout, c as Field, d as isStructuralFieldKind, f as useDndChildren, g as useDndPalette, h as useDndLayout, i as Canvas, l as useDndItems, m as withPanelCommit, n as useChildrenEditor, o as Palette, p as resolvePanelBindings, r as useItemsEditor, s as Panel, t as Dnd, u as getFieldKind, v as useDndInspector, y as DraggableItem } from "../dnd-UoJILA75.js";
-export { Canvas, DraggableItem, Field, Layout, Palette, Panel, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useChildrenEditor, useDndChildren, useDndInspector, useDndItems, useDndLayout, useDndPalette, useDndPanel, useItemsEditor, withPanelCommit };
+import { _ as DraggableItem, a as Panel, c as getFieldKind, d as resolvePanelBindings, f as withPanelCommit, g as useDndInspector, h as useDndPanel, i as Palette, l as isStructuralFieldKind, m as useDndPalette, n as Canvas, o as Field, p as useDndLayout, r as Layout, s as useDndItems, t as Dnd, u as useDndChildren } from "../dnd-BlC1gqUy.js";
+export { Canvas, DraggableItem, Field, Layout, Palette, Panel, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useDndChildren, useDndInspector, useDndItems, useDndLayout, useDndPalette, useDndPanel, withPanelCommit };