@uurtech/jdf 0.1.13 → 0.1.16

package/dist/jdfjs.css

@@ -223,3 +223,138 @@ jdf {
   width: 100%;
   min-height: 600px;
 }
+
+/* === Form elements ====================================================== */
+.jdfjs-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: "Inter", -apple-system, sans-serif;
+  font-size: 12px;
+  color: var(--jdfjs-text);
+  width: 100%;
+  height: 100%;
+}
+
+.jdfjs-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--jdfjs-text-soft);
+  letter-spacing: 0.02em;
+}
+
+.jdfjs-form-control {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  color: var(--jdfjs-text);
+  background: var(--jdfjs-bg);
+  border: 1px solid var(--jdfjs-border);
+  border-radius: 6px;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  box-sizing: border-box;
+}
+.jdfjs-form-control:focus {
+  outline: none;
+  border-color: var(--jdfjs-brand);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
+}
+.jdfjs-form-control[readonly],
+.jdfjs-form-control:disabled {
+  background: var(--jdfjs-bg-soft, #f3f4f6);
+  color: var(--jdfjs-text-soft);
+  cursor: not-allowed;
+}
+
+textarea.jdfjs-form-control {
+  resize: vertical;
+  min-height: 60px;
+  line-height: 1.4;
+}
+
+.jdfjs-form-checkbox {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.jdfjs-form-checkbox input[type="checkbox"] {
+  width: 16px; height: 16px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--jdfjs-brand);
+}
+.jdfjs-form-checkbox-label {
+  font-size: 13px;
+  color: var(--jdfjs-text);
+  user-select: none;
+}
+
+select.jdfjs-form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--jdfjs-text-soft) 50%),
+                    linear-gradient(135deg, var(--jdfjs-text-soft) 50%, transparent 50%);
+  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 28px;
+}
+
+.jdfjs-form-signature-canvas {
+  border: 1px dashed var(--jdfjs-border);
+  border-radius: 6px;
+  background: var(--jdfjs-bg);
+  cursor: crosshair;
+  touch-action: none;
+}
+.jdfjs-form-signature-clear {
+  align-self: flex-start;
+  margin-top: 4px;
+  padding: 2px 10px;
+  font-size: 11px;
+  color: var(--jdfjs-text-soft);
+  background: transparent;
+  border: 1px solid var(--jdfjs-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.jdfjs-form-signature-clear:hover {
+  color: var(--jdfjs-text);
+  border-color: var(--jdfjs-text-soft);
+}
+
+/* === Save button (auto-init's `save-button` attribute) ================= */
+.jdfjs-save-button {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 5;
+  padding: 8px 16px;
+  font-family: "Inter", -apple-system, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--jdfjs-brand);
+  border: 0;
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+}
+.jdfjs-save-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.jdfjs-save-button:active {
+  transform: translateY(0);
+}
+
+.jdfjs-dark .jdfjs-save-button {
+  background: #3b82f6;
+}
+.jdfjs-dark .jdfjs-form-control[readonly],
+.jdfjs-dark .jdfjs-form-control:disabled {
+  background: #1f2937;
+}

package/dist/jdfjs.d.cts

@@ -45,11 +45,21 @@ interface JDFViewerOptions {
     onLoad?: (doc: JdfDocument) => void;
     /** Called on any rendering error */
     onError?: (err: Error) => void;
+    /**
+     * Called when a form field's value changes. Useful for live previews,
+     * dirty-state tracking, or auto-saving filled forms to a backend instead
+     * of triggering a manual download.
+     */
+    onFormChange?: (doc: JdfDocument, change: {
+        path: (string | number)[];
+        field: string;
+        value: unknown;
+    }) => void;
 }
 interface JDFViewerInstance {
     /** The container element */
     container: HTMLElement;
-    /** The current document */
+    /** The current document — reflects user form input as the user types. */
     document: JdfDocument;
     /** Get / set zoom (1 = 100%) */
     setZoom: (zoom: number) => void;
@@ -61,11 +71,30 @@ interface JDFViewerInstance {
     setDocument: (doc: JdfDocument) => void;
     /** Tear down — removes DOM and event listeners */
     destroy: () => void;
+    /**
+     * Return the current document as a Blob — ready to attach to a form-data
+     * upload, save through `URL.createObjectURL`, or hand to a Worker. The
+     * blob reflects user form input (whatever the user has typed / ticked /
+     * selected). Pass `{ pretty: false }` for a compact JSON.
+     */
+    exportJdf: (options?: {
+        pretty?: boolean;
+    }) => Blob;
+    /** Return the current document as a JSON string (form-filled state). */
+    toJSON: (options?: {
+        pretty?: boolean;
+    }) => string;
+    /**
+     * Trigger a browser download of the current document. The host page's
+     * "Save" button can call this directly: `viewer.downloadJdf("form.jdf")`.
+     * Default filename is `<title>.jdf` from `meta.title`.
+     */
+    downloadJdf: (filename?: string) => void;
+    /** Read the value of a single form field by `name`. */
+    getFormValue: (name: string) => unknown;
+    /** Read every form field's value as a flat `{ [name]: value }` map. */
+    getFormValues: () => Record<string, unknown>;
 }
-/**
- * Embed a JDF document into a container by URL.
- * The simplest "PDF.js-like" usage.
- */
 declare function embed(container: HTMLElement | string, url: string, options?: JDFViewerOptions): Promise<JDFViewerInstance>;
 /**
  * Render a JDF document directly into a container. No fetch.
@@ -86,10 +115,20 @@ declare class JDFViewer {
     private sidebarEl;
     private root;
     private observer;
+    private darkModeMql;
+    private darkModeListener;
+    private windowResizeListener;
     constructor(container: HTMLElement, doc: JdfDocument, options?: JDFViewerOptions);
     private applyContainerSize;
     private mount;
     private setupResizeObserver;
+    /**
+     * Apply the current `darkMode` option to the container. For `auto`, also
+     * subscribe to system colour-scheme changes so the embed flips when the
+     * user toggles their OS theme. Replaces a one-shot read at mount that
+     * froze the embed on its boot-time value.
+     */
+    private applyDarkMode;
     /** Auto-zoom for fit modes. */
     private applyFit;
     private buildToolbar;
@@ -106,6 +145,31 @@ declare class JDFViewer {
     goToPage(idx: number): void;
     getCurrentPage(): number;
     setDocument(doc: JdfDocument): void;
+    /**
+     * Apply a form-field value mutation to the in-memory document. Called by
+     * every form renderer on every keystroke / toggle / selection — the
+     * document carries the user's current state so `exportJdf()` returns a
+     * filled JDF that's identical in shape to the source, just with values.
+     *
+     * No re-render: the DOM input already shows what the user typed, and a
+     * full re-render mid-typing would lose focus. The mutation only matters
+     * at export time.
+     */
+    private handleFormChange;
+    /**
+     * Walk every page's elements and yield each form element with its
+     * resolved name. Used by getFormValues / downloadJdf consumers.
+     */
+    private iterFormFields;
+    toJSON(options?: {
+        pretty?: boolean;
+    }): string;
+    exportJdf(options?: {
+        pretty?: boolean;
+    }): Blob;
+    downloadJdf(filename?: string): void;
+    getFormValue(name: string): unknown;
+    getFormValues(): Record<string, unknown>;
     destroy(): void;
     getInstance(): JDFViewerInstance;
 }

package/dist/jdfjs.d.ts

@@ -45,11 +45,21 @@ interface JDFViewerOptions {
     onLoad?: (doc: JdfDocument) => void;
     /** Called on any rendering error */
     onError?: (err: Error) => void;
+    /**
+     * Called when a form field's value changes. Useful for live previews,
+     * dirty-state tracking, or auto-saving filled forms to a backend instead
+     * of triggering a manual download.
+     */
+    onFormChange?: (doc: JdfDocument, change: {
+        path: (string | number)[];
+        field: string;
+        value: unknown;
+    }) => void;
 }
 interface JDFViewerInstance {
     /** The container element */
     container: HTMLElement;
-    /** The current document */
+    /** The current document — reflects user form input as the user types. */
     document: JdfDocument;
     /** Get / set zoom (1 = 100%) */
     setZoom: (zoom: number) => void;
@@ -61,11 +71,30 @@ interface JDFViewerInstance {
     setDocument: (doc: JdfDocument) => void;
     /** Tear down — removes DOM and event listeners */
     destroy: () => void;
+    /**
+     * Return the current document as a Blob — ready to attach to a form-data
+     * upload, save through `URL.createObjectURL`, or hand to a Worker. The
+     * blob reflects user form input (whatever the user has typed / ticked /
+     * selected). Pass `{ pretty: false }` for a compact JSON.
+     */
+    exportJdf: (options?: {
+        pretty?: boolean;
+    }) => Blob;
+    /** Return the current document as a JSON string (form-filled state). */
+    toJSON: (options?: {
+        pretty?: boolean;
+    }) => string;
+    /**
+     * Trigger a browser download of the current document. The host page's
+     * "Save" button can call this directly: `viewer.downloadJdf("form.jdf")`.
+     * Default filename is `<title>.jdf` from `meta.title`.
+     */
+    downloadJdf: (filename?: string) => void;
+    /** Read the value of a single form field by `name`. */
+    getFormValue: (name: string) => unknown;
+    /** Read every form field's value as a flat `{ [name]: value }` map. */
+    getFormValues: () => Record<string, unknown>;
 }
-/**
- * Embed a JDF document into a container by URL.
- * The simplest "PDF.js-like" usage.
- */
 declare function embed(container: HTMLElement | string, url: string, options?: JDFViewerOptions): Promise<JDFViewerInstance>;
 /**
  * Render a JDF document directly into a container. No fetch.
@@ -86,10 +115,20 @@ declare class JDFViewer {
     private sidebarEl;
     private root;
     private observer;
+    private darkModeMql;
+    private darkModeListener;
+    private windowResizeListener;
     constructor(container: HTMLElement, doc: JdfDocument, options?: JDFViewerOptions);
     private applyContainerSize;
     private mount;
     private setupResizeObserver;
+    /**
+     * Apply the current `darkMode` option to the container. For `auto`, also
+     * subscribe to system colour-scheme changes so the embed flips when the
+     * user toggles their OS theme. Replaces a one-shot read at mount that
+     * froze the embed on its boot-time value.
+     */
+    private applyDarkMode;
     /** Auto-zoom for fit modes. */
     private applyFit;
     private buildToolbar;
@@ -106,6 +145,31 @@ declare class JDFViewer {
     goToPage(idx: number): void;
     getCurrentPage(): number;
     setDocument(doc: JdfDocument): void;
+    /**
+     * Apply a form-field value mutation to the in-memory document. Called by
+     * every form renderer on every keystroke / toggle / selection — the
+     * document carries the user's current state so `exportJdf()` returns a
+     * filled JDF that's identical in shape to the source, just with values.
+     *
+     * No re-render: the DOM input already shows what the user typed, and a
+     * full re-render mid-typing would lose focus. The mutation only matters
+     * at export time.
+     */
+    private handleFormChange;
+    /**
+     * Walk every page's elements and yield each form element with its
+     * resolved name. Used by getFormValues / downloadJdf consumers.
+     */
+    private iterFormFields;
+    toJSON(options?: {
+        pretty?: boolean;
+    }): string;
+    exportJdf(options?: {
+        pretty?: boolean;
+    }): Blob;
+    downloadJdf(filename?: string): void;
+    getFormValue(name: string): unknown;
+    getFormValues(): Record<string, unknown>;
     destroy(): void;
     getInstance(): JDFViewerInstance;
 }