@jbpark/live-editor 4.1.1 → 4.2.0

package/dist/{compile-CBOAtQMz.js → compile-0Dvp8zp5.js}

@@ -1,11 +1,35 @@
-import { n as CONFIG } from "./constants-BD3FZKWE.js";
+import { n as CONFIG } from "./constants-CKvdqZtO.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-b0A751v2.js";
+import { t as detectTypeScript } from "./detect-typescript-5MV4mCM7.js";
 import React from "react";
 import * as Babel from "@babel/standalone";
 //#region src/utils/scripts.ts
-const scriptCache = createBoundedCache(CONFIG.SCRIPT_CACHE_LIMIT, (_src, blobUrl) => URL.revokeObjectURL(blobUrl));
+const pins = /* @__PURE__ */ new Map();
+const deferredRevocations = /* @__PURE__ */ new Map();
+const revoke = (src, blobUrl) => {
+	if (!pins.has(src)) {
+		URL.revokeObjectURL(blobUrl);
+		return;
+	}
+	deferredRevocations.set(src, [...deferredRevocations.get(src) ?? [], blobUrl]);
+};
+const pin = (src) => {
+	pins.set(src, (pins.get(src) ?? 0) + 1);
+};
+const unpin = (src) => {
+	const count = (pins.get(src) ?? 0) - 1;
+	if (count > 0) {
+		pins.set(src, count);
+		return;
+	}
+	pins.delete(src);
+	deferredRevocations.get(src)?.forEach((blobUrl) => {
+		URL.revokeObjectURL(blobUrl);
+	});
+	deferredRevocations.delete(src);
+};
+const scriptCache = createBoundedCache(CONFIG.SCRIPT_CACHE_LIMIT, revoke);
 const loadingScriptCache = /* @__PURE__ */ new Map();
 const getCachedScriptBlob = async (src) => {
 	const cached = scriptCache.get(src);
@@ -23,6 +47,14 @@ const getCachedScriptBlob = async (src) => {
 	loadingScriptCache.set(src, promise);
 	return promise;
 };
+const withScriptBlobs = async (scripts, inject) => {
+	scripts.forEach(pin);
+	try {
+		inject(await Promise.all(scripts.map(getCachedScriptBlob)));
+	} finally {
+		scripts.forEach(unpin);
+	}
+};
 const preloadScripts = (scripts) => {
 	scripts.forEach((src) => {
 		getCachedScriptBlob(src).catch(() => {});
@@ -98,6 +130,6 @@ const compileModule = (code, modules) => {
 };
 registerEditorCache(clearCompilationCache);
 //#endregion
-export { getCachedScriptBlob as a, clearScriptCache as i, compile as n, preloadScripts as o, transformCode as r, clearCompilationCache as t };
+export { getCachedScriptBlob as a, clearScriptCache as i, compile as n, preloadScripts as o, transformCode as r, withScriptBlobs as s, clearCompilationCache as t };
 
-//# sourceMappingURL=compile-CBOAtQMz.js.map
+//# sourceMappingURL=compile-0Dvp8zp5.js.map

package/dist/compile-0Dvp8zp5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile-0Dvp8zp5.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 are between requesting a script and injecting it, per\n// source. A blob URL evicted in that window can't be revoked yet: the caller\n// already holds it and is about to hand it to a <script>, which then fails to\n// load without any error (#443). The LRU still drops the entry on schedule;\n// only the revocation waits, in `deferredRevocations`, until the last pin on\n// that source is released.\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    // Cleanup belongs on both paths, not just the successful one. A rejected\n    // promise left in this map is adopted by every later caller, so a single\n    // failed fetch made that script unloadable for the rest of the session\n    // even after the network recovered.\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 of\n// them can be revoked. `inject` has to consume them synchronously, which\n// appending the <script> elements does: the browser resolves a blob URL when\n// the element is inserted, so revoking it afterwards is safe.\n//\n// Needed because the URLs resolve at different times. A frame waiting on\n// several scripts, or several frames loading at once, can push more distinct\n// scripts through the cache than it holds before the last one arrives, and\n// the LRU used to revoke the first URLs while they were still waiting to be\n// injected (#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    // Fire-and-forget by design, so the rejection is absorbed here rather\n    // than surfacing as an unhandled one. The retry now works (see above),\n    // and the real load path reports the failure to whoever awaits it.\n    getCachedScriptBlob(src).catch(() => {});\n  });\n};\n\n// Blob URLs are browser resources, not just memory, so dropping the entries\n// is not enough — they have to be revoked. `clear()` runs the same `onEvict`\n// the LRU does, so the `URL.revokeObjectURL` above covers this path too.\n//\n// `loadingScriptCache` goes with it: a promise from a session that no longer\n// exists should not be adopted by the next one, which would otherwise hand\n// back a blob URL created before 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 index holds only the keys still in the bounded LRU. Comparing at most\n// CACHE_LIMIT snapshots avoids an unbounded identity registry for symbols\n// or serializing module objects/functions (which may be 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// TypeScript source used to go through `ts.transpileModule` and then this\n// same Babel pass — a double transpile, and one that required an eagerly\n// awaited top-level `import('typescript')` (a 3.4 MB chunk with none of the\n// laziness a dynamic import would normally buy, since it was awaited at\n// module scope). `@babel/standalone` already ships `preset-typescript` and\n// already runs this exact pass for the non-TS case, so folding TS in here\n// removes the `typescript` dependency entirely — see #192. Babel transpiles\n// per-file with no type information, so `const enum` comes out as a real\n// enum object and legacy decorators aren't supported; neither matters for\n// previewing React components, and errors here already fall back to\n// returning the input unchanged, same as compileTypeScript did.\nexport const transformCode = (code: string, isTypeScript = false): string => {\n  try {\n    const result = Babel.transform(code, {\n      filename: isTypeScript ? 'preview.tsx' : 'preview.jsx',\n      presets: isTypeScript ? ['typescript', 'env', 'react'] : ['env', 'react'],\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    // Presence, not truthiness: a module may legitimately *be* a falsy\n    // primitive (`0`, `''`, `false`, `null`), which compile() supports and\n    // compares by value. A truthiness check reported those as missing.\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-BD3FZKWE.js → constants-CKvdqZtO.js}

@@ -9,6 +9,11 @@ const DATA_ATTR = {
 	BINDING: "data-binding",
 	ITEM: "data-item"
 };
+const RESERVED_BINDING_PROPERTIES = [
+	DATA_ATTR.ID,
+	"data-name",
+	DATA_ATTR.BINDING
+];
 const REGEX = {
 	NUMBER: /^\d+(\.\d+)?$/,
 	BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,
@@ -31,18 +36,20 @@ const BINDING_PROP = {
 	INNER_HTML: "innerHTML",
 	ITEMS: "items"
 };
-const DEFAULT_TEMPLATE = `
+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="app-container"></main>
+    <main id="${containerId}"></main>
   )
 }
 
 export default App;
 `;
+const DEFAULT_TEMPLATE = documentTemplate(DEFAULT_CONTAINER_ID);
 const DRAGGABLE_ITEMS = [
 	{
 		id: "hero",
@@ -1445,6 +1452,6 @@ const DRAGGABLE_ITEMS = [
 	}
 ];
 //#endregion
-export { DRAGGABLE_ITEMS as a, DEFAULT_TEMPLATE as i, CONFIG as n, REGEX as o, DATA_ATTR as r, TS_PATTERNS as s, BINDING_PROP as t };
+export { DEFAULT_TEMPLATE as a, RESERVED_BINDING_PROPERTIES as c, DEFAULT_CONTAINER_ID as i, TS_PATTERNS as l, CONFIG as n, DRAGGABLE_ITEMS as o, DATA_ATTR as r, REGEX as s, BINDING_PROP as t, documentTemplate as u };
 
-//# sourceMappingURL=constants-BD3FZKWE.js.map
+//# sourceMappingURL=constants-CKvdqZtO.js.map

package/dist/constants-CKvdqZtO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-CKvdqZtO.js","names":[],"sources":["../src/constants/index.ts"],"sourcesContent":["import { type Section } from '../types';\n\nexport const STORAGE_KEY = 'live-editor-code';\n\nexport const CONFIG = {\n  CACHE_LIMIT: 50,\n  // Separate, much smaller limit for document.ts's parsed-AST cache — its\n  // entries are full Babel Files (~10-20x source size), not the compiled\n  // Module/string entries CACHE_LIMIT was sized for, and real hits only ever\n  // land on the document being actively edited (current + previous\n  // version), so keeping up to CACHE_LIMIT of them resident just wastes\n  // memory. See #106 (measured ~0.66MB/document, ~2.6MB at this limit).\n  DOCUMENT_CACHE_LIMIT: 4,\n  // Separate limit for utils/index.ts's scriptCache — those entries are\n  // live blob URLs handed to <script src>, and its onEvict immediately\n  // revokes the URL, unlike compilationCache's evictions which just discard\n  // a cheap-to-recompute Module. Sharing CACHE_LIMIT with compilationCache\n  // was coincidental, not a sizing decision for scriptCache's actual usage\n  // (a handful of distinct external preview scripts). See #104.\n  SCRIPT_CACHE_LIMIT: 10,\n} as const;\n\nexport const DATA_ATTR = {\n  ID: 'data-id',\n  BINDING: 'data-binding',\n  ITEM: 'data-item',\n} as const;\n\n// Attributes the editor owns. `data-id` is the key between the canvas and the\n// source, `data-name` is a section's name in the palette and panel, and\n// `data-binding` is the schema every edit is checked against. A binding can't\n// target them: rewriting one from the panel would break the mapping or the\n// declaration the edit itself depends on (#429).\nexport const RESERVED_BINDING_PROPERTIES: readonly string[] = [\n  DATA_ATTR.ID,\n  'data-name',\n  DATA_ATTR.BINDING,\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 const DRAGGABLE_ITEMS: Section[] = [\n  {\n    id: 'hero',\n    name: 'Hero',\n    code: `\n      <section\n        data-name=\"Hero\"\n        className={cn(\n          'text-center text-white',\n          //\n        )}\n      >\n        <ui.Space\n          data-id=\"\"\n          data-binding={[\n            {\n              label: 'Background Style',\n              property: 'style',\n              type: 'object',\n              // Types the keys inside the object value; a leaf takes the same\n              // fields as a top-level binding.\n              render: {\n                backgroundColor: { type: 'color', label: 'Background Color' },\n              },\n              // Not a library field, so it arrives as meta.group.\n              group: 'layout',\n            },\n            {\n              label: 'Content Spacing',\n              property: 'size',\n              type: 'number',\n              // Constraints the library validates with or without a widget.\n              min: 0,\n              max: 40,\n              // Presentation only: the built-in panel ignores it and shows a\n              // number input; a custom panel can switch on widget.type.\n              widget: { type: 'slider', step: 4, unit: 'px' },\n              group: 'layout',\n            },\n          ]}\n          style={{\n            backgroundColor: '#6366f1',\n          }}\n          orientation=\"vertical\"\n          size={16}\n          align=\"center\"\n          className={cn(\n            'px-5 py-15',\n            //\n          )}\n        >\n          <h1\n            data-id=\"\"\n            data-binding={[\n              {\n                label: 'Title',\n                property: 'innerText',\n                type: 'string',\n                required: true,\n              },\n            ]}\n            className={cn(\n              'text-5xl font-bold',\n              //\n            )}\n          >\n            Welcome to Live Editor\n          </h1>\n          <p\n            data-id=\"\"\n            data-binding={[\n              {\n                label: 'Description',\n                type: 'richtext',\n              },\n            ]}\n            className={cn(\n              'text-xl',\n              //\n            )}\n          >\n            Build <strong>dynamic components</strong> with drag & drop\n          </p>\n          <ui.Button\n            data-id=\"\"\n            data-binding={[\n              {\n                label: 'Button Text',\n                property: 'innerText',\n              },\n              {\n                label: 'Button Icon',\n                property: 'icon',\n                type: 'jsx',\n              },\n              {\n                label: 'Button Size',\n                property: 'size',\n                options: [\n                  { label: 'Small', value: 'small' },\n                  { label: 'Middle', value: 'middle' },\n                  { label: 'Large', value: 'large' },\n                ],\n              },\n              {\n                label: 'Button Variant',\n                property: 'variant',\n                options: [\n                  { label: 'Solid', value: 'solid' },\n                  { label: 'Outlined', value: 'outlined' },\n                  { label: 'Filled', value: 'filled' },\n                ],\n              },\n            ]}\n            icon={<span>🚀</span>}\n            size=\"large\"\n            variant=\"solid\"\n            className={cn(\n              'bg-white text-indigo-500',\n              'hover:bg-gray-50',\n              //\n            )}\n          >\n            Get Started\n          </ui.Button>\n        </ui.Space>\n      </section>\n    `,\n  },\n  {\n    id: 'features',\n    name: 'Features',\n    code: `\n      <section\n        data-name=\"Features\"\n        className={cn(\n          'px-5 py-10',\n          //\n        )}\n      >\n        <ui.Space\n          data-id=\"\"\n          data-binding={[\n            {\n              label: 'Feature Cards',\n              property: 'children',\n            },\n          ]}\n          className={cn(\n            'mx-auto max-w-7xl',\n            //\n          )}\n          size=\"large\"\n          wrap\n        >\n          <ui.Card\n            className={cn(\n              'min-w-70 flex-1 text-center',\n              //\n            )}\n          >\n            <ui.Space orientation=\"vertical\" size=\"middle\" align=\"center\">\n              <div\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Icon',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-5xl',\n                  //\n                )}\n              >\n                🚀\n              </div>\n              <h3\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Title',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-2xl text-gray-800',\n                  //\n                )}\n              >\n                Feature 1\n              </h3>\n              <p\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Description',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-gray-600',\n                  //\n                )}\n              >\n                Amazing feature description\n              </p>\n            </ui.Space>\n          </ui.Card>\n          <ui.Card\n            className={cn(\n              'min-w-70 flex-1 text-center',\n              //\n            )}\n          >\n            <ui.Space orientation=\"vertical\" size=\"middle\" align=\"center\">\n              <div\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Icon',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-5xl',\n                  //\n                )}\n              >\n                ⚡\n              </div>\n              <h3\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Title',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-2xl text-gray-800',\n                  //\n                )}\n              >\n                Feature 2\n              </h3>\n              <p\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Description',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-gray-600',\n                  //\n                )}\n              >\n                Another great feature\n              </p>\n            </ui.Space>\n          </ui.Card>\n          <ui.Card\n            className={cn(\n              'min-w-70 flex-1 text-center',\n              //\n            )}\n          >\n            <ui.Space orientation=\"vertical\" size=\"middle\" align=\"center\">\n              <div\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Icon',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-5xl',\n                  //\n                )}\n              >\n                ✨\n              </div>\n              <h3\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Title',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-2xl text-gray-800',\n                  //\n                )}\n              >\n                Feature 3\n              </h3>\n              <p\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Description',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'text-gray-600',\n                  //\n                )}\n              >\n                One more awesome thing\n              </p>\n            </ui.Space>\n          </ui.Card>\n        </ui.Space>\n      </section>\n    `,\n  },\n  {\n    id: 'about',\n    name: 'About',\n    code: `\n      <section\n        data-name=\"About\"\n        className={cn(\n          'mx-auto max-w-3xl px-5 py-10',\n          //\n        )}\n      >\n        <ui.Typography.Title\n          data-id=\"\"\n          data-binding={[{ label: 'Title', property: 'innerText' }]}\n          level={2}\n          className={cn(\n            'mb-5 text-4xl text-gray-800',\n            //\n          )}\n        >\n          About Live Editor\n        </ui.Typography.Title>\n        <ui.Typography.Paragraph\n          data-id=\"\"\n          data-binding={[\n            {\n              label: 'Description 1',\n              type: 'richtext',\n            },\n          ]}\n          className={cn(\n            'mb-4 text-lg leading-relaxed text-gray-600',\n            //\n          )}\n        >\n          Live Editor is a powerful visual development tool that enables you to\n          create stunning web interfaces through an intuitive drag-and-drop\n          experience. Built with modern web technologies, it streamlines your\n          workflow and accelerates development cycles.\n        </ui.Typography.Paragraph>\n        <ui.Typography.Paragraph\n          data-id=\"\"\n          data-binding={[\n            {\n              label: 'Description 2',\n              type: 'richtext',\n            },\n          ]}\n          className={cn(\n            'text-lg leading-relaxed text-gray-600',\n            //\n          )}\n        >\n          Whether you&apos;re a seasoned developer or just starting out, Live\n          Editor provides the flexibility and control you need to bring your\n          creative vision to life. Focus on what matters most - building great\n          products.\n        </ui.Typography.Paragraph>\n      </section>\n    `,\n  },\n  {\n    id: 'cta',\n    name: 'CTA',\n    code: `\n      <section\n        data-name=\"CTA\"\n        className={cn(\n          'bg-gray-50 px-5 py-12 text-center',\n          //\n        )}\n      >\n        <div\n          className={cn(\n            'mx-auto max-w-xl',\n            //\n          )}\n        >\n          <ui.Typography.Title\n            data-id=\"\"\n            data-binding={[{ label: 'Title', property: 'innerText' }]}\n            level={2}\n            className={cn(\n              'mb-4 text-3xl text-gray-800',\n              //\n            )}\n          >\n            Ready to get started?\n          </ui.Typography.Title>\n          <ui.Typography.Paragraph\n            data-id=\"\"\n            data-binding={[\n              {\n                label: 'Description',\n                property: 'innerText',\n              },\n            ]}\n            className={cn(\n              'mb-6 text-lg text-gray-600',\n              //\n            )}\n          >\n            Start exploring what Live Editor can do for your projects\n          </ui.Typography.Paragraph>\n          <ui.Space\n            data-id=\"\"\n            data-binding={[{ label: 'Buttons', property: 'children' }]}\n            className={cn(\n              'flex flex-wrap justify-center gap-4',\n              //\n            )}\n          >\n            <ui.Button\n              data-id=\"\"\n              data-binding={[\n                {\n                  label: 'Button 1 Text',\n                  property: 'innerText',\n                },\n              ]}\n              size=\"large\"\n              className={cn(\n                'bg-indigo-500 px-8 text-base text-white',\n                'hover:bg-indigo-600',\n                //\n              )}\n            >\n              View Documentation\n            </ui.Button>\n            <ui.Button\n              data-id=\"\"\n              data-binding={[\n                {\n                  label: 'Button 2 Text',\n                  property: 'innerText',\n                },\n              ]}\n              variant=\"outlined\"\n              size=\"large\"\n              className={cn(\n                'border-2 border-indigo-500 px-8 text-base text-indigo-500',\n                'hover:bg-indigo-50',\n                //\n              )}\n            >\n              View Examples\n            </ui.Button>\n          </ui.Space>\n        </div>\n      </section>\n    `,\n  },\n  {\n    id: 'getting-started',\n    name: 'Getting Started',\n    code: `\n      <section\n        data-name=\"Getting Started\"\n        className={cn(\n          'px-5 py-16',\n          //\n        )}\n      >\n        <div\n          className={cn(\n            'mx-auto max-w-5xl',\n            //\n          )}\n        >\n          <ui.Typography.Title\n            data-id=\"\"\n            data-binding={[{ label: 'Title', property: 'innerText' }]}\n            level={2}\n            className={cn(\n              'mb-12 text-center text-4xl font-bold text-gray-800',\n              //\n            )}\n          >\n            How to Get Started\n          </ui.Typography.Title>\n          <div\n            className={cn(\n              'grid gap-8 md:grid-cols-3',\n              //\n            )}\n          >\n            <ui.Card\n              data-id=\"\"\n              data-binding={[\n                {\n                  label: 'Card 1 Content',\n                  property: 'children',\n                },\n              ]}\n              className={cn(\n                'rounded-lg border-2 border-gray-200 bg-white p-8',\n                //\n              )}\n            >\n              <ui.Typography.Title\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 1 Title',\n                    property: 'innerText',\n                  },\n                ]}\n                level={3}\n                className={cn(\n                  'mb-2 text-2xl font-bold text-gray-800',\n                  //\n                )}\n              >\n                Explore\n              </ui.Typography.Title>\n              <ui.Typography.Paragraph\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 1 Icon',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'mb-6 text-4xl font-bold text-indigo-600',\n                  //\n                )}\n              >\n                📚\n              </ui.Typography.Paragraph>\n              <ul\n                className={cn(\n                  'mb-8 space-y-3 text-gray-600',\n                  //\n                )}\n              >\n                <li>✓ Read documentation</li>\n                <li>✓ Browse examples</li>\n                <li>✓ Try the demo</li>\n              </ul>\n              <ui.Button\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 1 Button',\n                    property: 'innerText',\n                  },\n                ]}\n                variant=\"outlined\"\n                size=\"large\"\n                block\n                className={cn(\n                  'border-2 border-indigo-500 text-indigo-500',\n                  'hover:bg-indigo-50',\n                  //\n                )}\n              >\n                View Docs\n              </ui.Button>\n            </ui.Card>\n            <ui.Card\n              data-id=\"\"\n              data-binding={[\n                {\n                  label: 'Card 2 Content',\n                  property: 'children',\n                },\n              ]}\n              className={cn(\n                'relative rounded-lg border-2 border-indigo-500 bg-white p-8',\n                //\n              )}\n            >\n              <div\n                className={cn(\n                  'absolute -top-4 left-1/2 -translate-x-1/2',\n                  'rounded-full bg-indigo-500 px-4 py-1 text-sm text-white',\n                  //\n                )}\n              >\n                Recommended\n              </div>\n              <ui.Typography.Title\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 2 Title',\n                    property: 'innerText',\n                  },\n                ]}\n                level={3}\n                className={cn(\n                  'mb-2 text-2xl font-bold text-gray-800',\n                  //\n                )}\n              >\n                Practice\n              </ui.Typography.Title>\n              <ui.Typography.Paragraph\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 2 Icon',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'mb-6 text-4xl font-bold text-indigo-600',\n                  //\n                )}\n              >\n                💻\n              </ui.Typography.Paragraph>\n              <ul\n                className={cn(\n                  'mb-8 space-y-3 text-gray-600',\n                  //\n                )}\n              >\n                <li>✓ Interactive playground</li>\n                <li>✓ Experiment freely</li>\n                <li>✓ Build your own</li>\n              </ul>\n              <ui.Button\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 2 Button',\n                    property: 'innerText',\n                  },\n                ]}\n                size=\"large\"\n                block\n                className={cn(\n                  'bg-indigo-500 text-white',\n                  'hover:bg-indigo-600',\n                  //\n                )}\n              >\n                Start Building\n              </ui.Button>\n            </ui.Card>\n            <ui.Card\n              data-id=\"\"\n              data-binding={[\n                {\n                  label: 'Card 3 Content',\n                  property: 'children',\n                },\n              ]}\n              className={cn(\n                'rounded-lg border-2 border-gray-200 bg-white p-8',\n                //\n              )}\n            >\n              <ui.Typography.Title\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 3 Title',\n                    property: 'innerText',\n                  },\n                ]}\n                level={3}\n                className={cn(\n                  'mb-2 text-2xl font-bold text-gray-800',\n                  //\n                )}\n              >\n                Contribute\n              </ui.Typography.Title>\n              <ui.Typography.Paragraph\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 3 Icon',\n                    property: 'innerText',\n                  },\n                ]}\n                className={cn(\n                  'mb-6 text-4xl font-bold text-indigo-600',\n                  //\n                )}\n              >\n                🤝\n              </ui.Typography.Paragraph>\n              <ul\n                className={cn(\n                  'mb-8 space-y-3 text-gray-600',\n                  //\n                )}\n              >\n                <li>✓ Report issues</li>\n                <li>✓ Suggest features</li>\n                <li>✓ Submit pull requests</li>\n              </ul>\n              <ui.Button\n                data-id=\"\"\n                data-binding={[\n                  {\n                    label: 'Card 3 Button',\n                    property: 'innerText',\n                  },\n                ]}\n                variant=\"outlined\"\n                size=\"large\"\n                block\n                className={cn(\n                  'border-2 border-indigo-500 text-indigo-500',\n                  'hover:bg-indigo-50',\n                  //\n                )}\n              >\n                View on GitHub\n              </ui.Button>\n            </ui.Card>\n          </div>\n        </div>\n      </section>\n    `,\n  },\n  {\n    id: 'key-features',\n    name: 'Key Features',\n    code: `\n      <section\n        data-name=\"Key Features\"\n        className={cn(\n          'bg-indigo-50 px-5 py-16',\n          //\n        )}\n      >\n        <div\n          className={cn(\n            'mx-auto max-w-6xl',\n            //\n          )}\n        >\n          <h2\n            data-id=\"\"\n            data-binding={[{ label: 'Title', property: 'innerText' }]}\n            className={cn(\n              'mb-12 text-center text-4xl font-bold text-gray-800',\n              //\n            )}\n          >\n            Key Features\n          </h2>\n          <div\n            className={cn(\n              'grid gap-8 md:grid-cols-2',\n              //\n            )}\n          >\n            <div\n              className={cn(\n                'rounded-lg bg-white p-8 shadow-md',\n                //\n              )}\n            >\n              <div\n                className={cn(\n                  'mb-4 text-4xl',\n                  //\n                )}\n              >\n                🎨\n              </div>\n              <h3\n                className={cn(\n                  'mb-4 text-2xl font-bold text-gray-800',\n                  //\n                )}\n              >\n                Visual Editing\n              </h3>\n              <p\n                className={cn(\n                  'text-gray-600',\n                  //\n                )}\n              >\n                See your changes in real-time as you build. Live Editor provides\n                instant visual feedback, making it easier to understand how code\n                affects your interface.\n              </p>\n            </div>\n            <div\n              className={cn(\n                'rounded-lg bg-white p-8 shadow-md',\n                //\n              )}\n            >\n              <div\n                className={cn(\n                  'mb-4 text-4xl',\n                  //\n                )}\n              >\n                🧩\n              </div>\n              <h3\n                className={cn(\n                  'mb-4 text-2xl font-bold text-gray-800',\n                  //\n                )}\n              >\n                Component-Based\n              </h3>\n              <p\n                className={cn(\n                  'text-gray-600',\n                  //\n                )}\n              >\n                Build with reusable components that you can drag, drop, and\n                customize. Learn modern development patterns while creating your\n                interface.\n              </p>\n            </div>\n          </div>\n        </div>\n      </section>\n    `,\n  },\n  {\n    id: 'stats',\n    name: 'Stats',\n    code: `\n      <section\n        data-name=\"Stats\"\n        className={cn(\n          'bg-indigo-600 text-white',\n          //\n        )}\n      >\n        <ui.Marquees\n          data-id=\"\"\n          data-binding={[\n            { label: 'Stats Items', property: 'items' },\n            {\n              label: 'Scroll Speed',\n              property: 'speed',\n              type: 'number',\n              min: 20,\n              max: 300,\n              // The bare-string form; it arrives as { type: 'slider' }.\n              widget: 'slider',\n            },\n            { label: 'Pause On Hover', property: 'pauseOnHover', type: 'boolean' },\n          ]}\n          speed={100}\n          pauseOnHover={true}\n          autoFill={true}\n          className=\"px-5 py-16\"\n          items={[\n            {\n              key: 'stats-row',\n              children: (\n                <div\n                  data-id=\"\"\n                  data-binding={[\n                    {\n                      label: 'Stats Cards',\n                      property: 'children',\n                    },\n                  ]}\n                  className={cn('flex gap-20')}\n                >\n                  <div\n                    className={cn(\n                      'min-w-60 text-center',\n                      //\n                    )}\n                  >\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Title',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'mb-2 text-5xl font-bold',\n                        //\n                      )}\n                    >\n                      Open\n                    </p>\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Description',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'text-indigo-200',\n                        //\n                      )}\n                    >\n                      Source Project\n                    </p>\n                  </div>\n                  <div\n                    className={cn(\n                      'min-w-60 text-center',\n                      //\n                    )}\n                  >\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Title',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'mb-2 text-5xl font-bold',\n                        //\n                      )}\n                    >\n                      Free\n                    </p>\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Description',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'text-indigo-200',\n                        //\n                      )}\n                    >\n                      For Everyone\n                    </p>\n                  </div>\n                  <div\n                    className={cn(\n                      'min-w-60 text-center',\n                      //\n                    )}\n                  >\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Title',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'mb-2 text-5xl font-bold',\n                        //\n                      )}\n                    >\n                      Active\n                    </p>\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Description',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'text-indigo-200',\n                        //\n                      )}\n                    >\n                      Community\n                    </p>\n                  </div>\n                  <div\n                    className={cn(\n                      'min-w-60 text-center',\n                      //\n                    )}\n                  >\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Title',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'mb-2 text-5xl font-bold',\n                        //\n                      )}\n                    >\n                      Learn\n                    </p>\n                    <p\n                      data-id=\"\"\n                      data-binding={[\n                        {\n                          label: 'Description',\n                          property: 'innerText',\n                        },\n                      ]}\n                      className={cn(\n                        'text-indigo-200',\n                        //\n                      )}\n                    >\n                      By Doing\n                    </p>\n                  </div>\n                </div>\n              ),\n            },\n          ]}\n        />\n      </section>\n    `,\n  },\n  {\n    id: 'roadmap',\n    name: 'Roadmap',\n    code: `\n      <section\n        data-name=\"Roadmap\"\n        className={cn(\n          'px-5 py-16',\n          //\n        )}\n      >\n        <div\n          className={cn(\n            'mx-auto max-w-3xl',\n            //\n          )}\n        >\n          <h2\n            data-id=\"\"\n            data-binding={[\n              { label: 'Title', property: 'innerText', required: true },\n            ]}\n            className={cn(\n              'mb-8 text-center text-4xl font-bold text-gray-800',\n              //\n            )}\n          >\n            Roadmap\n          </h2>\n          <ui.List\n            data-id=\"\"\n            data-binding={[\n              {\n                label: 'Milestones',\n                property: 'data',\n                type: 'array',\n                // One leaf per item key. Each leaf takes the same fields as a\n                // top-level binding, and label falls back to the key.\n                render: {\n                  title: {\n                    type: 'string',\n                    label: 'Title',\n                    required: true,\n                  },\n                  date: { type: 'date', label: 'Release Date', required: true },\n                  status: {\n                    type: 'string',\n                    label: 'Status',\n                    options: [\n                      { label: 'Planned', value: 'planned' },\n                      { label: 'In Progress', value: 'in-progress' },\n                      { label: 'Shipped', value: 'shipped' },\n                    ],\n                  },\n                  progress: {\n                    type: 'number',\n                    label: 'Progress',\n                    min: 0,\n                    max: 100,\n                    widget: { type: 'slider', step: 10, unit: '%' },\n                  },\n                  color: { type: 'color', label: 'Accent Color' },\n                  highlight: { type: 'boolean', label: 'Highlight' },\n                  // An object-valued key: its own render map types the keys\n                  // inside it, one level further down.\n                  link: {\n                    type: 'object',\n                    label: 'Link',\n                    render: {\n                      text: { type: 'string', label: 'Link Text' },\n                      href: {\n                        type: 'url',\n                        label: 'Link URL',\n                        pattern: '^https://',\n                        // Not a library field, so it arrives as meta.hint.\n                        hint: 'Must use https',\n                      },\n                    },\n                  },\n                },\n              },\n            ]}\n            data={[\n              {\n                title: 'Visual editing',\n                date: '2026-03-02',\n                status: 'shipped',\n                progress: 100,\n                color: '#22c55e',\n                highlight: false,\n                link: { text: 'Release notes', href: 'https://github.com' },\n              },\n              {\n                title: 'Custom panels',\n                date: '2026-09-26',\n                status: 'in-progress',\n                progress: 60,\n                color: '#6366f1',\n                highlight: true,\n                link: { text: 'Guide', href: 'https://github.com' },\n              },\n              {\n                title: 'Collaboration',\n                date: '2027-01-15',\n                status: 'planned',\n                progress: 0,\n                color: '#f59e0b',\n                highlight: false,\n                link: { text: 'Discussion', href: 'https://github.com' },\n              },\n            ]}\n            itemKey={item => item.title}\n            renderItem={item => (\n              <div\n                className={cn(\n                  'flex items-center gap-4 border-b border-gray-100 py-4',\n                  item.highlight && 'rounded-lg bg-indigo-50 px-4',\n                )}\n              >\n                <span\n                  className=\"size-3 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"font-semibold text-gray-800\">{item.title}</p>\n                  <p className=\"text-sm text-gray-500\">\n                    {item.date} · {item.status}\n                  </p>\n                  <ui.Progress value={item.progress} className=\"mt-2\" />\n                </div>\n                <a\n                  href={item.link.href}\n                  className=\"text-sm text-indigo-500 hover:underline\"\n                >\n                  {item.link.text}\n                </a>\n              </div>\n            )}\n          />\n          <p\n            className={cn(\n              'mt-6 text-center text-sm text-gray-500',\n              //\n            )}\n          >\n            Last updated{' '}\n            <time\n              data-id=\"\"\n              data-binding={[\n                {\n                  label: 'Updated On',\n                  property: 'dateTime',\n                  type: 'date',\n                  required: true,\n                },\n                { label: 'Updated Text', property: 'innerText' },\n              ]}\n              dateTime=\"2026-09-26\"\n            >\n              September 26, 2026\n            </time>\n            {' · '}\n            <a\n              data-id=\"\"\n              data-binding={[\n                { label: 'Link Text', property: 'innerText' },\n                {\n                  label: 'Link URL',\n                  property: 'href',\n                  type: 'url',\n                  required: true,\n                  pattern: '^https://',\n                },\n              ]}\n              href=\"https://github.com/pjb0811/live-editor/releases\"\n              className=\"text-indigo-500 hover:underline\"\n            >\n              All releases\n            </a>\n          </p>\n        </div>\n      </section>\n    `,\n  },\n  {\n    id: 'faq',\n    name: 'FAQ',\n    code: `\n      <section\n        data-name=\"FAQ\"\n        className={cn(\n          'px-5 py-16',\n          //\n        )}\n      >\n        <div\n          className={cn(\n            'mx-auto max-w-3xl',\n            //\n          )}\n        >\n          <ui.Typography.Title\n            data-id=\"\"\n            data-binding={[{ label: 'Title', property: 'innerText' }]}\n            level={2}\n            className={cn(\n              'mb-12 text-center text-4xl font-bold text-gray-800',\n              //\n            )}\n          >\n            Frequently Asked Questions\n          </ui.Typography.Title>\n          <ui.Collapse\n            data-id=\"\"\n            data-binding={[{ label: 'FAQ Items', property: 'items' }]}\n            items={[\n              {\n                key: '1',\n                label: (\n                  <ui.Typography.Text\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Question 1',\n                        property: 'innerText',\n                      },\n                    ]}\n                    className={cn('text-lg font-semibold text-gray-800')}\n                  >\n                    What is Live Editor?\n                  </ui.Typography.Text>\n                ),\n                children: (\n                  <ui.Typography.Paragraph\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Answer 1',\n                        type: 'richtext',\n                      },\n                    ]}\n                    className={cn('text-gray-600')}\n                  >\n                    Live Editor is an open-source tool for building web\n                    interfaces visually. It helps you learn web development by\n                    providing instant feedback as you build components.\n                  </ui.Typography.Paragraph>\n                ),\n              },\n              {\n                key: '2',\n                label: (\n                  <ui.Typography.Text\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Question 2',\n                        property: 'innerText',\n                      },\n                    ]}\n                    className={cn('text-lg font-semibold text-gray-800')}\n                  >\n                    Do I need coding experience?\n                  </ui.Typography.Text>\n                ),\n                children: (\n                  <ui.Typography.Paragraph\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Answer 2',\n                        type: 'richtext',\n                      },\n                    ]}\n                    className={cn('text-gray-600')}\n                  >\n                    No! Live Editor is designed for all skill levels. Beginners\n                    can learn through visual editing, while experienced\n                    developers can work directly with code.\n                  </ui.Typography.Paragraph>\n                ),\n              },\n              {\n                key: '3',\n                label: (\n                  <ui.Typography.Text\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Question 3',\n                        property: 'innerText',\n                      },\n                    ]}\n                    className={cn('text-lg font-semibold text-gray-800')}\n                  >\n                    Is it really free?\n                  </ui.Typography.Text>\n                ),\n                children: (\n                  <ui.Typography.Paragraph\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Answer 3',\n                        type: 'richtext',\n                      },\n                    ]}\n                    className={cn('text-gray-600')}\n                  >\n                    Yes, completely free! Live Editor is an open-source project\n                    with no hidden costs or premium tiers. All features are\n                    available to everyone.\n                  </ui.Typography.Paragraph>\n                ),\n              },\n              {\n                key: '4',\n                label: (\n                  <ui.Typography.Text\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Question 4',\n                        property: 'innerText',\n                      },\n                    ]}\n                    className={cn('text-lg font-semibold text-gray-800')}\n                  >\n                    How can I contribute?\n                  </ui.Typography.Text>\n                ),\n                children: (\n                  <ui.Typography.Paragraph\n                    data-id=\"\"\n                    data-binding={[\n                      {\n                        label: 'Answer 4',\n                        type: 'richtext',\n                      },\n                    ]}\n                    className={cn('text-gray-600')}\n                  >\n                    You can contribute by reporting bugs, suggesting features,\n                    sharing your projects, or contributing code. Check our\n                    GitHub repository for more details.\n                  </ui.Typography.Paragraph>\n                ),\n              },\n            ]}\n          />\n        </div>\n      </section>\n    `,\n  },\n];\n"],"mappings":"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"}

package/dist/{context-DQ-UtoyS.js → context-93X3gyfJ.js}

@@ -1,4 +1,4 @@
-import { i as DEFAULT_TEMPLATE } from "./constants-BD3FZKWE.js";
+import { a as DEFAULT_TEMPLATE } from "./constants-CKvdqZtO.js";
 import { r as registerEditorSession } from "./editor-caches-ClMvdcQF.js";
 import { n as PreviewContext, t as ErrorContext } from "./states-Ci1AvoQ9.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -31,4 +31,4 @@ const ContextProvider = ({ children }) => {
 //#endregion
 export { ContextProvider as t };
 
-//# sourceMappingURL=context-DQ-UtoyS.js.map
+//# sourceMappingURL=context-93X3gyfJ.js.map

package/dist/{context-DQ-UtoyS.js.map → context-93X3gyfJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-DQ-UtoyS.js","names":[],"sources":["../src/components/context/context.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { DEFAULT_TEMPLATE } from '~/constants';\nimport { registerEditorSession } from '~/utils/editor-caches';\n\nimport type { ErrorContextType, PreviewContextType } from './states';\nimport { ErrorContext, PreviewContext } from './states';\n\nconst ContextProvider = ({ children }: { children?: React.ReactNode }) => {\n  const [code, setCodeState] = useState(DEFAULT_TEMPLATE);\n  const [error, setError] = useState<ErrorContextType['error']>(null);\n\n  // Clears any stale runtime/compile error in the same update batch that\n  // changes `code`, rather than in a separate useEffect — a useEffect here\n  // would race with componentDidCatch/Guard's onError firing for the *new*\n  // code's own errors within the same commit (layout effects run before\n  // passive effects, so a passive-effect reset could wipe out an error the\n  // new code just threw). Batching setError(null) into the same update as\n  // setCode guarantees stale errors are gone by the time the new code even\n  // renders, with nothing left afterward that could clobber a fresh one.\n  const setCode = useCallback<PreviewContextType['setCode']>(next => {\n    setError(null);\n    setCodeState(next);\n  }, []);\n\n  // The provider is the ownership boundary for every editor-owned cache, not\n  // just the compilation one it used to clear here: parsed documents,\n  // extracted bindings and the blob URLs generated for external scripts all\n  // outlive an editing session otherwise, released only when the LRU happens\n  // to evict them. registerEditorSession both counts this session and hands\n  // back the release, so the caches go when the last provider does.\n  useEffect(() => registerEditorSession(), []);\n\n  // Without this, a new object identity on every ContextProvider render\n  // (even ones that don't touch code/error at all, e.g. a parent\n  // re-rendering) meant every usePreview()/useError() consumer re-rendered\n  // too, regardless of whether the values they care about actually changed.\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  return (\n    <PreviewContext.Provider value={previewValue}>\n      <ErrorContext.Provider value={errorValue}>\n        {children}\n      </ErrorContext.Provider>\n    </PreviewContext.Provider>\n  );\n};\n\nexport default ContextProvider;\n"],"mappings":";;;;;;AAUA,MAAM,mBAAmB,EAAE,eAA+C;CACxE,MAAM,CAAC,MAAM,gBAAgB,SAAS,gBAAgB;CACtD,MAAM,CAAC,OAAO,YAAY,SAAoC,IAAI;CAUlE,MAAM,UAAU,aAA2C,SAAQ;EACjE,SAAS,IAAI;EACb,aAAa,IAAI;CACnB,GAAG,CAAC,CAAC;CAQL,gBAAgB,sBAAsB,GAAG,CAAC,CAAC;CAM3C,MAAM,eAAe,eACZ;EAAE;EAAM;CAAQ,IACvB,CAAC,MAAM,OAAO,CAChB;CAEA,MAAM,aAAa,eACV;EAAE;EAAO;CAAS,IACzB,CAAC,OAAO,QAAQ,CAClB;CAEA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC9B,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC3B;EACoB,CAAA;CACA,CAAA;AAE7B"}
+{"version":3,"file":"context-93X3gyfJ.js","names":[],"sources":["../src/components/context/context.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { DEFAULT_TEMPLATE } from '~/constants';\nimport { registerEditorSession } from '~/utils/editor-caches';\n\nimport type { ErrorContextType, PreviewContextType } from './states';\nimport { ErrorContext, PreviewContext } from './states';\n\nconst ContextProvider = ({ children }: { children?: React.ReactNode }) => {\n  const [code, setCodeState] = useState(DEFAULT_TEMPLATE);\n  const [error, setError] = useState<ErrorContextType['error']>(null);\n\n  // Clears any stale runtime/compile error in the same update batch that\n  // changes `code`, rather than in a separate useEffect — a useEffect here\n  // would race with componentDidCatch/Guard's onError firing for the *new*\n  // code's own errors within the same commit (layout effects run before\n  // passive effects, so a passive-effect reset could wipe out an error the\n  // new code just threw). Batching setError(null) into the same update as\n  // setCode guarantees stale errors are gone by the time the new code even\n  // renders, with nothing left afterward that could clobber a fresh one.\n  const setCode = useCallback<PreviewContextType['setCode']>(next => {\n    setError(null);\n    setCodeState(next);\n  }, []);\n\n  // The provider is the ownership boundary for every editor-owned cache, not\n  // just the compilation one it used to clear here: parsed documents,\n  // extracted bindings and the blob URLs generated for external scripts all\n  // outlive an editing session otherwise, released only when the LRU happens\n  // to evict them. registerEditorSession both counts this session and hands\n  // back the release, so the caches go when the last provider does.\n  useEffect(() => registerEditorSession(), []);\n\n  // Without this, a new object identity on every ContextProvider render\n  // (even ones that don't touch code/error at all, e.g. a parent\n  // re-rendering) meant every usePreview()/useError() consumer re-rendered\n  // too, regardless of whether the values they care about actually changed.\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  return (\n    <PreviewContext.Provider value={previewValue}>\n      <ErrorContext.Provider value={errorValue}>\n        {children}\n      </ErrorContext.Provider>\n    </PreviewContext.Provider>\n  );\n};\n\nexport default ContextProvider;\n"],"mappings":";;;;;;AAUA,MAAM,mBAAmB,EAAE,eAA+C;CACxE,MAAM,CAAC,MAAM,gBAAgB,SAAS,gBAAgB;CACtD,MAAM,CAAC,OAAO,YAAY,SAAoC,IAAI;CAUlE,MAAM,UAAU,aAA2C,SAAQ;EACjE,SAAS,IAAI;EACb,aAAa,IAAI;CACnB,GAAG,CAAC,CAAC;CAQL,gBAAgB,sBAAsB,GAAG,CAAC,CAAC;CAM3C,MAAM,eAAe,eACZ;EAAE;EAAM;CAAQ,IACvB,CAAC,MAAM,OAAO,CAChB;CAEA,MAAM,aAAa,eACV;EAAE;EAAO;CAAS,IACzB,CAAC,OAAO,QAAQ,CAClB;CAEA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC9B,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC3B;EACoB,CAAA;CACA,CAAA;AAE7B"}

package/dist/{core-DaXVtvH5.js → core-B3ruccKb.js}

@@ -1,5 +1,5 @@
 import { t as cn } from "./cn-CAnad2vL.js";
-import { t as detectTypeScript } from "./detect-typescript-b0A751v2.js";
+import { t as detectTypeScript } from "./detect-typescript-5MV4mCM7.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-DaXVtvH5.js.map
+//# sourceMappingURL=core-B3ruccKb.js.map

package/dist/{core-DaXVtvH5.js.map → core-B3ruccKb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"core-DaXVtvH5.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): the editor subpath is the\n// only thing that needs it, so consumers who don't use format-on-save\n// shouldn't have to install ~9.6 MB. It's loaded lazily below and its absence\n// degrades gracefully (the code is returned unformatted) instead of throwing.\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\nexport interface UseFormatCodeOptions {\n  fragment?: boolean;\n  prettierOptions?: Record<string, unknown>;\n}\n\n// Extracted out of Core so a custom renderEditor (see editor.tsx's\n// renderEditor prop) can reuse the exact same formatting behavior instead\n// of reimplementing prettier wiring from scratch.\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// The CodeMirror surface, the Cmd+S save transaction and the JS/TS + line-wrap\n// extensions now live in `@jbpark/ui-kit`'s CodeEditor (#346/#309). This stays\n// only to keep live-editor's own vocabulary: `raw`/`fragment`/`prettierOptions`\n// shape the injected prettier formatter, and `onError` maps to the component's\n// `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":";;;;;;;;AAQA,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;AAUA,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;;;ACtDA,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"}
+{"version":3,"file":"core-B3ruccKb.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): the editor subpath is the\n// only thing that needs it, so consumers who don't use format-on-save\n// shouldn't have to install ~9.6 MB. It's loaded lazily below and its absence\n// degrades gracefully (the code is returned unformatted) instead of throwing.\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\nexport interface UseFormatCodeOptions {\n  fragment?: boolean;\n  prettierOptions?: Record<string, unknown>;\n}\n\n// Extracted out of Core so a custom renderEditor (see editor.tsx's\n// renderEditor prop) can reuse the exact same formatting behavior instead\n// of reimplementing prettier wiring from scratch.\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// The CodeMirror surface, the Cmd+S save transaction and the JS/TS + line-wrap\n// extensions now live in `@jbpark/ui-kit`'s CodeEditor (#346/#309). This stays\n// only to keep live-editor's own vocabulary: `raw`/`fragment`/`prettierOptions`\n// shape the injected prettier formatter, and `onError` maps to the component's\n// `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":";;;;;;;;AAQA,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;AAUA,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;;;ACtDA,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-b0A751v2.js → detect-typescript-5MV4mCM7.js}

@@ -1,4 +1,4 @@
-import { o as REGEX, s as TS_PATTERNS } from "./constants-BD3FZKWE.js";
+import { l as TS_PATTERNS, s as REGEX } from "./constants-CKvdqZtO.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-b0A751v2.js.map
+//# sourceMappingURL=detect-typescript-5MV4mCM7.js.map

package/dist/{detect-typescript-b0A751v2.js.map → detect-typescript-5MV4mCM7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"detect-typescript-b0A751v2.js","names":[],"sources":["../src/utils/detect-typescript.ts"],"sourcesContent":["import { REGEX, TS_PATTERNS } from '../constants';\n\nexport const detectTypeScript = (code: string): boolean => {\n  // Strip `import`/`export ... from '...'` lines first — aliasing via `as`\n  // (`import * as ui from 'ui-kit'`, `import { Foo as Bar } from '...'`) is\n  // plain ES module syntax, not a TypeScript signal, but it otherwise\n  // matches the `as\\s+\\w+` pattern below and made every piece of code look\n  // like TypeScript.\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;CAMzD,MAAM,qBAAqB,KAAK,QAAQ,MAAM,2BAA2B,EAAE;CAE3E,OAAO,YAAY,MAAK,YAAW,QAAQ,KAAK,kBAAkB,CAAC;AACrE"}
+{"version":3,"file":"detect-typescript-5MV4mCM7.js","names":[],"sources":["../src/utils/detect-typescript.ts"],"sourcesContent":["import { REGEX, TS_PATTERNS } from '../constants';\n\nexport const detectTypeScript = (code: string): boolean => {\n  // Strip `import`/`export ... from '...'` lines first — aliasing via `as`\n  // (`import * as ui from 'ui-kit'`, `import { Foo as Bar } from '...'`) is\n  // plain ES module syntax, not a TypeScript signal, but it otherwise\n  // matches the `as\\s+\\w+` pattern below and made every piece of code look\n  // like TypeScript.\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;CAMzD,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 { A as PanelBinding, C as DraggableItemDragState, D as Props, E as DndPanel, F as FieldProps, M as DndEditError, N as DndRenderField, O as DndRenderSectionFallback, P as Field, S as DraggableItem, T as DndPalette, _ as DndLayoutProps, a as ItemsEditor, b as Palette, c as ItemsEditorNestedElement, d as useItemsEditor, f as DndLayout, g as Canvas, h as useDndPanel, i as useChildrenEditor, j as PanelNodeChange, k as DndSectionFallbackArgs, l as ItemsEditorNestedGroup, m as useDndPalette, n as ChildrenEditor, o as ItemsEditorActions, p as useDndLayout, r as ChildrenEditorOptions, s as ItemsEditorItem, t as Dnd, u as ItemsEditorOptions, v as DndRegionProps, w as DraggableItemProps, x as Panel, y as Layout } from "../index-C4t0OawE.js";
-export { Canvas, type ChildrenEditor, type ChildrenEditorOptions, type DndEditError, type DndLayout, type DndLayoutProps, type DndPalette, type DndPanel, type DndRegionProps, type DndRenderField, type DndRenderSectionFallback, type DndSectionFallbackArgs, DraggableItem, type DraggableItemDragState, type DraggableItemProps, Field, type FieldProps, type ItemsEditor, type ItemsEditorActions, type ItemsEditorItem, type ItemsEditorNestedElement, type ItemsEditorNestedGroup, type ItemsEditorOptions, Layout, Palette, Panel, type PanelBinding, type PanelNodeChange, type Props, Dnd as default, useChildrenEditor, useDndLayout, useDndPalette, useDndPanel, useItemsEditor };
+import { $ as Field, A as Canvas, B as DndPanel, C as DndChildren, D as useDndLayout, E as DndLayout, F as Panel, G as PanelBindingData, H as DndRenderSectionFallback, I as DraggableItem, J as PanelNodesChange, K as PanelBindingSource, L as DraggableItemDragState, M as DndRegionProps, N as Layout, O as useDndPalette, P as Palette, Q as DndRenderField, R as DraggableItemProps, S as useDndItems, T as useDndChildren, U as DndSectionFallbackArgs, V as Props, W as PanelBinding, X as withPanelCommit, Y as resolvePanelBindings, Z as DndEditError, _ as DndItemsActions, a as ItemsEditorActions, b as DndItemsNestedGroup, c as ItemsEditorNestedGroup, d as useItemsEditor, et as FieldProps, f as FieldKind, g as DndItems, h as isStructuralFieldKind, i as ItemsEditor, j as DndLayoutProps, k as useDndPanel, l as ItemsEditorOptions, m as getFieldKind, n as ChildrenEditorOptions, o as ItemsEditorItem, p as FieldKindBinding, q as PanelNodeChange, r as Dnd, s as ItemsEditorNestedElement, t as ChildrenEditor, u as useChildrenEditor, v as DndItemsItem, w as DndChildrenOptions, x as DndItemsOptions, y as DndItemsNestedElement, z as DndPalette } from "../index-DVgwXnPa.js";
+export { Canvas, ChildrenEditor, ChildrenEditorOptions, type DndChildren, type DndChildrenOptions, type DndEditError, type DndItems, type DndItemsActions, type DndItemsItem, type DndItemsNestedElement, type DndItemsNestedGroup, type DndItemsOptions, type DndLayout, type DndLayoutProps, 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 PanelBindingSource, type PanelNodeChange, type PanelNodesChange, type Props, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useChildrenEditor, useDndChildren, useDndItems, useDndLayout, useDndPalette, useDndPanel, useItemsEditor, withPanelCommit };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { a as Panel, c as useChildrenEditor, d as useDndPanel, f as DraggableItem, i as Palette, l as useDndLayout, n as Canvas, o as Field, r as Layout, s as useItemsEditor, t as Dnd, u as useDndPalette } from "../dnd-CMrXfD8O.js";
-export { Canvas, DraggableItem, Field, Layout, Palette, Panel, Dnd as default, useChildrenEditor, useDndLayout, useDndPalette, useDndPanel, useItemsEditor };
+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 DraggableItem } from "../dnd-DBaH2L8N.js";
+export { Canvas, DraggableItem, Field, Layout, Palette, Panel, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useChildrenEditor, useDndChildren, useDndItems, useDndLayout, useDndPalette, useDndPanel, useItemsEditor, withPanelCommit };