@particle-academy/fancy-slides 0.8.0 → 0.10.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",
     {
@@ -1782,6 +1793,7 @@ function useDeckState({ value, onChange, onOp }) {
       apply,
       setTitle: (title) => apply({ kind: "deck_set_title", title }),
       applyTheme: (theme) => apply({ kind: "deck_apply_theme", theme }),
+      setDeck: (deck) => apply({ kind: "deck_set", deck }),
       addSlide: (index, partial) => {
         const id = partial?.id ?? slideId();
         const slide = {
@@ -1836,6 +1848,8 @@ function reduce(deck, op) {
       return { ...deck, title: op.title };
     case "deck_apply_theme":
       return { ...deck, theme: op.theme };
+    case "deck_set":
+      return op.deck;
     case "slide_add": {
       const slides = [...deck.slides];
       slides.splice(Math.max(0, Math.min(slides.length, op.index)), 0, op.slide);
@@ -2284,7 +2298,7 @@ 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 }) }) })
       ] })
     ] }) })
@@ -2489,7 +2503,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) }) }),
@@ -2499,7 +2516,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 }) {
@@ -3321,12 +3357,84 @@ function DeckEditor({
   );
 }
 
+// src/types.ts
+var SCHEMA_VERSION = 1;
+
+// src/utils/serialize.ts
+var ELEMENT_TYPES = ["text", "image", "chart", "code", "table", "shape", "embed"];
+function validateDeck(deck) {
+  const errors = [];
+  const d = deck;
+  if (!d || typeof d !== "object") {
+    return { ok: false, errors: ["deck is not an object"] };
+  }
+  if (typeof d.id !== "string" || !d.id) errors.push("deck.id must be a non-empty string");
+  if (typeof d.title !== "string") errors.push("deck.title must be a string");
+  if (!d.theme || typeof d.theme !== "object") errors.push("deck.theme must be an object");
+  if (!Array.isArray(d.slides)) {
+    errors.push("deck.slides must be an array");
+    return { ok: errors.length === 0, errors };
+  }
+  d.slides.forEach((slide, si) => {
+    if (!slide || typeof slide !== "object") {
+      errors.push(`slides[${si}] is not an object`);
+      return;
+    }
+    if (typeof slide.id !== "string" || !slide.id) errors.push(`slides[${si}].id must be a non-empty string`);
+    if (!Array.isArray(slide.elements)) {
+      errors.push(`slides[${si}].elements must be an array`);
+      return;
+    }
+    slide.elements.forEach((el, ei) => {
+      const where = `slides[${si}].elements[${ei}]`;
+      if (!el || typeof el !== "object") {
+        errors.push(`${where} is not an object`);
+        return;
+      }
+      if (typeof el.id !== "string" || !el.id) errors.push(`${where}.id must be a non-empty string`);
+      if (!ELEMENT_TYPES.includes(el.type)) errors.push(`${where}.type "${el.type}" is not a known element type`);
+      for (const k of ["x", "y", "w", "h"]) {
+        const v = el[k];
+        if (typeof v !== "number" || v < 0 || v > 1) errors.push(`${where}.${k} must be a number in 0..1`);
+      }
+    });
+  });
+  return { ok: errors.length === 0, errors };
+}
+function migrateDeck(deck) {
+  let d = deck;
+  d.version ?? 1;
+  return d.version === SCHEMA_VERSION ? d : { ...d, version: SCHEMA_VERSION };
+}
+function serializeDeck(deck, pretty = false) {
+  const stamped = deck.version === SCHEMA_VERSION ? deck : { ...deck, version: SCHEMA_VERSION };
+  return JSON.stringify(stamped, null, pretty ? 2 : void 0);
+}
+function parseDeck(input) {
+  let raw;
+  if (typeof input === "string") {
+    try {
+      raw = JSON.parse(input);
+    } catch (e) {
+      throw new Error(`parseDeck: invalid JSON \u2014 ${e.message}`);
+    }
+  } else {
+    raw = input;
+  }
+  const result = validateDeck(raw);
+  if (!result.ok) {
+    throw new Error(`parseDeck: invalid deck \u2014 ${result.errors.join("; ")}`);
+  }
+  return migrateDeck(raw);
+}
+
 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;
@@ -3345,11 +3453,14 @@ exports.defaultTheme = defaultTheme;
 exports.defineTheme = defineTheme;
 exports.elementId = elementId;
 exports.isByParagraph = isByParagraph;
+exports.migrateDeck = migrateDeck;
 exports.nextId = nextId;
 exports.normalizeSlideMarkdown = normalizeSlideMarkdown;
 exports.paragraphReveals = paragraphReveals;
+exports.parseDeck = parseDeck;
 exports.reduceDeck = reduce;
 exports.resolveTheme = resolveTheme;
+exports.serializeDeck = serializeDeck;
 exports.slideId = slideId;
 exports.splitParagraphs = splitParagraphs;
 exports.stepDelays = stepDelays;
@@ -3359,6 +3470,7 @@ exports.useIsDarkSlide = useIsDarkSlide;
 exports.useSlideContext = useSlideContext;
 exports.useSlideKeyboard = useSlideKeyboard;
 exports.useSlideTheme = useSlideTheme;
+exports.validateDeck = validateDeck;
 exports.visibleElementIds = visibleElementIds;
 exports.vividTheme = vividTheme;
 //# sourceMappingURL=index.cjs.map