@particle-academy/fancy-slides 0.10.0 → 0.12.0

package/dist/index.d.cts

@@ -300,13 +300,15 @@ interface EditorToolbarProps {
     onPresent?: () => void;
     /** When true, disables every Insert button (e.g. when no slide is selected). */
     disabled?: boolean;
+    /** Host-injected content rendered on the toolbar's trailing edge, left of Present. */
+    toolbarExtra?: ReactNode;
 }
 /**
  * Top toolbar. Built on react-fancy's `Action`, `Dropdown`, `Tooltip`,
  * `Badge`, `Separator`. Designed to be slotted into the editor chrome —
  * doesn't manage its own scroll or sticky behavior.
  */
-declare function EditorToolbar({ title, onTitleChange, themeName, onApplyTheme, onInsertText, onInsertImage, onInsertShape, onInsertChart, onInsertCode, onInsertTable, onPresent, disabled, }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
+declare function EditorToolbar({ title, onTitleChange, themeName, onApplyTheme, onInsertText, onInsertImage, onInsertShape, onInsertChart, onInsertCode, onInsertTable, onPresent, disabled, toolbarExtra, }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface ElementInspectorProps {
     /** Element being inspected. `null` falls back to slide settings (or the empty state). */

package/dist/index.d.ts

@@ -300,13 +300,15 @@ interface EditorToolbarProps {
     onPresent?: () => void;
     /** When true, disables every Insert button (e.g. when no slide is selected). */
     disabled?: boolean;
+    /** Host-injected content rendered on the toolbar's trailing edge, left of Present. */
+    toolbarExtra?: ReactNode;
 }
 /**
  * Top toolbar. Built on react-fancy's `Action`, `Dropdown`, `Tooltip`,
  * `Badge`, `Separator`. Designed to be slotted into the editor chrome —
  * doesn't manage its own scroll or sticky behavior.
  */
-declare function EditorToolbar({ title, onTitleChange, themeName, onApplyTheme, onInsertText, onInsertImage, onInsertShape, onInsertChart, onInsertCode, onInsertTable, onPresent, disabled, }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
+declare function EditorToolbar({ title, onTitleChange, themeName, onApplyTheme, onInsertText, onInsertImage, onInsertShape, onInsertChart, onInsertCode, onInsertTable, onPresent, disabled, toolbarExtra, }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface ElementInspectorProps {
     /** Element being inspected. `null` falls back to slide settings (or the empty state). */

package/dist/index.js

@@ -1,9 +1,9 @@
 import { defaultElementRegistry } from './chunk-YEJZYKVB.js';
 import { isDarkColor, SlideContext } from './chunk-WIUXPQAK.js';
 export { useIsDarkSlide, useSlideContext, useSlideTheme } from './chunk-WIUXPQAK.js';
-import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { lazy, useId, useRef, useState, useEffect, useMemo, useCallback, Suspense } from 'react';
 import { Editor, ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Textarea, Slider, Switch } from '@particle-academy/react-fancy';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/theme/default-theme.ts
 var defaultTheme = {
@@ -1963,7 +1963,8 @@ function EditorToolbar({
   onInsertCode,
   onInsertTable,
   onPresent,
-  disabled = false
+  disabled = false,
+  toolbarExtra
 }) {
   return /* @__PURE__ */ 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__ */ jsx(
@@ -2010,7 +2011,53 @@ function EditorToolbar({
       ] }) }),
       /* @__PURE__ */ jsx(Dropdown.Items, { children: Object.values(builtinThemes).map((t) => /* @__PURE__ */ jsx(Dropdown.Item, { onClick: () => onApplyTheme?.(t), children: t.name }, t.name)) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(Tooltip, { content: "Present (F)", children: /* @__PURE__ */ jsx(Action, { color: "violet", size: "sm", icon: "play", onClick: onPresent, children: "Present" }) }) })
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+      toolbarExtra,
+      /* @__PURE__ */ jsx(Tooltip, { content: "Present (F)", children: /* @__PURE__ */ jsx(Action, { color: "violet", size: "sm", icon: "play", onClick: onPresent, children: "Present" }) })
+    ] })
+  ] });
+}
+function FallbackTextarea({ value, onChange }) {
+  return /* @__PURE__ */ 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 = 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__ */ jsx("div", { className: "overflow-hidden rounded-md border border-zinc-300 dark:border-zinc-700", children: /* @__PURE__ */ jsx(
+        CodeEditor,
+        {
+          value,
+          onChange,
+          language,
+          theme,
+          lineNumbers: true,
+          wordWrap: true,
+          minHeight: 140,
+          maxHeight: 280,
+          children: /* @__PURE__ */ jsx(CodeEditor.Panel, {})
+        }
+      ) })
+    };
+  } catch {
+    return { default: FallbackTextarea };
+  }
+});
+function CodeInput(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-zinc-600 dark:text-zinc-400", children: "Code" }),
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(FallbackTextarea, { ...props }), children: /* @__PURE__ */ jsx(CodeInputInner, { ...props }) })
   ] });
 }
 function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetLayout, onSetAnimation, onSetElementAnimation }) {
@@ -2570,10 +2617,41 @@ function ShapeStyleControls({ element, onPatch }) {
     (element.shape === "rounded-rect" || element.shape === "rect") && /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx(Textarea, { label: "Code", value: element.code, onValueChange: (v) => onPatch({ code: v }), rows: 6, autoResize: true }),
-    /* @__PURE__ */ jsx(Input, { label: "Language", value: element.language ?? "javascript", onChange: (e) => onPatch({ language: e.target.value }) }),
+    /* @__PURE__ */ jsx(
+      CodeInput,
+      {
+        value: element.code,
+        language: element.language ?? "javascript",
+        theme: element.codeTheme ?? "dark",
+        onChange: (v) => onPatch({ code: v })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Language",
+        list: CODE_LANGUAGES,
+        value: element.language ?? "javascript",
+        onValueChange: (v) => onPatch({ language: v })
+      }
+    ),
     /* @__PURE__ */ jsx(
       Select,
       {
@@ -3028,7 +3106,8 @@ function DeckEditor({
             onInsertCode: insertCode,
             onInsertTable: insertTable,
             onPresent,
-            disabled: !slide
+            disabled: !slide,
+            toolbarExtra
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
@@ -3099,8 +3178,7 @@ function DeckEditor({
               onSetElementAnimation: (eid, animation) => slide && ops.setAnimation(slide.id, eid, animation)
             }
           ) })
-        ] }),
-        toolbarExtra
+        ] })
       ]
     }
   );