@jbpark/live-editor 3.0.0 → 3.0.2

package/dist/editor/index.d.ts

@@ -1,2 +1,2 @@
-import { a as Props, i as Core, n as EditorRenderData, r as Props$1, t as Editor } from "../index-C4TBkJBG.js";
+import { a as Props, i as Core, n as EditorRenderData, r as Props$1, t as Editor } from "../index-Ck3akHag.js";
 export { Core, type Props as CoreProps, type EditorRenderData, type Props$1 as Props, Editor as default };

package/dist/editor/index.js

@@ -1,3 +1,3 @@
-import { t as Core } from "../core-CbuS_p_d.js";
-import { t as Editor } from "../editor-Ct9wuhLm.js";
+import { t as Core } from "../core-CTsQ9LiQ.js";
+import { t as Editor } from "../editor-C0lphNg6.js";
 export { Core, Editor as default };

package/dist/{editor-Ct9wuhLm.js → editor-C0lphNg6.js}

@@ -1,6 +1,6 @@
 import { y as DEFAULT_TEMPLATE } from "./document-C6bNHl7l.js";
 import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
-import { n as useFormatCode, t as Core } from "./core-CbuS_p_d.js";
+import { n as useFormatCode, t as Core } from "./core-CTsQ9LiQ.js";
 import { useCallback, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDebouncedValue } from "@jbpark/use-hooks";
@@ -48,4 +48,4 @@ Editor.Core = Core;
 //#endregion
 export { Editor as t };
 
-//# sourceMappingURL=editor-Ct9wuhLm.js.map
+//# sourceMappingURL=editor-C0lphNg6.js.map

package/dist/{editor-Ct9wuhLm.js.map → editor-C0lphNg6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"editor-Ct9wuhLm.js","names":["Editor","EditorImpl"],"sources":["../src/components/editor/editor.tsx","../src/components/editor/index.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useDebouncedValue } from '@jbpark/use-hooks';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport { DEFAULT_TEMPLATE } from '~/constants';\n\nimport Core, { type Props as CoreProps } from './core';\nimport { useFormatCode } from './use-format-code';\n\nexport interface EditorRenderData {\n  value: string;\n  onChange: (value: string) => void;\n  // Same prettier-based formatting Core's own Cmd+S uses - reused rather\n  // than reimplemented, so a custom editor can offer equivalent\n  // format-on-save behavior without duplicating the prettier wiring.\n  formatCode: (code: string) => Promise<string>;\n}\n\nexport interface Props extends Omit<CoreProps, 'onSave' | 'onError'> {\n  defaultValue?: string;\n  debounce?: number;\n  // Full replacement for the built-in CodeMirror editor. Editor still owns\n  // syncing `value` to the shared preview code (debounced), regardless of\n  // which UI renders it - only the editing surface itself is customizable.\n  renderEditor?: (data: EditorRenderData) => React.ReactNode;\n}\n\nconst Editor = ({\n  defaultValue,\n  value: _value,\n  debounce = 1000,\n  onChange: _onChange,\n  renderEditor,\n  fragment,\n  prettierOptions,\n  ...props\n}: Props) => {\n  const { setCode } = usePreview();\n  const { setError } = useError();\n\n  const value =\n    _value.trim() === '' ? defaultValue || DEFAULT_TEMPLATE : _value;\n\n  const onChange = useCallback(\n    (value: string) => {\n      _onChange?.(value);\n    },\n    [_onChange],\n  );\n\n  const onSave = useCallback(\n    (formattedCode: string) => {\n      setCode(formattedCode);\n    },\n    [setCode],\n  );\n\n  const onError = useCallback(\n    (error: string | null) => {\n      setError(error);\n    },\n    [setError],\n  );\n\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  const debouncedValue = useDebouncedValue(value, debounce);\n\n  useEffect(() => {\n    setCode(debouncedValue);\n  }, [debouncedValue, setCode]);\n\n  if (renderEditor) {\n    return renderEditor({ value, onChange, formatCode });\n  }\n\n  return (\n    <Core\n      value={value}\n      onChange={onChange}\n      onSave={onSave}\n      onError={onError}\n      fragment={fragment}\n      prettierOptions={prettierOptions}\n      {...props}\n    />\n  );\n};\n\nexport default Editor;\n","import Core, { type Props as CoreProps } from './core';\nimport EditorImpl, { type EditorRenderData, type Props } from './editor';\n\ntype EditorComponent = typeof EditorImpl & { Core: typeof Core };\n\nconst Editor = EditorImpl as EditorComponent;\n\nEditor.Core = Core;\n\nexport { Core };\nexport type { Props, CoreProps, EditorRenderData };\nexport default Editor;\n"],"mappings":";;;;;;;AA4BA,MAAMA,YAAU,EACd,cACA,OAAO,QACP,WAAW,KACX,UAAU,WACV,cACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,aAAa,SAAS;CAE9B,MAAM,QACJ,OAAO,KAAK,MAAM,KAAK,gBAAgB,mBAAmB;CAE5D,MAAM,WAAW,aACd,UAAkB;EACjB,YAAY,KAAK;CACnB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,SAAS,aACZ,kBAA0B;EACzB,QAAQ,aAAa;CACvB,GACA,CAAC,OAAO,CACV;CAEA,MAAM,UAAU,aACb,UAAyB;EACxB,SAAS,KAAK;CAChB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,MAAM,iBAAiB,kBAAkB,OAAO,QAAQ;CAExD,gBAAgB;EACd,QAAQ,cAAc;CACxB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,IAAI,cACF,OAAO,aAAa;EAAE;EAAO;EAAU;CAAW,CAAC;CAGrD,OACE,oBAAC,MAAD;EACS;EACG;EACF;EACC;EACC;EACO;EACjB,GAAI;CACL,CAAA;AAEL;;;ACnFA,MAAM,SAASC;AAEf,OAAO,OAAO"}
+{"version":3,"file":"editor-C0lphNg6.js","names":["Editor","EditorImpl"],"sources":["../src/components/editor/editor.tsx","../src/components/editor/index.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useDebouncedValue } from '@jbpark/use-hooks';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport { DEFAULT_TEMPLATE } from '~/constants';\n\nimport Core, { type Props as CoreProps } from './core';\nimport { useFormatCode } from './use-format-code';\n\nexport interface EditorRenderData {\n  value: string;\n  onChange: (value: string) => void;\n  // Same prettier-based formatting Core's own Cmd+S uses - reused rather\n  // than reimplemented, so a custom editor can offer equivalent\n  // format-on-save behavior without duplicating the prettier wiring.\n  formatCode: (code: string) => Promise<string>;\n}\n\nexport interface Props extends Omit<CoreProps, 'onSave' | 'onError'> {\n  defaultValue?: string;\n  debounce?: number;\n  // Full replacement for the built-in CodeMirror editor. Editor still owns\n  // syncing `value` to the shared preview code (debounced), regardless of\n  // which UI renders it - only the editing surface itself is customizable.\n  renderEditor?: (data: EditorRenderData) => React.ReactNode;\n}\n\nconst Editor = ({\n  defaultValue,\n  value: _value,\n  debounce = 1000,\n  onChange: _onChange,\n  renderEditor,\n  fragment,\n  prettierOptions,\n  ...props\n}: Props) => {\n  const { setCode } = usePreview();\n  const { setError } = useError();\n\n  const value =\n    _value.trim() === '' ? defaultValue || DEFAULT_TEMPLATE : _value;\n\n  const onChange = useCallback(\n    (value: string) => {\n      _onChange?.(value);\n    },\n    [_onChange],\n  );\n\n  const onSave = useCallback(\n    (formattedCode: string) => {\n      setCode(formattedCode);\n    },\n    [setCode],\n  );\n\n  const onError = useCallback(\n    (error: string | null) => {\n      setError(error);\n    },\n    [setError],\n  );\n\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  const debouncedValue = useDebouncedValue(value, debounce);\n\n  useEffect(() => {\n    setCode(debouncedValue);\n  }, [debouncedValue, setCode]);\n\n  if (renderEditor) {\n    return renderEditor({ value, onChange, formatCode });\n  }\n\n  return (\n    <Core\n      value={value}\n      onChange={onChange}\n      onSave={onSave}\n      onError={onError}\n      fragment={fragment}\n      prettierOptions={prettierOptions}\n      {...props}\n    />\n  );\n};\n\nexport default Editor;\n","import Core, { type Props as CoreProps } from './core';\nimport EditorImpl, { type EditorRenderData, type Props } from './editor';\n\ntype EditorComponent = typeof EditorImpl & { Core: typeof Core };\n\nconst Editor = EditorImpl as EditorComponent;\n\nEditor.Core = Core;\n\nexport { Core };\nexport type { Props, CoreProps, EditorRenderData };\nexport default Editor;\n"],"mappings":";;;;;;;AA4BA,MAAMA,YAAU,EACd,cACA,OAAO,QACP,WAAW,KACX,UAAU,WACV,cACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,aAAa,SAAS;CAE9B,MAAM,QACJ,OAAO,KAAK,MAAM,KAAK,gBAAgB,mBAAmB;CAE5D,MAAM,WAAW,aACd,UAAkB;EACjB,YAAY,KAAK;CACnB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,SAAS,aACZ,kBAA0B;EACzB,QAAQ,aAAa;CACvB,GACA,CAAC,OAAO,CACV;CAEA,MAAM,UAAU,aACb,UAAyB;EACxB,SAAS,KAAK;CAChB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,MAAM,iBAAiB,kBAAkB,OAAO,QAAQ;CAExD,gBAAgB;EACd,QAAQ,cAAc;CACxB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,IAAI,cACF,OAAO,aAAa;EAAE;EAAO;EAAU;CAAW,CAAC;CAGrD,OACE,oBAAC,MAAD;EACS;EACG;EACF;EACC;EACC;EACO;EACjB,GAAI;CACL,CAAA;AAEL;;;ACnFA,MAAM,SAASC;AAEf,OAAO,OAAO"}

package/dist/{index-C4TBkJBG.d.ts → index-Ck3akHag.d.ts}

@@ -12,7 +12,7 @@ interface Props$1 {
   onSave?: (value: string) => void;
   onError?: (error: string | null) => void;
 }
-declare const Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }: Props$1) => import("react").JSX.Element;
+declare const Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave, onError, ...props }: Props$1) => import("react").JSX.Element;
 //#endregion
 //#region src/components/editor/editor.d.ts
 interface EditorRenderData {
@@ -34,4 +34,4 @@ type EditorComponent = typeof Editor$1 & {
 declare const Editor: EditorComponent;
 //#endregion
 export { Props$1 as a, Core as i, EditorRenderData as n, Props as r, Editor as t };
-//# sourceMappingURL=index-C4TBkJBG.d.ts.map
+//# sourceMappingURL=index-Ck3akHag.d.ts.map

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { v as Section } from "./document-J9Lo9p81.js";
 import { t as FrameProps } from "./index-DpDU1IAw.js";
 import { A as Props, D as DndPanel, E as DndPalette, O as PanelBinding, S as Panel, T as DraggableItemProps, _ as Canvas, b as Layout, f as FieldProps, i as ItemsEditorItem, k as PanelNodeChange, n as ItemsEditor, p as DndLayout, s as ItemsEditorOptions, t as Dnd, x as Palette } from "./index-Bqc5kUAG.js";
-import { a as Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-C4TBkJBG.js";
+import { a as Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-Ck3akHag.js";
 import { a as Props$5, n as Props$4, o as Props$3, s as ErrorBoundary, t as Error } from "./index-CCynrS6c.js";
 import { n as Props$6, t as Preview } from "./index-lgHdCda5.js";
 //#region src/index.d.ts
@@ -17,7 +17,7 @@ declare const App: {
     Guard: ({ children, onError }: Props$5) => import("react").JSX.Element;
   };
   Editor: (({ defaultValue, value: _value, debounce, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }: Props$1) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined) & {
-    Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }: Props$2) => import("react").JSX.Element;
+    Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave, onError, ...props }: Props$2) => import("react").JSX.Element;
   };
   Dnd: (({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, children, ...restProps }: Props) => import("react").JSX.Element) & {
     DraggableItem: ({ item, children }: DraggableItemProps) => import("react").ReactNode;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { t as ContextProvider } from "./context-DH70wj9d.js";
-import { t as Dnd } from "./dnd-Bl_oqayG.js";
-import { t as Editor } from "./editor-Ct9wuhLm.js";
+import { t as Dnd } from "./dnd-C4iBiSkv.js";
+import { t as Editor } from "./editor-C0lphNg6.js";
 import { t as Error } from "./error-lsJey-it.js";
 import { t as Preview } from "./preview-CNVXyDgY.js";
 import { jsx } from "react/jsx-runtime";

package/dist/style.css

@@ -516,13 +516,28 @@
 @layer ui-kit {
   @layer theme {
     :root, :host {
-      --font-sans: var(--font-geist-sans);
-      --font-mono: var(--font-geist-mono);
+      --font-sans: var(--ui-font-sans, var(--font-geist-sans));
+      --font-mono: var(--ui-font-mono, var(--font-geist-mono));
       --color-red-400: oklch(70.4% .191 22.216);
+      --color-red-500: oklch(63.7% .237 25.331);
+      --color-orange-500: oklch(70.5% .213 47.604);
+      --color-orange-600: oklch(64.6% .222 41.116);
+      --color-amber-500: oklch(76.9% .188 70.08);
       --color-yellow-400: oklch(85.2% .199 91.936);
+      --color-yellow-500: oklch(79.5% .184 86.047);
+      --color-yellow-600: oklch(68.1% .162 75.834);
+      --color-lime-500: oklch(76.8% .233 130.85);
       --color-green-400: oklch(79.2% .209 151.711);
+      --color-green-500: oklch(72.3% .219 149.579);
+      --color-green-600: oklch(62.7% .194 149.214);
+      --color-cyan-500: oklch(71.5% .143 215.221);
       --color-blue-400: oklch(70.7% .165 254.624);
+      --color-blue-500: oklch(62.3% .214 259.815);
       --color-blue-600: oklch(54.6% .245 262.881);
+      --color-indigo-500: oklch(58.5% .233 277.117);
+      --color-purple-500: oklch(62.7% .265 303.9);
+      --color-fuchsia-500: oklch(66.7% .295 322.15);
+      --color-pink-500: oklch(65.6% .241 354.308);
       --color-gray-100: oklch(96.7% .003 264.542);
       --color-gray-200: oklch(92.8% .006 264.531);
       --color-gray-300: oklch(87.2% .01 258.338);
@@ -607,93 +622,91 @@
   }
 
   @layer components {
-    [data-slot="button"][data-color] {
-      --btn-fg: white;
-      --btn-border: var(--btn-bg);
-      --btn-bg-hover: var(--btn-bg);
-
-      @supports (color: color-mix(in lab, red, red)) {
-        --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 12%);
-      }
-
-      --btn-bg-active: var(--btn-bg);
-
-      @supports (color: color-mix(in lab, red, red)) {
-        --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
-      }
+    :is([data-slot="button"], [data-slot="tag"])[data-color="blue"] {
+      --preset-color: var(--color-blue-500);
     }
 
-    [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="gold"] {
-      --btn-fg: black;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="purple"] {
+      --preset-color: var(--color-purple-500);
     }
 
-    [data-slot="button"][data-color="default"] {
-      --btn-bg: var(--muted);
-      --btn-border: var(--muted-foreground);
+    :is([data-slot="button"], [data-slot="tag"])[data-color="cyan"] {
+      --preset-color: var(--color-cyan-500);
     }
 
-    [data-slot="button"][data-color="primary"] {
-      --btn-bg: var(--primary);
-      --btn-fg: var(--primary-foreground);
+    :is([data-slot="button"], [data-slot="tag"])[data-color="green"] {
+      --preset-color: var(--color-green-500);
     }
 
-    [data-slot="button"][data-color="danger"] {
-      --btn-bg: var(--destructive);
+    :is([data-slot="button"], [data-slot="tag"])[data-color="fuchsia"] {
+      --preset-color: var(--color-fuchsia-500);
     }
 
-    [data-slot="button"][data-color="blue"] {
-      --btn-bg: #3b82f6;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="pink"] {
+      --preset-color: var(--color-pink-500);
     }
 
-    [data-slot="button"][data-color="purple"] {
-      --btn-bg: #a855f7;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="red"] {
+      --preset-color: var(--color-red-500);
     }
 
-    [data-slot="button"][data-color="cyan"] {
-      --btn-bg: #06b6d4;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="orange"] {
+      --preset-color: var(--color-orange-500);
     }
 
-    [data-slot="button"][data-color="green"] {
-      --btn-bg: #22c55e;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="yellow"] {
+      --preset-color: var(--color-yellow-500);
     }
 
-    [data-slot="button"][data-color="magenta"] {
-      --btn-bg: #d946ef;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="indigo"] {
+      --preset-color: var(--color-indigo-500);
     }
 
-    [data-slot="button"][data-color="pink"] {
-      --btn-bg: #ec4899;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="lime"] {
+      --preset-color: var(--color-lime-500);
     }
 
-    [data-slot="button"][data-color="red"] {
-      --btn-bg: #ef4444;
+    :is([data-slot="button"], [data-slot="tag"])[data-color="amber"] {
+      --preset-color: var(--color-amber-500);
     }
 
-    [data-slot="button"][data-color="orange"] {
-      --btn-bg: #f97316;
-    }
+    [data-slot="button"][data-color] {
+      --btn-bg: var(--preset-color);
+      --btn-fg: white;
+      --btn-border: var(--btn-bg);
+      --btn-bg-hover: var(--btn-bg);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 12%);
+      }
 
-    [data-slot="button"][data-color="yellow"] {
-      --btn-bg: #eab308;
+      --btn-bg-active: var(--btn-bg);
+
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
+      }
     }
 
-    [data-slot="button"][data-color="volcano"] {
-      --btn-bg: #ea580c;
+    [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"] {
+      --btn-fg: black;
     }
 
-    [data-slot="button"][data-color="geekblue"] {
-      --btn-bg: #6366f1;
+    [data-slot="button"][data-color="default"] {
+      --btn-bg: var(--muted);
+      --btn-border: var(--muted-foreground);
     }
 
-    [data-slot="button"][data-color="lime"] {
-      --btn-bg: #84cc16;
+    [data-slot="button"][data-color="primary"] {
+      --btn-bg: var(--primary);
+      --btn-fg: var(--primary-foreground);
     }
 
-    [data-slot="button"][data-color="gold"] {
-      --btn-bg: #f59e0b;
+    [data-slot="button"][data-color="danger"] {
+      --btn-bg: var(--destructive);
     }
 
-    [data-slot="badge"][data-color] {
+    [data-slot="tag"][data-color] {
+      --tag-bg: var(--preset-color);
       --tag-fg: var(--tag-bg);
       --tag-tint: var(--tag-bg);
 
@@ -702,92 +715,40 @@
       }
     }
 
-    [data-slot="badge"][data-color="default"] {
+    [data-slot="tag"][data-color="default"] {
       --tag-bg: var(--border);
       --tag-tint: var(--muted);
       --tag-fg: var(--muted-foreground);
     }
 
-    [data-slot="badge"][data-color="default"][data-variant="outlined"] {
+    [data-slot="tag"][data-color="default"][data-variant="outlined"] {
       --tag-fg: var(--foreground);
     }
 
-    [data-slot="badge"][data-color="primary"] {
+    [data-slot="tag"][data-color="primary"] {
       --tag-bg: var(--primary);
     }
 
-    [data-slot="badge"][data-color="danger"] {
+    [data-slot="tag"][data-color="danger"] {
       --tag-bg: var(--destructive);
     }
 
-    [data-slot="badge"][data-color="success"] {
-      --tag-bg: oklch(72.3% .219 149.579);
-      --tag-fg: oklch(62.7% .194 149.214);
-    }
-
-    [data-slot="badge"][data-color="warning"] {
-      --tag-bg: oklch(79.5% .184 86.047);
-      --tag-fg: oklch(68.1% .162 75.834);
-    }
-
-    :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="success"] {
-      --tag-fg: oklch(79.2% .209 151.711);
-    }
-
-    :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="warning"] {
-      --tag-fg: oklch(85.2% .199 91.936);
-    }
-
-    [data-slot="badge"][data-color="blue"] {
-      --tag-bg: #3b82f6;
-    }
-
-    [data-slot="badge"][data-color="purple"] {
-      --tag-bg: #a855f7;
-    }
-
-    [data-slot="badge"][data-color="cyan"] {
-      --tag-bg: #06b6d4;
-    }
-
-    [data-slot="badge"][data-color="green"] {
-      --tag-bg: #22c55e;
-    }
-
-    [data-slot="badge"][data-color="magenta"] {
-      --tag-bg: #d946ef;
-    }
-
-    [data-slot="badge"][data-color="pink"] {
-      --tag-bg: #ec4899;
-    }
-
-    [data-slot="badge"][data-color="red"] {
-      --tag-bg: #ef4444;
+    [data-slot="tag"][data-color="success"] {
+      --tag-bg: var(--color-green-500);
+      --tag-fg: var(--color-green-600);
     }
 
-    [data-slot="badge"][data-color="orange"] {
-      --tag-bg: #f97316;
+    [data-slot="tag"][data-color="warning"] {
+      --tag-bg: var(--color-yellow-500);
+      --tag-fg: var(--color-yellow-600);
     }
 
-    [data-slot="badge"][data-color="yellow"] {
-      --tag-bg: #eab308;
+    :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="success"] {
+      --tag-fg: var(--color-green-400);
     }
 
-    [data-slot="badge"][data-color="volcano"] {
-      --tag-bg: #ea580c;
-    }
-
-    [data-slot="badge"][data-color="geekblue"] {
-      --tag-bg: #6366f1;
-    }
-
-    [data-slot="badge"][data-color="lime"] {
-      --tag-bg: #84cc16;
-    }
-
-    [data-slot="badge"][data-color="gold"] {
-      --tag-bg: #f59e0b;
+    :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="warning"] {
+      --tag-fg: var(--color-yellow-400);
     }
 
     [data-slot="col"] {
@@ -982,6 +943,10 @@
       z-index: 50;
     }
 
+    .z-1000 {
+      z-index: 1000;
+    }
+
     .z-10000 {
       z-index: 10000;
     }
@@ -2046,6 +2011,10 @@
       background-color: var(--card);
     }
 
+    .bg-chart-1 {
+      background-color: var(--chart-1);
+    }
+
     .bg-destructive {
       background-color: var(--destructive);
     }
@@ -2082,6 +2051,10 @@
       background-color: var(--secondary);
     }
 
+    .bg-sidebar {
+      background-color: var(--sidebar);
+    }
+
     .bg-transparent {
       background-color: #0000;
     }
@@ -2251,7 +2224,7 @@
     }
 
     .font-mono {
-      font-family: var(--font-geist-mono);
+      font-family: var(--ui-font-mono, var(--font-geist-mono));
     }
 
     .text-2xl {
@@ -2537,6 +2510,11 @@
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .invert {
+      --tw-invert: invert(100%);
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
     .filter {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
@@ -3996,7 +3974,7 @@
     }
 
     .\[\&_\.tiptap_code\]\:font-mono .tiptap code {
-      font-family: var(--font-geist-mono);
+      font-family: var(--ui-font-mono, var(--font-geist-mono));
     }
 
     .\[\&_\.tiptap_code\]\:text-\[0\.85em\] .tiptap code {
@@ -4141,7 +4119,7 @@
     }
 
     .\[\&_\.tiptap_pre\]\:font-mono .tiptap pre {
-      font-family: var(--font-geist-mono);
+      font-family: var(--ui-font-mono, var(--font-geist-mono));
     }
 
     .\[\&_\.tiptap_pre\]\:text-sm .tiptap pre {
@@ -4392,6 +4370,10 @@
       a.\[a\&\]\:hover\:text-accent-foreground:hover {
         color: var(--accent-foreground);
       }
+
+      a.\[a\&\]\:hover\:underline:hover {
+        text-decoration-line: underline;
+      }
     }
   }
 

package/dist/utils/ast/index.js

@@ -1,3 +1,3 @@
 import { a as generateSectionPreview, c as parseDocument, i as generateDocumentCode, l as replaceDocumentSections, n as createSectionPreviewCache, o as generateSectionPreviews, r as fillSectionIds, s as getSections, t as clearDocumentParseCache } from "../../document-C6bNHl7l.js";
-import { A as parseValue, C as parseBindingExpression, D as extractObjectProperties, E as extractNodeValue, M as generateCode, O as flattenEditableValue, S as parseBinding, T as createNodeFromValue, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, i as clearExtractCache, j as setEditableValue, k as parseArrayExpression, l as moveArrayItems, m as clone, n as bulkUpdate, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, u as parseItems, w as arrayExpressionToCode, x as getStructuredValue, y as findEditableChildren } from "../../ast-DRg6HV4H.js";
+import { A as parseValue, C as parseBindingExpression, D as extractObjectProperties, E as extractNodeValue, M as generateCode, O as flattenEditableValue, S as parseBinding, T as createNodeFromValue, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, i as clearExtractCache, j as setEditableValue, k as parseArrayExpression, l as moveArrayItems, m as clone, n as bulkUpdate, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, u as parseItems, w as arrayExpressionToCode, x as getStructuredValue, y as findEditableChildren } from "../../ast-D6R-dsk0.js";
 export { appendArrayItem, arrayExpressionToCode, bulkUpdate, clearDocumentParseCache, clearExtractCache, clone, createNodeFromValue, createSectionPreviewCache, duplicateArrayItems, extract, extractNodeValue, extractObjectProperties, fillIds, fillSectionIds, findEditableChildren, flattenEditableValue, generateCode, generateDocumentCode, generateSectionPreview, generateSectionPreviews, getCurrentValue, getSections, getStructuredValue, moveArrayItem, moveArrayItems, parseArrayExpression, parseBinding, parseBindingExpression, parseDocument, parseItems, parseValue, removeArrayItems, replaceDocumentSections, replaceIds, setEditableValue, update, updateArrayItemProperty, updateArrayItemValue, validateBindingValue };

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.0.0",
+  "version": "3.0.2",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -107,7 +107,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@jbpark/ui-kit": "^7.1.0",
+    "@jbpark/ui-kit": "^9.0.0",
     "@jbpark/use-hooks": "^4.0.1",
     "@uiw/codemirror-theme-vscode": "^4.25.11",
     "@uiw/react-codemirror": "^4.25.11",

package/dist/core-CbuS_p_d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"core-CbuS_p_d.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';\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 { useCallback, useRef } from 'react';\n\nimport { javascript } from '@codemirror/lang-javascript';\nimport { vscodeLight } from '@uiw/codemirror-theme-vscode';\nimport CodeMirror, {\n  type Extension,\n  type ReactCodeMirrorRef,\n} from '@uiw/react-codemirror';\nimport { EditorView } from 'codemirror';\n\nimport { cn } from '~/utils';\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}\n\nconst Core = ({\n  value,\n  theme,\n  height,\n  className,\n  prettierOptions,\n  fragment,\n  raw,\n  onChange,\n  onSave: _onSave,\n  onError,\n  ...props\n}: Props) => {\n  const editorRef = useRef<ReactCodeMirrorRef>(null);\n\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  const onSave = useCallback(\n    async (val: string) => {\n      try {\n        const currentView = editorRef.current?.view;\n        if (!currentView) {\n          return;\n        }\n\n        const currentLength = currentView.state.doc.length;\n        const cursorPos = currentView.state.selection.main.head;\n        const formattedCode = raw ? val : await formatCode(val);\n\n        if (currentLength === currentView.state.doc.length) {\n          const newCursorPos = Math.min(cursorPos, formattedCode.length);\n          const transaction = currentView.state.update({\n            changes: { from: 0, to: currentLength, insert: formattedCode },\n            selection: { anchor: newCursorPos },\n          });\n          currentView.dispatch(transaction);\n\n          onChange?.(formattedCode);\n          _onSave?.(formattedCode);\n        }\n\n        onError?.(null);\n      } catch (e) {\n        onError?.(e instanceof Error ? e.message : String(e));\n      }\n    },\n    [raw, formatCode, onChange, _onSave, onError],\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 's') {\n        e.preventDefault();\n        const currentValue =\n          editorRef.current?.view?.state.doc.toString() || value;\n        onSave(currentValue);\n      }\n    },\n    [onSave, value],\n  );\n\n  return (\n    <div className={cn(className)} onKeyDown={onKeyDown}>\n      <CodeMirror\n        ref={editorRef}\n        theme={theme || vscodeLight}\n        height={height || '100%'}\n        value={value}\n        extensions={[\n          javascript({ jsx: true, typescript: true }),\n          EditorView.lineWrapping,\n        ]}\n        onChange={onChange}\n        {...props}\n      />\n    </div>\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;;;ACzDA,MAAM,QAAQ,EACZ,OACA,OACA,QACA,WACA,iBACA,UACA,KACA,UACA,QAAQ,SACR,SACA,GAAG,YACQ;CACX,MAAM,YAAY,OAA2B,IAAI;CAEjD,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,MAAM,SAAS,YACb,OAAO,QAAgB;EACrB,IAAI;GACF,MAAM,cAAc,UAAU,SAAS;GACvC,IAAI,CAAC,aACH;GAGF,MAAM,gBAAgB,YAAY,MAAM,IAAI;GAC5C,MAAM,YAAY,YAAY,MAAM,UAAU,KAAK;GACnD,MAAM,gBAAgB,MAAM,MAAM,MAAM,WAAW,GAAG;GAEtD,IAAI,kBAAkB,YAAY,MAAM,IAAI,QAAQ;IAClD,MAAM,eAAe,KAAK,IAAI,WAAW,cAAc,MAAM;IAC7D,MAAM,cAAc,YAAY,MAAM,OAAO;KAC3C,SAAS;MAAE,MAAM;MAAG,IAAI;MAAe,QAAQ;KAAc;KAC7D,WAAW,EAAE,QAAQ,aAAa;IACpC,CAAC;IACD,YAAY,SAAS,WAAW;IAEhC,WAAW,aAAa;IACxB,UAAU,aAAa;GACzB;GAEA,UAAU,IAAI;EAChB,SAAS,GAAG;GACV,UAAU,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC,CAAC;EACtD;CACF,GACA;EAAC;EAAK;EAAY;EAAU;EAAS;CAAO,CAC9C;CAEA,MAAM,YAAY,aACf,MAA2C;EAC1C,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,KAAK;GAC7C,EAAE,eAAe;GACjB,MAAM,eACJ,UAAU,SAAS,MAAM,MAAM,IAAI,SAAS,KAAK;GACnD,OAAO,YAAY;EACrB;CACF,GACA,CAAC,QAAQ,KAAK,CAChB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,SAAS;EAAc;EACxC,UAAA,oBAAC,YAAD;GACE,KAAK;GACL,OAAO,SAAS;GAChB,QAAQ,UAAU;GACX;GACP,YAAY,CACV,WAAW;IAAE,KAAK;IAAM,YAAY;GAAK,CAAC,GAC1C,WAAW,YACb;GACU;GACV,GAAI;EACL,CAAA;CACE,CAAA;AAET"}