@particle-academy/fancy-slides 0.7.0 → 0.9.0

package/dist/index.cjs

@@ -940,7 +940,18 @@ function SlideElementHost({
     touchAction: canMove ? "none" : void 0,
     ...buildAnimation ? buildEnterStyle(buildAnimation, buildDelay) : null
   };
-  const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal }) ?? renderElement?.(element, slideWidthPx) ?? elementPlaceholder(element);
+  const rendered = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal }) ?? renderElement?.(element, slideWidthPx) ?? elementPlaceholder(element);
+  const inner = element.href && !editing ? /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: element.href,
+      target: "_blank",
+      rel: "noreferrer",
+      style: { display: "block", width: "100%", height: "100%", color: "inherit", textDecoration: "inherit" },
+      "data-fancy-slides-href": "",
+      children: rendered
+    }
+  ) : rendered;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2250,10 +2261,10 @@ function EditorToolbar({
     /* @__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" }) }) })
   ] });
 }
-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__ */ jsxRuntime.jsx(SlideSettings, { slide, onSetTransition, onSetBackground, onSetElementAnimation });
+      return /* @__PURE__ */ jsxRuntime.jsx(SlideSettings, { slide, onSetTransition, onSetBackground, onSetLayout, onSetElementAnimation });
     }
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactFancy.Heading, { as: "h3", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Inspector" }),
@@ -2284,16 +2295,32 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
       /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Tabs.Panels, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "style", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(StyleSection, { element, onPatch }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "build", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(AnimateSection, { animation: element.animation, onSetAnimation, isText: element.type === "text" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "layout", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(LayoutSection, { element, onPatch }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "layout", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(LayoutSection, { element, onPatch, siblings: slide?.elements ?? [] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "advanced", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(AdvancedSection, { element, onPatch }) }) })
       ] })
     ] }) })
   ] });
 }
+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;
@@ -2302,6 +2329,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Heading, { as: "h3", size: "xs", className: "!font-mono !uppercase !tracking-wider !text-zinc-500", children: "slide" }),
@@ -2311,6 +2339,19 @@ function SlideSettings({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
+      onSetLayout && /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "mb-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Layout" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactFancy.Select,
+          {
+            label: "Preset",
+            list: SLIDE_LAYOUTS,
+            value: slide.layout ?? "blank",
+            onValueChange: (v) => onSetLayout(v)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.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__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Transition" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2354,13 +2395,63 @@ function SlideSettings({
       ] }) }),
       onSetBackground && /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Background" }),
-        /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactFancy.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__ */ jsxRuntime.jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsxRuntime.jsx(
           reactFancy.ColorPicker,
           {
             value: slide.background?.color ?? "#ffffff",
-            onChange: (c) => onSetBackground({ ...slide.background, color: c })
+            onChange: (c) => onSetBackground({ color: c })
+          }
+        ) }),
+        bgMode === "gradient" && /* @__PURE__ */ jsxRuntime.jsx(
+          reactFancy.Textarea,
+          {
+            label: "CSS gradient",
+            value: slide.background?.gradient ?? "",
+            onValueChange: (v) => onSetBackground({ gradient: v }),
+            rows: 2
           }
-        ) })
+        ),
+        bgMode === "image" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactFancy.Textarea,
+            {
+              label: "Image URL",
+              value: slide.background?.image ?? "",
+              onValueChange: (v) => onSetBackground({ ...slide.background, image: v }),
+              rows: 2
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactFancy.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__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(BuildOrderList, { slide, onSetElementAnimation }) })
     ] })
@@ -2409,7 +2500,10 @@ function buildLabel(element) {
   }
   return `${element.type} #${element.id.slice(-6)}`;
 }
-function LayoutSection({ element, onPatch }) {
+function LayoutSection({ element, onPatch, siblings }) {
+  const zs = siblings.map((e) => e.z ?? 0);
+  const bringToFront = () => onPatch({ z: (zs.length ? Math.max(...zs) : 0) + 1 });
+  const sendToBack = () => onPatch({ z: (zs.length ? Math.min(...zs) : 0) - 1 });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Input, { label: "X", type: "number", value: String(roundFrac(element.x)), onChange: (e) => onPatch({ x: clamp2(parseFloat(e.target.value), 0, 1) }) }),
@@ -2419,7 +2513,26 @@ function LayoutSection({ element, onPatch }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Separator, {}),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Slider, { label: "Rotation", value: element.rotation ?? 0, onValueChange: (v) => onPatch({ rotation: Number(v) }), min: -180, max: 180 }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Input, { label: "Z-index", type: "number", value: String(element.z ?? 0), onChange: (e) => onPatch({ z: parseInt(e.target.value, 10) || 0 }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Input, { label: "Z-index", type: "number", value: String(element.z ?? 0), onChange: (e) => onPatch({ z: parseInt(e.target.value, 10) || 0 }), className: "flex-1" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { size: "sm", variant: "ghost", onClick: bringToFront, "aria-label": "Bring to front", children: "Front" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Action, { size: "sm", variant: "ghost", onClick: sendToBack, "aria-label": "Send to back", children: "Back" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Separator, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactFancy.Input,
+      {
+        label: "Link (href)",
+        value: element.href ?? "",
+        placeholder: "https://\u2026",
+        onChange: (e) => onPatch({ href: e.target.value || void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Text, { size: "xs", className: "!text-zinc-500", children: [
+      "Makes the whole element a click target in the viewer (opens a new tab) and exports as a pptx hyperlink. For links inside text, use markdown ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { children: "[label](url)" }),
+      "."
+    ] })
   ] });
 }
 function AdvancedSection({ element, onPatch }) {
@@ -2601,6 +2714,24 @@ function TextStyleControls({ element, onPatch }) {
         onValueChange: (v) => setStyle({ align: v })
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactFancy.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__ */ jsxRuntime.jsx(reactFancy.Input, { label: "Line height", type: "number", value: String(s.lineHeight ?? 1.4), onChange: (e) => setStyle({ lineHeight: parseFloat(e.target.value) || 1.4 }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Switch, { label: "Italic", checked: !!s.italic, onCheckedChange: (v) => setStyle({ italic: v }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Switch, { label: "Underline", checked: !!s.underline, onCheckedChange: (v) => setStyle({ underline: v }) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ColorPicker, { value: s.color ?? "#0f172a", onChange: (c) => setStyle({ color: c }) }) })
   ] });
 }
@@ -2683,6 +2814,7 @@ function ShapeStyleControls({ element, onPatch }) {
     /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: "Fill", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ColorPicker, { value: element.fill ?? "#ffffff", onChange: (c) => onPatch({ fill: c }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: "Stroke", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ColorPicker, { value: element.stroke ?? "#0f172a", onChange: (c) => onPatch({ stroke: c }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Slider, { label: "Stroke width", value: element.strokeWidth ?? 2, onValueChange: (v) => onPatch({ strokeWidth: Number(v) }), min: 0, max: 20, step: 0.5 }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Switch, { label: "Dashed stroke", checked: !!element.dashed, onCheckedChange: (v) => onPatch({ dashed: v }) }),
     (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 })
   ] });
 }
@@ -2702,7 +2834,8 @@ function CodeStyleControls({ element, onPatch }) {
         value: element.codeTheme ?? "auto",
         onValueChange: (v) => onPatch({ codeTheme: v })
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Switch, { label: "Line numbers", checked: element.lineNumbers ?? true, onCheckedChange: (v) => onPatch({ lineNumbers: v }) })
   ] });
 }
 function ChartStyleControls({ element, onPatch }) {
@@ -3209,6 +3342,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)
             }
@@ -3220,12 +3354,16 @@ function DeckEditor({
   );
 }
 
+// src/types.ts
+var SCHEMA_VERSION = 1;
+
 exports.DeckEditor = DeckEditor;
 exports.EditorToolbar = EditorToolbar;
 exports.ElementInspector = ElementInspector;
 exports.ImageElementRenderer = ImageElementRenderer;
 exports.PRESENTATION_EDITOR_ACTIONS = PRESENTATION_EDITOR_ACTIONS;
 exports.PresenterView = PresenterView;
+exports.SCHEMA_VERSION = SCHEMA_VERSION;
 exports.ShapeElementRenderer = ShapeElementRenderer;
 exports.Slide = Slide;
 exports.SlideRail = SlideRail;