@veztraa/report-designer 0.1.0

package/dist/panels/ComponentPalette.d.ts

@@ -0,0 +1,15 @@
+import { ReportElement } from '@veztraa/report-core';
+/** Every element type the designer can create. */
+export type ElementType = ReportElement["type"];
+/** Controls which elements a user can add from the palette. */
+export interface ElementsConfig {
+    /** Hide the entire Elements palette tab. */
+    hidden?: boolean;
+    /** Whitelist — only these types appear, in this order. */
+    include?: ElementType[];
+    /** Blacklist — hide these types from the palette. */
+    exclude?: ElementType[];
+}
+export declare function ComponentPalette({ config }?: {
+    config?: ElementsConfig;
+}): import("react").JSX.Element;

package/dist/panels/DataVariablesModal.d.ts

@@ -0,0 +1 @@
+export declare function DataVariablesModal(): import("react").JSX.Element;

package/dist/panels/DataVariablesPanel.d.ts

@@ -0,0 +1,9 @@
+export declare function JsonModal({ title, subtitle, jsonText, jsonError, onClose, onChange }: {
+    title: string;
+    subtitle?: string;
+    jsonText: string;
+    jsonError: string;
+    onClose: () => void;
+    onChange: (v: string) => void;
+}): import("react").JSX.Element;
+export declare function DataVariablesPanel(): import("react").JSX.Element;

package/dist/panels/DocumentProperties.d.ts

@@ -0,0 +1 @@
+export declare function DocumentProperties(): import("react").JSX.Element;

package/dist/panels/LayersPanel.d.ts

@@ -0,0 +1 @@
+export declare function LayersPanel(): import("react").JSX.Element;

package/dist/panels/LeftSidebar.d.ts

@@ -0,0 +1,11 @@
+import { ElementsConfig } from './ComponentPalette';
+import { SidebarTab } from '../store/useReportStore';
+declare const ALL_TABS: {
+    id: SidebarTab;
+    label: string;
+    icon: React.ReactNode;
+}[];
+export { ALL_TABS };
+export declare function LeftSidebar({ elements }?: {
+    elements?: ElementsConfig;
+}): import("react").JSX.Element;

package/dist/panels/PropertiesPanel.d.ts

@@ -0,0 +1 @@
+export declare function PropertiesPanel(): import("react").JSX.Element;

package/dist/preview/PdfPreview.d.ts

@@ -0,0 +1,3 @@
+export declare function PdfPreview({ onClose }?: {
+    onClose?: () => void;
+}): import("react").JSX.Element;

package/dist/store/useAlignGuides.d.ts

@@ -0,0 +1,18 @@
+export interface AlignGuide {
+    axis: "h" | "v";
+    pos: number;
+}
+export interface ElBounds {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface GuidesStore {
+    guides: AlignGuide[];
+    elBounds: ElBounds | null;
+    set: (guides: AlignGuide[], elBounds: ElBounds) => void;
+    clear: () => void;
+}
+export declare const useAlignGuides: import('zustand').UseBoundStore<import('zustand').StoreApi<GuidesStore>>;
+export {};

package/dist/store/useReportStore.d.ts

@@ -0,0 +1,45 @@
+import { Template, ReportElement } from '@veztraa/report-core';
+export type SidebarTab = "components" | "layers" | "data" | "document";
+interface ReportStore {
+    template: Template;
+    selectedId: string | null;
+    history: Template[];
+    future: Template[];
+    zoom: number;
+    activeSection: "header" | "body" | "footer";
+    sidebarTab: SidebarTab;
+    showPreview: boolean;
+    showDataPanel: boolean;
+    previewData: string;
+    fieldTypes: Record<string, string>;
+    theme: "dark" | "light";
+    selectElement: (id: string | null) => void;
+    toggleTheme: () => void;
+    setTheme: (theme: "dark" | "light") => void;
+    addElement: (el: ReportElement) => void;
+    updateElement: (id: string, patch: Partial<ReportElement>) => void;
+    deleteSelected: () => void;
+    duplicateSelected: () => void;
+    undo: () => void;
+    redo: () => void;
+    setTemplateName: (name: string) => void;
+    loadTemplate: (t: Template) => void;
+    getTemplate: () => Template;
+    updatePage: (patch: Partial<NonNullable<Template["page"]>>) => void;
+    updateMargin: (side: "top" | "right" | "bottom" | "left", v: number) => void;
+    updateHeaderHeight: (h: number) => void;
+    updateFooterHeight: (h: number) => void;
+    updateHeaderEnabled: (v: boolean) => void;
+    updateFooterEnabled: (v: boolean) => void;
+    updateHeaderDisplay: (v: string) => void;
+    updateFooterDisplay: (v: string) => void;
+    setZoom: (z: number) => void;
+    setActiveSection: (s: "header" | "body" | "footer") => void;
+    setSidebarTab: (tab: SidebarTab) => void;
+    togglePreview: () => void;
+    toggleDataPanel: () => void;
+    setPreviewData: (data: string) => void;
+    setFieldTypes: (types: Record<string, string>) => void;
+}
+export declare const useReportStore: import('zustand').UseBoundStore<import('zustand').StoreApi<ReportStore>>;
+export {};

package/dist/templates.d.ts

@@ -0,0 +1,19 @@
+import { Template } from '@veztraa/report-core';
+export declare const BLANK_TEMPLATE: Template;
+export declare const BLANK_DATA = "{}";
+export declare const INVOICE_TEMPLATE: Template;
+export declare const INVOICE_DATA: string;
+export declare const ALL_ELEMENTS_TEMPLATE: Template;
+export declare const ALL_ELEMENTS_DATA: string;
+export declare const TABLE_CLEAN_TEMPLATE: Template;
+export declare const TABLE_CLEAN_DATA: string;
+export declare const TABLE_STRIPED_TEMPLATE: Template;
+export declare const TABLE_STRIPED_DATA: string;
+export declare const TABLE_FINANCIAL_TEMPLATE: Template;
+export declare const TABLE_FINANCIAL_DATA: string;
+export declare const CHART_BAR_TEMPLATE: Template;
+export declare const CHART_BAR_DATA: string;
+export declare const CHART_LINE_TEMPLATE: Template;
+export declare const CHART_LINE_DATA: string;
+export declare const CHART_PIE_TEMPLATE: Template;
+export declare const CHART_PIE_DATA: string;

package/dist/toolbar/Toolbar.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ElementsConfig } from '../panels/ComponentPalette';
+import { Template } from '@veztraa/report-core';
+/** A host-supplied custom button injected into the toolbar. */
+export interface ToolbarAction {
+    /** Unique identifier for the action button. */
+    id: string;
+    /** Button text label (shown next to the icon). */
+    label?: string;
+    /** Tooltip text shown on hover. */
+    title?: string;
+    /** Icon node (e.g. a Lucide icon). */
+    icon?: ReactNode;
+    /** Called when the button is clicked. Receives the current template JSON. */
+    onClick: (template: Template) => void;
+}
+/**
+ * Controls the designer's top navbar. Every built-in action defaults to visible;
+ * set a flag to `false` to hide it. Provide `onSave`/`onLoad` to replace the
+ * default download/file-picker behavior, and `actions` to add your own buttons.
+ */
+export interface ToolbarConfig {
+    /** Hide the entire toolbar. */
+    hidden?: boolean;
+    /** Show the Load (open JSON file) button. Default `true`. */
+    load?: boolean;
+    /** Show the Save button. Default `true`. Pair with `onSave` to override the default download. */
+    save?: boolean;
+    /** Show the Undo / Redo buttons. Default `true`. */
+    history?: boolean;
+    /** Show the Duplicate button. Default `true`. */
+    duplicate?: boolean;
+    /** Show the Delete button. Default `true`. */
+    delete?: boolean;
+    /** Show the Header / Body / Footer section switcher. Default `true`. */
+    sections?: boolean;
+    /** Show the Preview PDF button. Default `true`. */
+    preview?: boolean;
+    /** Show the light/dark theme toggle. Default `true`. */
+    theme?: boolean;
+    /** Show the zoom controls. Default `true`. */
+    zoom?: boolean;
+    /** Replace the built-in "Save" (download JSON). Receives the current template. */
+    onSave?: (template: Template) => void;
+    /** Replace the built-in "Load" (file picker). */
+    onLoad?: () => void;
+    /** Extra buttons rendered just before the Preview button. */
+    actions?: ToolbarAction[];
+}
+export declare function Toolbar({ config, elements }?: {
+    config?: ToolbarConfig;
+    elements?: ElementsConfig;
+}): import("react").JSX.Element | null;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@veztraa/report-designer",
+  "version": "0.1.0",
+  "description": "Embeddable React PDF report designer component",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": ["dist"],
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@veztraa/report-core": "workspace:*",
+    "@veztraa/report-renderer": "workspace:*",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@react-pdf/renderer": "^4.1.6",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "jsbarcode": "^3.12.3",
+    "postcss": "^8.4.49",
+    "qrcode": "^1.5.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}