@veztraa/report-designer 0.1.4 → 0.2.0

package/README.md

@@ -1,26 +1,29 @@
 # @veztraa/report-designer
 
+**[Documentation & Live Demo →](https://report-forge.veztraa.com)**
+
 Embeddable React PDF report designer component for ReportForge. Drop `<ReportDesigner />` into any React app and give your users a full visual report builder — drag-and-drop canvas, live PDF preview, undo/redo, dark mode, and more.
 
+Styles auto-inject on mount — no CSS import required.
+
 ## Installation
 
 ```bash
-npm install @veztraa/report-designer @veztraa/report-renderer
+npm install @veztraa/report-designer
 ```
 
 ## Usage
 
 ```tsx
 import { ReportDesigner } from "@veztraa/report-designer";
-import "@veztraa/report-designer/dist/style.css";
+// No CSS import needed — styles inject automatically.
 
 export default function App() {
   return (
     <div style={{ height: "100vh" }}>
       <ReportDesigner
         theme="light"
-        accentColor="#6c63ff"
-        onChange={(template) => console.log(template)}
+        onTemplateChange={(template) => console.log(template)}
       />
     </div>
   );
@@ -29,68 +32,42 @@ export default function App() {
 
 > The designer fills its parent container — set a `height` on the parent (e.g. `100vh` or a fixed px value).
 
-## Props
-
-| Prop | Type | Description |
-|---|---|---|
-| `report` | `Template` | Load a template into the designer. Updates when the prop changes. |
-| `data` | `string \| object` | Sample data for `{{field}}` preview bindings. |
-| `onDataChange` | `(data: string) => void` | Called when the user edits data inside the designer. |
-| `theme` | `"light" \| "dark"` | Controlled color theme. |
-| `onThemeChange` | `(theme: string) => void` | Called when the user clicks the theme toggle. |
-| `accentColor` | `string` | Primary accent color (6-digit hex, e.g. `"#6c63ff"`). |
-| `defaultZoom` | `number` | Initial zoom level (0.25–2.0). Default: `1`. |
-| `toolbar` | `ToolbarConfig` | Show/hide or override toolbar actions. |
-| `elements` | `ElementsConfig` | Whitelist or blacklist element types in the palette. |
-| `style` | `CSSProperties` | Inline styles on the root container. |
-| `className` | `string` | Extra CSS classes on the root container. |
-
 ## Controlled Template
 
-```tsx
-const [template, setTemplate] = useState(initialTemplate);
-
-<ReportDesigner
-  report={template}
-  onChange={setTemplate}
-/>
-```
-
-## Toolbar Customization
+Load an existing template and receive updates whenever the user makes a change:
 
 ```tsx
-<ReportDesigner
-  toolbar={{
-    actions: {
-      save: {
-        label: "Save",
-        onClick: () => saveToServer(template),
-      },
-      load: false,  // hide the Load button
-    },
-  }}
-/>
-```
+import { ReportDesigner } from "@veztraa/report-designer";
+import type { Template } from "@veztraa/report-core";
 
-## Element Palette Control
+export default function ReportEditor({ saved }: { saved: Template }) {
+  const handleSave = async (template: Template) => {
+    await fetch("/api/templates/save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(template),
+    });
+  };
 
-```tsx
-// Only show specific elements
-<ReportDesigner elements={{ allow: ["text", "table", "image"] }} />
-
-// Hide specific elements
-<ReportDesigner elements={{ deny: ["chart", "barcode", "qrcode"] }} />
+  return (
+    <div style={{ height: "100vh" }}>
+      <ReportDesigner
+        initialTemplate={saved}
+        theme="light"
+        onTemplateChange={handleSave}
+      />
+    </div>
+  );
+}
 ```
 
-## Generating the PDF
-
-```tsx
-import { render } from "@veztraa/report-renderer";
+## Props
 
-const pdf = await render(template, data);
-const blob = new Blob([pdf], { type: "application/pdf" });
-window.open(URL.createObjectURL(blob));
-```
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `initialTemplate` | `Template` | blank A4 | Pre-load an existing template into the designer |
+| `theme` | `"light" \| "dark"` | `"light"` | Color scheme — flips all CSS custom properties |
+| `onTemplateChange` | `(t: Template) => void` | — | Called on every element add / move / resize / property change |
 
 ## Features
 
@@ -98,13 +75,29 @@ window.open(URL.createObjectURL(blob));
 - Snap-to-grid with alignment guides
 - Resize handles on all 8 corners/edges
 - 50-step undo/redo
-- Live PDF preview panel
+- Live PDF preview panel (debounced 400ms)
 - Dark / light theme
 - Header, body, footer sections
 - Layers panel with lock/hide/reorder
 - Data panel for `{{field}}` preview bindings
-- Keyboard shortcuts: `Del` delete, `Ctrl+Z` undo, `Ctrl+D` duplicate, arrow nudge
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|---|---|
+| `Del` / `Backspace` | Delete selected element |
+| `Ctrl+Z` | Undo |
+| `Ctrl+Y` | Redo |
+| `Ctrl+D` | Duplicate selected element |
+| Arrow keys | Nudge 1px |
+| `Shift+Arrows` | Nudge 10px |
+| `Ctrl+Scroll` | Zoom in / out |
+| `Space+Drag` | Pan canvas |
+
+## Template Format
+
+See [`@veztraa/report-core`](https://www.npmjs.com/package/@veztraa/report-core) for the full template schema and expression syntax.
 
 ## License
 
-MIT © [Veztraa Innovations](https://veztraa.com)
+MIT © [Veztraa Solutions](https://www.veztraa.com)