@particle-academy/fancy-slides 0.1.3

package/README.md

@@ -0,0 +1,99 @@
+# @particle-academy/fancy-slides
+
+Presentation editor + web viewer for the Fancy UI set. Google-Slides-style deck
+authoring with a JSON-friendly schema, full keyboard-driven viewer, and an agent
+bridge so LLMs can compose decks directly.
+
+## Install
+
+```bash
+npm install @particle-academy/fancy-slides @particle-academy/react-fancy
+```
+
+Optional peers (only needed if your decks include those element types):
+
+```bash
+npm install @particle-academy/fancy-echarts   # ChartElement
+npm install @particle-academy/fancy-code      # CodeElement
+```
+
+## Quickstart — viewer
+
+```tsx
+import { SlideViewer } from "@particle-academy/fancy-slides";
+import "@particle-academy/fancy-slides/styles.css";
+
+const deck = {
+    id: "demo",
+    title: "Welcome",
+    slides: [
+        {
+            id: "s1",
+            layout: "title",
+            elements: [
+                {
+                    id: "e1",
+                    type: "text",
+                    x: 0.1, y: 0.4, w: 0.8, h: 0.2,
+                    content: "Welcome to Fancy Slides",
+                    style: { fontSize: 48, weight: "bold", align: "center" },
+                },
+            ],
+        },
+    ],
+    theme: { name: "default" },
+};
+
+<SlideViewer deck={deck} />
+```
+
+## Quickstart — editor
+
+```tsx
+import { DeckEditor } from "@particle-academy/fancy-slides";
+
+function App() {
+    const [deck, setDeck] = useState(initialDeck);
+    return <DeckEditor value={deck} onChange={setDeck} />;
+}
+```
+
+## Human+ contract
+
+`fancy-slides` is designed around the Human+ contract: humans and agents share
+the same surface. The deck is plain JSON — easy for an LLM to emit. Every
+slide and element has a stable `id`. State is controlled. An agent bridge
+exposes MCP tools (`deck_add_slide`, `slide_add_element`,
+`slide_set_layout`, `deck_apply_theme`, …) so agents drive the deck via the
+same operations a human would.
+
+See `docs/human-plus.md` for the full contract.
+
+## Element types
+
+| Type     | Renders via                                | Notes |
+|----------|--------------------------------------------|-------|
+| `text`   | inline contenteditable (or react-fancy `Editor`) | rich text, markdown |
+| `image`  | `<img>`                                    | URL or data URI |
+| `chart`  | `@particle-academy/fancy-echarts` `<EChart>` | optional peer |
+| `code`   | `@particle-academy/fancy-code` `<CodeEditor>` | optional peer |
+| `table`  | react-fancy `<Table>`                      | |
+| `shape`  | SVG primitives (rect, ellipse, line, arrow) | |
+| `embed`  | iframe                                     | for video / external |
+
+## Theme
+
+```ts
+type Theme = {
+    name: string;
+    colors: { background, text, accent, muted };
+    fonts: { heading, body, mono };
+    slideRatio: 16 / 9;
+};
+```
+
+A few built-in themes ship; consumers can register their own.
+
+## License
+
+MIT

package/dist/chart-host-VIGM3J5Q.js

@@ -0,0 +1,11 @@
+import { EChart } from '@particle-academy/fancy-echarts';
+import { jsx } from 'react/jsx-runtime';
+
+// src/registry/element-renderers/chart-host.tsx
+function ChartHost({ element }) {
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option: element.option, theme: element.chartTheme }) });
+}
+
+export { ChartHost as default };
+//# sourceMappingURL=chart-host-VIGM3J5Q.js.map
+//# sourceMappingURL=chart-host-VIGM3J5Q.js.map

package/dist/chart-host-VIGM3J5Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/chart-host.tsx"],"names":[],"mappings":";;;;AAGe,SAAR,SAAA,CAA2B,EAAE,OAAA,EAAQ,EAAoD;AAC5F,EAAA,2BACK,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAA,EAAO,QAAQ,MAAA,EAAQ,MAAA,EAAO,EACxC,QAAA,kBAAA,GAAA,CAAC,UAAO,MAAA,EAAQ,OAAA,CAAQ,QAAkD,KAAA,EAAO,OAAA,CAAQ,YAAY,CAAA,EACzG,CAAA;AAER","file":"chart-host-VIGM3J5Q.js","sourcesContent":["import { EChart } from \"@particle-academy/fancy-echarts\";\nimport type { ChartElement } from \"../../types\";\n\nexport default function ChartHost({ element }: { element: ChartElement; slideWidthPx: number }) {\n    return (\n        <div style={{ width: \"100%\", height: \"100%\" }}>\n            <EChart option={element.option as Parameters<typeof EChart>[0][\"option\"]} theme={element.chartTheme} />\n        </div>\n    );\n}\n"]}

package/dist/code-host-IYT6QDLA.js

@@ -0,0 +1,21 @@
+import { CodeEditor } from '@particle-academy/fancy-code';
+import { jsx } from 'react/jsx-runtime';
+
+// src/registry/element-renderers/code-host.tsx
+function CodeHost({ element }) {
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", overflow: "hidden", borderRadius: 8 }, children: /* @__PURE__ */ jsx(
+    CodeEditor,
+    {
+      value: element.code,
+      language: element.language ?? "javascript",
+      theme: element.codeTheme ?? "dark",
+      readOnly: true,
+      lineNumbers: element.lineNumbers ?? true,
+      children: /* @__PURE__ */ jsx(CodeEditor.Panel, {})
+    }
+  ) });
+}
+
+export { CodeHost as default };
+//# sourceMappingURL=code-host-IYT6QDLA.js.map
+//# sourceMappingURL=code-host-IYT6QDLA.js.map

package/dist/code-host-IYT6QDLA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/code-host.tsx"],"names":[],"mappings":";;;;AAGe,SAAR,QAAA,CAA0B,EAAE,OAAA,EAAQ,EAA6B;AACpE,EAAA,uBACI,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,MAAA,EAAQ,QAAA,EAAU,QAAA,EAAU,YAAA,EAAc,CAAA,EAAE,EAC7E,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,OAAO,OAAA,CAAQ,IAAA;AAAA,MACf,QAAA,EAAU,QAAQ,QAAA,IAAY,YAAA;AAAA,MAC9B,KAAA,EAAO,QAAQ,SAAA,IAAa,MAAA;AAAA,MAC5B,QAAA,EAAQ,IAAA;AAAA,MACR,WAAA,EAAa,QAAQ,WAAA,IAAe,IAAA;AAAA,MAEpC,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB;AAAA;AAAA,GACtB,EACJ,CAAA;AAER","file":"code-host-IYT6QDLA.js","sourcesContent":["import { CodeEditor } from \"@particle-academy/fancy-code\";\nimport type { CodeElement } from \"../../types\";\n\nexport default function CodeHost({ element }: { element: CodeElement }) {\n    return (\n        <div style={{ width: \"100%\", height: \"100%\", overflow: \"hidden\", borderRadius: 8 }}>\n            <CodeEditor\n                value={element.code}\n                language={element.language ?? \"javascript\"}\n                theme={element.codeTheme ?? \"dark\"}\n                readOnly\n                lineNumbers={element.lineNumbers ?? true}\n            >\n                <CodeEditor.Panel />\n            </CodeEditor>\n        </div>\n    );\n}\n"]}

package/dist/embed-host-ZECUEAOU.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/registry/element-renderers/embed-host.tsx
+function EmbedHost({ element }) {
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: element.src,
+      title: element.title ?? "Embedded content",
+      sandbox: element.sandbox ?? "allow-scripts",
+      style: { width: "100%", height: "100%", border: 0, display: "block" }
+    }
+  );
+}
+
+export { EmbedHost as default };
+//# sourceMappingURL=embed-host-ZECUEAOU.js.map
+//# sourceMappingURL=embed-host-ZECUEAOU.js.map

package/dist/embed-host-ZECUEAOU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry/element-renderers/embed-host.tsx"],"names":[],"mappings":";;;AAEe,SAAR,SAAA,CAA2B,EAAE,OAAA,EAAQ,EAA8B;AACtE,EAAA,uBACI,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACG,KAAK,OAAA,CAAQ,GAAA;AAAA,MACb,KAAA,EAAO,QAAQ,KAAA,IAAS,kBAAA;AAAA,MACxB,OAAA,EAAS,QAAQ,OAAA,IAAW,eAAA;AAAA,MAC5B,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA,EAAQ,MAAA,EAAQ,CAAA,EAAG,OAAA,EAAS,OAAA;AAAQ;AAAA,GACxE;AAER","file":"embed-host-ZECUEAOU.js","sourcesContent":["import type { EmbedElement } from \"../../types\";\n\nexport default function EmbedHost({ element }: { element: EmbedElement }) {\n    return (\n        <iframe\n            src={element.src}\n            title={element.title ?? \"Embedded content\"}\n            sandbox={element.sandbox ?? \"allow-scripts\"}\n            style={{ width: \"100%\", height: \"100%\", border: 0, display: \"block\" }}\n        />\n    );\n}\n"]}