@particle-academy/fancy-slides 0.6.1 → 0.8.0

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { h as Slide$1, o as Theme, j as SlideElement, D as Deck, d as DeckOp, g as ShapeKind, l as SlideTransition, i as SlideBackground, E as ElementAnimation, m as TextElement, I as ImageElement, S as ShapeElement, k as SlideLayout } from './types-9BbelJX1.cjs';
+import { h as Slide$1, o as Theme, j as SlideElement, D as Deck, d as DeckOp, g as ShapeKind, l as SlideTransition, i as SlideBackground, k as SlideLayout, E as ElementAnimation, m as TextElement, I as ImageElement, S as ShapeElement } from './types-9BbelJX1.cjs';
 export { A as AnimationEffect, a as AnimationTrigger, C as ChartElement, b as CodeElement, c as DeckActivity, e as ElementBase, f as EmbedElement, T as TableElement, n as TextStyle, p as ThemeColors, q as ThemeFonts, r as TransitionKind } from './types-9BbelJX1.cjs';
+import { EditorAction } from '@particle-academy/react-fancy';
 
 interface SlideProps {
     /** The slide to render. */
@@ -322,6 +323,8 @@ interface ElementInspectorProps {
     onSetTransition?: (transition?: SlideTransition) => void;
     /** Set the slide's background. */
     onSetBackground?: (background?: SlideBackground) => void;
+    /** Set the slide's layout preset. */
+    onSetLayout?: (layout: SlideLayout) => void;
     /** Set or clear the selected element's entrance build animation. */
     onSetAnimation?: (animation?: ElementAnimation) => void;
     /** Set a specific element's build animation by id — used by the slide-level build-order list. */
@@ -333,7 +336,7 @@ interface ElementInspectorProps {
  * react-fancy `Card`, `Tabs`, `Input`, `Select`, `Slider`, `ColorPicker`,
  * `Action`.
  */
-declare function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetAnimation, onSetElementAnimation }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
+declare function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetLayout, onSetAnimation, onSetElementAnimation }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
 
 interface SpeakerNotesProps {
     notes?: string;
@@ -484,6 +487,29 @@ interface TextElementRendererProps {
  */
 declare function TextElementRenderer({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal, }: TextElementRendererProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Presentation-tuned toolbar preset for the react-fancy `Editor` used to edit
+ * slide text inline. Only commands that round-trip cleanly through the editor's
+ * `htmlToMarkdown` output are included — bold (`**`), italic (`*`), heading
+ * (`## `), and bullet list (`- `). Box-level typography (alignment, color, font
+ * size, line height) is NOT here: those are per-element `TextStyle` properties
+ * edited in the ElementInspector, and `text-align`/color spans don't survive the
+ * markdown the slide content commits to.
+ */
+declare const PRESENTATION_EDITOR_ACTIONS: EditorAction[];
+/**
+ * Normalize the `Editor`'s markdown output to the *line-based* paragraph model
+ * the slide content commits to. The editor emits a blank line (`\n\n`) between
+ * `<p>` blocks, but `splitParagraphs` (and the dark-slide pptx writer) treat a
+ * single `\n` as one paragraph / build unit, and a blank interior line as its
+ * own (phantom) build. Collapsing runs of newlines to a single `\n` keeps
+ * "by paragraph" reveals and per-paragraph pptx builds correct — bullets are
+ * already one-per-`\n`, so they're unaffected. The round-trip invariant
+ * (`content → Editor → normalize → content` preserves the `\n` paragraph count)
+ * is covered by a unit test.
+ */
+declare function normalizeSlideMarkdown(md: string): string;
+
 interface ImageElementRendererProps {
     element: ImageElement;
 }
@@ -647,4 +673,4 @@ type ChartKind = "bar" | "line" | "pie" | "area" | "scatter";
 type Option = Record<string, unknown>;
 declare function chartStarterOption(kind: ChartKind): Option;
 
-export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };
+export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PRESENTATION_EDITOR_ACTIONS, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, normalizeSlideMarkdown, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { h as Slide$1, o as Theme, j as SlideElement, D as Deck, d as DeckOp, g as ShapeKind, l as SlideTransition, i as SlideBackground, E as ElementAnimation, m as TextElement, I as ImageElement, S as ShapeElement, k as SlideLayout } from './types-9BbelJX1.js';
+import { h as Slide$1, o as Theme, j as SlideElement, D as Deck, d as DeckOp, g as ShapeKind, l as SlideTransition, i as SlideBackground, k as SlideLayout, E as ElementAnimation, m as TextElement, I as ImageElement, S as ShapeElement } from './types-9BbelJX1.js';
 export { A as AnimationEffect, a as AnimationTrigger, C as ChartElement, b as CodeElement, c as DeckActivity, e as ElementBase, f as EmbedElement, T as TableElement, n as TextStyle, p as ThemeColors, q as ThemeFonts, r as TransitionKind } from './types-9BbelJX1.js';
+import { EditorAction } from '@particle-academy/react-fancy';
 
 interface SlideProps {
     /** The slide to render. */
@@ -322,6 +323,8 @@ interface ElementInspectorProps {
     onSetTransition?: (transition?: SlideTransition) => void;
     /** Set the slide's background. */
     onSetBackground?: (background?: SlideBackground) => void;
+    /** Set the slide's layout preset. */
+    onSetLayout?: (layout: SlideLayout) => void;
     /** Set or clear the selected element's entrance build animation. */
     onSetAnimation?: (animation?: ElementAnimation) => void;
     /** Set a specific element's build animation by id — used by the slide-level build-order list. */
@@ -333,7 +336,7 @@ interface ElementInspectorProps {
  * react-fancy `Card`, `Tabs`, `Input`, `Select`, `Slider`, `ColorPicker`,
  * `Action`.
  */
-declare function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetAnimation, onSetElementAnimation }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
+declare function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetLayout, onSetAnimation, onSetElementAnimation }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
 
 interface SpeakerNotesProps {
     notes?: string;
@@ -484,6 +487,29 @@ interface TextElementRendererProps {
  */
 declare function TextElementRenderer({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal, }: TextElementRendererProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Presentation-tuned toolbar preset for the react-fancy `Editor` used to edit
+ * slide text inline. Only commands that round-trip cleanly through the editor's
+ * `htmlToMarkdown` output are included — bold (`**`), italic (`*`), heading
+ * (`## `), and bullet list (`- `). Box-level typography (alignment, color, font
+ * size, line height) is NOT here: those are per-element `TextStyle` properties
+ * edited in the ElementInspector, and `text-align`/color spans don't survive the
+ * markdown the slide content commits to.
+ */
+declare const PRESENTATION_EDITOR_ACTIONS: EditorAction[];
+/**
+ * Normalize the `Editor`'s markdown output to the *line-based* paragraph model
+ * the slide content commits to. The editor emits a blank line (`\n\n`) between
+ * `<p>` blocks, but `splitParagraphs` (and the dark-slide pptx writer) treat a
+ * single `\n` as one paragraph / build unit, and a blank interior line as its
+ * own (phantom) build. Collapsing runs of newlines to a single `\n` keeps
+ * "by paragraph" reveals and per-paragraph pptx builds correct — bullets are
+ * already one-per-`\n`, so they're unaffected. The round-trip invariant
+ * (`content → Editor → normalize → content` preserves the `\n` paragraph count)
+ * is covered by a unit test.
+ */
+declare function normalizeSlideMarkdown(md: string): string;
+
 interface ImageElementRendererProps {
     element: ImageElement;
 }
@@ -647,4 +673,4 @@ type ChartKind = "bar" | "line" | "pie" | "area" | "scatter";
 type Option = Record<string, unknown>;
 declare function chartStarterOption(kind: ChartKind): Option;
 
-export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };
+export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PRESENTATION_EDITOR_ACTIONS, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, normalizeSlideMarkdown, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };

package/dist/index.js

@@ -2,8 +2,8 @@ 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 { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Switch, Textarea } from '@particle-academy/react-fancy';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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';
 
 // src/theme/default-theme.ts
 var defaultTheme = {
@@ -268,6 +268,18 @@ var BUILD_KEYFRAMES = `
     }
 }
 `;
+
+// src/components/elements/TextElement/editor-preset.ts
+var PRESENTATION_EDITOR_ACTIONS = [
+  { icon: "B", label: "Bold", command: "bold" },
+  { icon: "I", label: "Italic", command: "italic" },
+  { icon: "H", label: "Heading", command: "formatBlock", commandArg: "<h2>" },
+  { icon: "P", label: "Paragraph", command: "formatBlock", commandArg: "<p>" },
+  { icon: "\u2022", label: "Bullet list", command: "insertUnorderedList" }
+];
+function normalizeSlideMarkdown(md) {
+  return md.replace(/\r\n/g, "\n").replace(/\n{2,}/g, "\n").replace(/[ \t]+$/gm, "").trim();
+}
 function TextElementRenderer({
   element,
   theme,
@@ -306,19 +318,58 @@ function TextElementRenderer({
     overflow: "hidden"
   };
   if (editing && selected) {
-    return /* @__PURE__ */ jsx(
-      "textarea",
+    const fontPx = Math.round((style.fontSize ?? 28) * scale);
+    const lh = style.lineHeight ?? 1.4;
+    const editScope = scopeId;
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        value: element.content,
-        onChange: (e) => onContentChange?.(e.target.value),
+        "data-fs-edit-scope": editScope,
         style: {
-          ...css,
-          whiteSpace: "pre-wrap",
-          resize: "none",
-          border: "none",
+          width: "100%",
+          height: "100%",
           pointerEvents: "auto",
-          cursor: "text"
-        }
+          cursor: "text",
+          textAlign: style.align ?? "left",
+          color: style.color ?? t.colors?.text,
+          fontFamily: style.fontFamily ?? t.fonts?.body
+        },
+        onPointerDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("style", { children: `
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor] {
+                        border: none; background: transparent; border-radius: 0;
+                        height: 100%; display: flex; flex-direction: column; overflow: hidden;
+                    }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-toolbar] {
+                        background: rgba(244,244,245,0.85); border-radius: 6px 6px 0 0;
+                        padding: 2px 4px;
+                    }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] {
+                        flex: 1; min-height: 0; padding: 4px 2px; overflow: auto;
+                        font-size: ${fontPx}px; line-height: ${lh};
+                    }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] :is(p, ul, ol, li) { font-size: inherit; margin: 0; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] :where(p, li) + :where(p, li, ul, ol) { margin-top: 0.4em; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] h1 { font-size: 1.6em; font-weight: 700; margin: 0; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] h2 { font-size: 1.35em; font-weight: 700; margin: 0; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] h3 { font-size: 1.15em; font-weight: 600; margin: 0; }
+                ` }),
+          /* @__PURE__ */ jsxs(
+            Editor,
+            {
+              value: element.content,
+              onChange: (md) => onContentChange?.(normalizeSlideMarkdown(md)),
+              outputFormat: "markdown",
+              lineSpacing: lh,
+              children: [
+                /* @__PURE__ */ jsx(Editor.Toolbar, { actions: PRESENTATION_EDITOR_ACTIONS }),
+                /* @__PURE__ */ jsx(Editor.Content, {})
+              ]
+            },
+            element.id
+          )
+        ]
       }
     );
   }
@@ -1948,10 +1999,10 @@ function EditorToolbar({
     /* @__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" }) }) })
   ] });
 }
-function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetAnimation, onSetElementAnimation }) {
+function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetLayout, onSetAnimation, onSetElementAnimation }) {
   if (!element) {
     if (slide) {
-      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground, onSetElementAnimation });
+      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground, onSetLayout, onSetElementAnimation });
     }
     return /* @__PURE__ */ jsxs("div", { className: "fs-inspector flex h-full flex-col border-l border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900", children: [
       /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Inspector" }),
@@ -1988,10 +2039,26 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
     ] }) })
   ] });
 }
+var SLIDE_LAYOUTS = [
+  { value: "blank", label: "Blank" },
+  { value: "title", label: "Title" },
+  { value: "title-content", label: "Title + content" },
+  { value: "two-column", label: "Two column" },
+  { value: "section-divider", label: "Section divider" },
+  { value: "image-text", label: "Image + text" },
+  { value: "text-image", label: "Text + image" },
+  { value: "quote", label: "Quote" }
+];
+function backgroundMode(bg) {
+  if (bg?.gradient) return "gradient";
+  if (bg?.image) return "image";
+  return "color";
+}
 function SlideSettings({
   slide,
   onSetTransition,
   onSetBackground,
+  onSetLayout,
   onSetElementAnimation
 }) {
   const transition = slide.transition;
@@ -2000,6 +2067,7 @@ function SlideSettings({
     const merged = { kind, duration: transition?.duration, direction: transition?.direction, ...next };
     onSetTransition?.(merged.kind === "none" ? { kind: "none" } : merged);
   };
+  const bgMode = backgroundMode(slide.background);
   return /* @__PURE__ */ jsxs("div", { className: "fs-inspector flex h-full w-full flex-col border-l border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "!font-mono !uppercase !tracking-wider !text-zinc-500", children: "slide" }),
@@ -2009,6 +2077,19 @@ function SlideSettings({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
+      onSetLayout && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mb-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Layout" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "Preset",
+            list: SLIDE_LAYOUTS,
+            value: slide.layout ?? "blank",
+            onValueChange: (v) => onSetLayout(v)
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "The layout hint the deck commits to \u2014 carried through to the pptx export's slide layout." })
+      ] }) }),
       /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Transition" }),
         /* @__PURE__ */ jsx(
@@ -2052,13 +2133,63 @@ function SlideSettings({
       ] }) }),
       onSetBackground && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Background" }),
-        /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "Type",
+            list: [
+              { value: "color", label: "Solid color" },
+              { value: "gradient", label: "Gradient" },
+              { value: "image", label: "Image" }
+            ],
+            value: bgMode,
+            onValueChange: (v) => {
+              if (v === "color") onSetBackground({ color: slide.background?.color ?? "#ffffff" });
+              else if (v === "gradient") onSetBackground({ gradient: slide.background?.gradient ?? "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)" });
+              else onSetBackground({ image: slide.background?.image ?? "", imageFit: slide.background?.imageFit ?? "cover", color: slide.background?.color });
+            }
+          }
+        ),
+        bgMode === "color" && /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(
           ColorPicker,
           {
             value: slide.background?.color ?? "#ffffff",
-            onChange: (c) => onSetBackground({ ...slide.background, color: c })
+            onChange: (c) => onSetBackground({ color: c })
+          }
+        ) }),
+        bgMode === "gradient" && /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: "CSS gradient",
+            value: slide.background?.gradient ?? "",
+            onValueChange: (v) => onSetBackground({ gradient: v }),
+            rows: 2
           }
-        ) })
+        ),
+        bgMode === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              label: "Image URL",
+              value: slide.background?.image ?? "",
+              onValueChange: (v) => onSetBackground({ ...slide.background, image: v }),
+              rows: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Fit",
+              list: [
+                { value: "cover", label: "Cover" },
+                { value: "contain", label: "Contain" },
+                { value: "fill", label: "Fill (stretch)" }
+              ],
+              value: slide.background?.imageFit ?? "cover",
+              onValueChange: (v) => onSetBackground({ ...slide.background, imageFit: v })
+            }
+          )
+        ] })
       ] }) }),
       onSetElementAnimation && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(BuildOrderList, { slide, onSetElementAnimation }) })
     ] })
@@ -2299,6 +2430,24 @@ function TextStyleControls({ element, onPatch }) {
         onValueChange: (v) => setStyle({ align: v })
       }
     ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Vertical align",
+        list: [
+          { value: "top", label: "Top" },
+          { value: "middle", label: "Middle" },
+          { value: "bottom", label: "Bottom" }
+        ],
+        value: s.verticalAlign ?? "top",
+        onValueChange: (v) => setStyle({ verticalAlign: v })
+      }
+    ),
+    /* @__PURE__ */ jsx(Input, { label: "Line height", type: "number", value: String(s.lineHeight ?? 1.4), onChange: (e) => setStyle({ lineHeight: parseFloat(e.target.value) || 1.4 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx(Switch, { label: "Italic", checked: !!s.italic, onCheckedChange: (v) => setStyle({ italic: v }) }),
+      /* @__PURE__ */ jsx(Switch, { label: "Underline", checked: !!s.underline, onCheckedChange: (v) => setStyle({ underline: v }) })
+    ] }),
     /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(ColorPicker, { value: s.color ?? "#0f172a", onChange: (c) => setStyle({ color: c }) }) })
   ] });
 }
@@ -2381,6 +2530,7 @@ function ShapeStyleControls({ element, onPatch }) {
     /* @__PURE__ */ jsx(FieldLabel, { label: "Fill", children: /* @__PURE__ */ jsx(ColorPicker, { value: element.fill ?? "#ffffff", onChange: (c) => onPatch({ fill: c }) }) }),
     /* @__PURE__ */ jsx(FieldLabel, { label: "Stroke", children: /* @__PURE__ */ jsx(ColorPicker, { value: element.stroke ?? "#0f172a", onChange: (c) => onPatch({ stroke: c }) }) }),
     /* @__PURE__ */ jsx(Slider, { label: "Stroke width", value: element.strokeWidth ?? 2, onValueChange: (v) => onPatch({ strokeWidth: Number(v) }), min: 0, max: 20, step: 0.5 }),
+    /* @__PURE__ */ jsx(Switch, { label: "Dashed stroke", checked: !!element.dashed, onCheckedChange: (v) => onPatch({ dashed: v }) }),
     (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 })
   ] });
 }
@@ -2400,7 +2550,8 @@ function CodeStyleControls({ element, onPatch }) {
         value: element.codeTheme ?? "auto",
         onValueChange: (v) => onPatch({ codeTheme: v })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Switch, { label: "Line numbers", checked: element.lineNumbers ?? true, onCheckedChange: (v) => onPatch({ lineNumbers: v }) })
   ] });
 }
 function ChartStyleControls({ element, onPatch }) {
@@ -2881,7 +3032,7 @@ function DeckEditor({
                     slide,
                     theme: deck.theme,
                     editing: true,
-                    onElementContentChange: (eid, content) => ops.updateElement(slide.id, eid, { content }),
+                    onElementContentChange: (eid, content) => ops.updateElement(slide.id, eid, { content, format: "markdown" }),
                     onElementSelect: setElementIdSelected,
                     selectedElementId: elementIdSelected,
                     onElementMove: (eid, x, y) => ops.moveElement(slide.id, eid, x, y),
@@ -2907,6 +3058,7 @@ function DeckEditor({
               onLockToggle: (locked) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, { locked }),
               onSetTransition: (transition) => slide && ops.setTransition(slide.id, transition),
               onSetBackground: (background) => slide && ops.setBackground(slide.id, background),
+              onSetLayout: (layout) => slide && ops.setLayout(slide.id, layout),
               onSetAnimation: (animation) => slide && elementIdSelected && ops.setAnimation(slide.id, elementIdSelected, animation),
               onSetElementAnimation: (eid, animation) => slide && ops.setAnimation(slide.id, eid, animation)
             }
@@ -2918,6 +3070,6 @@ function DeckEditor({
   );
 }
 
-export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useSlideKeyboard, visibleElementIds, vividTheme };
+export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PRESENTATION_EDITOR_ACTIONS, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, normalizeSlideMarkdown, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useSlideKeyboard, visibleElementIds, vividTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map