@particle-academy/fancy-slides 0.11.0 → 0.12.0

package/dist/index.cjs

@@ -2214,7 +2214,8 @@ function EditorToolbar({
   onInsertCode,
   onInsertTable,
   onPresent,
-  disabled = false
+  disabled = false,
+  toolbarExtra
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fs-toolbar flex items-center gap-2 border-b border-zinc-200 bg-white px-4 py-2 dark:border-zinc-800 dark:bg-zinc-950", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2261,7 +2262,53 @@ function EditorToolbar({
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Items, { children: Object.values(builtinThemes).map((t) => /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Dropdown.Item, { onClick: () => onApplyTheme?.(t), children: t.name }, t.name)) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Present (F)", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { color: "violet", size: "sm", icon: "play", onClick: onPresent, children: "Present" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+      toolbarExtra,
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tooltip, { content: "Present (F)", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { color: "violet", size: "sm", icon: "play", onClick: onPresent, children: "Present" }) })
+    ] })
+  ] });
+}
+function FallbackTextarea({ value, onChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      className: "block w-full resize-y rounded-md border border-zinc-300 bg-zinc-950 p-2 font-mono text-xs text-zinc-100 dark:border-zinc-700",
+      rows: 8,
+      value,
+      spellCheck: false,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+var CodeInputInner = react.lazy(async () => {
+  try {
+    const mod = await import('@particle-academy/fancy-code');
+    const CodeEditor = mod.CodeEditor;
+    if (!CodeEditor) return { default: FallbackTextarea };
+    return {
+      default: ({ value, language, theme, onChange }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-md border border-zinc-300 dark:border-zinc-700", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CodeEditor,
+        {
+          value,
+          onChange,
+          language,
+          theme,
+          lineNumbers: true,
+          wordWrap: true,
+          minHeight: 140,
+          maxHeight: 280,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor.Panel, {})
+        }
+      ) })
+    };
+  } catch {
+    return { default: FallbackTextarea };
+  }
+});
+function CodeInput(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Code" }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(FallbackTextarea, { ...props }), children: /* @__PURE__ */ jsxRuntime.jsx(CodeInputInner, { ...props }) })
   ] });
 }
 function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetLayout, onSetAnimation, onSetElementAnimation }) {
@@ -2821,10 +2868,41 @@ function ShapeStyleControls({ element, onPatch }) {
     (element.shape === "rounded-rect" || element.shape === "rect") && /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Slider, { label: "Corner radius", value: element.radius ?? 0, onValueChange: (v) => onPatch({ radius: Number(v) }), min: 0, max: 40 })
   ] });
 }
+var CODE_LANGUAGES = [
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "jsx", label: "JSX" },
+  { value: "tsx", label: "TSX" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "json", label: "JSON" },
+  { value: "python", label: "Python" },
+  { value: "php", label: "PHP" },
+  { value: "bash", label: "Bash" },
+  { value: "go", label: "Go" },
+  { value: "sql", label: "SQL" },
+  { value: "markdown", label: "Markdown" }
+];
 function CodeStyleControls({ element, onPatch }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Textarea, { label: "Code", value: element.code, onValueChange: (v) => onPatch({ code: v }), rows: 6, autoResize: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Input, { label: "Language", value: element.language ?? "javascript", onChange: (e) => onPatch({ language: e.target.value }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CodeInput,
+      {
+        value: element.code,
+        language: element.language ?? "javascript",
+        theme: element.codeTheme ?? "dark",
+        onChange: (v) => onPatch({ code: v })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactFancy.Select,
+      {
+        label: "Language",
+        list: CODE_LANGUAGES,
+        value: element.language ?? "javascript",
+        onValueChange: (v) => onPatch({ language: v })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       reactFancy.Select,
       {
@@ -3279,7 +3357,8 @@ function DeckEditor({
             onInsertCode: insertCode,
             onInsertTable: insertTable,
             onPresent,
-            disabled: !slide
+            disabled: !slide,
+            toolbarExtra
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1", children: [
@@ -3350,8 +3429,7 @@ function DeckEditor({
               onSetElementAnimation: (eid, animation) => slide && ops.setAnimation(slide.id, eid, animation)
             }
           ) })
-        ] }),
-        toolbarExtra
+        ] })
       ]
     }
   );