@fayz-ai/plugin-forms 0.8.0 → 0.8.1

package/src/components/FormBuilder.tsx

@@ -11,7 +11,7 @@ import {
 } from '@dnd-kit/core'
 import { arrayMove } from '@dnd-kit/sortable'
 import { snapCenterToCursor } from '@dnd-kit/modifiers'
-import { ArrowLeft, Eye } from 'lucide-react'
+import { ArrowLeft, Eye, Pencil, Printer } from 'lucide-react'
 import { Button, useSaveBar, toast } from '@fayz-ai/ui'
 import { Input } from '@fayz-ai/ui'
 import { Card, CardContent } from '@fayz-ai/ui'
@@ -24,6 +24,7 @@ import {
   SelectValue,
 } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
+import { useLimitGuard, invalidateLimit, useAgentSurface, type AgentSurfaceContribution } from '@fayz-ai/saas'
 import type { CustomFormsStore } from '../store'
 import type { CustomFormsDataProvider } from '../data/types'
 import type { CustomFormsConfig } from '../config'
@@ -33,6 +34,8 @@ import { BuilderCanvas } from './BuilderCanvas'
 import { FieldConfigDrawer } from './FieldConfigDialog'
 import { createPortal } from 'react-dom'
 import { FormRenderer } from './FormRenderer'
+import { buildPrintHtml } from '../lib/print'
+import { FORM_BUILDER_INSTRUCTIONS } from '../agent-tools'
 
 const TEMPLATE_CATEGORIES: TemplateCategory[] = ['anamnesis', 'evolution', 'report', 'contract', 'general']
 
@@ -46,6 +49,7 @@ interface FormBuilderProps {
 
 export function FormBuilder({ templateId, store, provider, config, onBack }: FormBuilderProps) {
   const t = useTranslation()
+  const guardTemplates = useLimitGuard('form_templates')
 
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
@@ -54,6 +58,7 @@ export function FormBuilder({ templateId, store, provider, config, onBack }: For
   const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
   const [showPreview, setShowPreview] = useState(false)
+  const [previewMode, setPreviewMode] = useState<'editor' | 'print'>('editor')
   const [previewData, setPreviewData] = useState<Record<string, unknown>>({})
   const [draggingFieldType, setDraggingFieldType] = useState<import('../types').FormFieldType | null>(null)
   const [templateName, setTemplateName] = useState<string | null>(null)
@@ -139,6 +144,48 @@ export function FormBuilder({ templateId, store, provider, config, onBack }: For
     setFields((prev) => prev.map((f) => (f.id === updated.id ? updated : f)))
   }, [])
 
+  // --- Assistant surface: publish WHAT THE USER IS EDITING as context --------
+  // The build action is the server-plane createOrUpdateForm tool (a pool RPC),
+  // which works from any page. This surface only tells the model which template
+  // is open and its current fields+ids, so "add an allergies field to THIS
+  // form" resolves to the right templateId. No client-side mutation here.
+  const surfaceStateRef = React.useRef({ templateId, name, description, category, fields })
+  surfaceStateRef.current = { templateId, name, description, category, fields }
+
+  const agentSurface = React.useMemo<AgentSurfaceContribution>(
+    () => ({
+      id: 'custom_forms.builder',
+      pluginId: 'custom_forms',
+      instructions: FORM_BUILDER_INSTRUCTIONS,
+      describe: () => {
+        const o = surfaceStateRef.current
+        return {
+          title: `Construtor de formulário — ${o.name?.trim() || 'novo modelo'}`,
+          state: {
+            // Pass this as `templateId` to createOrUpdateForm when editing THIS
+            // form. Null = an unsaved new form (create, then it gets an id).
+            templateId: o.templateId ?? null,
+            unsaved: !o.templateId,
+            name: o.name ?? '',
+            category: o.category ?? 'general',
+            description: o.description ?? '',
+            fieldCount: o.fields.length,
+            fields: o.fields.map((f) => ({
+              id: f.id,
+              type: f.type,
+              label: f.label,
+              required: !!f.required,
+              ...(f.options?.length ? { options: f.options.map((x) => x.label) } : {}),
+            })),
+          },
+        }
+      },
+    }),
+    [],
+  )
+  useAgentSurface(agentSurface)
+  // ---------------------------------------------------------------------------
+
   const handleFieldConfigSave = useCallback((updated: FormFieldDef) => {
     handleFieldUpdate(updated)
     setSelectedFieldId(null)
@@ -146,6 +193,9 @@ export function FormBuilder({ templateId, store, provider, config, onBack }: For
 
   const handleSave = useCallback(async () => {
     if (!name.trim()) { toast.error(t('common.formIncomplete')); return }
+    // Plan quantity guard (client-side, before the provider call) — only on
+    // create. Opens the global UpgradeModal and aborts when the cap is reached.
+    if (!templateId && (await guardTemplates()) === 'blocked') return
     setSaving(true)
     try {
       const schema: FormSchema = { fields, layout: { columns: 12 } }
@@ -154,12 +204,13 @@ export function FormBuilder({ templateId, store, provider, config, onBack }: For
         await store.getState().updateTemplate(templateId, { name, description, category, schema })
       } else {
         await store.getState().createTemplate({ name, description, category, schema })
+        invalidateLimit('form_templates')
       }
       onBack()
     } finally {
       setSaving(false)
     }
-  }, [templateId, name, description, category, fields, store, onBack])
+  }, [templateId, name, description, category, fields, store, onBack, guardTemplates])
 
   // Dirty detection — snapshot editable fields once async load settles
   const currentFields = { name, description, category, fields }
@@ -260,7 +311,7 @@ export function FormBuilder({ templateId, store, provider, config, onBack }: For
             size="sm"
             className="h-9"
             disabled={fields.length === 0}
-            onClick={() => { setPreviewData({}); setShowPreview(true) }}
+            onClick={() => { setPreviewData({}); setPreviewMode('editor'); setShowPreview(true) }}
           >
             <Eye className="h-3.5 w-3.5 mr-1.5" />
             Preview
@@ -316,26 +367,57 @@ export function FormBuilder({ templateId, store, provider, config, onBack }: For
             style={{ minHeight: '80vh' }}
             onClick={(e) => e.stopPropagation()}
           >
-            {/* Close button — kept on white paper background; literal grays are intentional print look */}
-            <button
-              onClick={() => setShowPreview(false)}
-              className="absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
-            >
-              <span className="text-lg">✕</span>
-            </button>
-
-            {/* Paper content — printed A4 simulation; literal black-on-white is the point */}
-            <div className="px-10 py-8 sm:px-14 sm:py-10 text-neutral-900">
-              <h1 className="text-2xl font-bold mb-1">{name || t('customForms.newTemplate')}</h1>
-              {description && <p className="text-sm text-neutral-500 mb-8">{description}</p>}
-              {!description && <div className="mb-8" />}
-
-              <FormRenderer
-                schema={{ fields, layout: { columns: 12 } }}
-                data={previewData}
-                onChange={setPreviewData}
-              />
+            {/* Toggle Editor ⟷ Impressão (centered) + close, on a sticky top bar. */}
+            <div className="sticky top-0 z-10 flex items-center justify-center border-b bg-white/95 backdrop-blur px-4 py-2.5 rounded-t-modal">
+              <div className="inline-flex rounded-lg border p-0.5 text-xs">
+                <button
+                  onClick={() => setPreviewMode('editor')}
+                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-md font-medium transition-colors ${previewMode === 'editor' ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:text-neutral-800'}`}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                  {t('customForms.preview.editor')}
+                </button>
+                <button
+                  onClick={() => setPreviewMode('print')}
+                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-md font-medium transition-colors ${previewMode === 'print' ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:text-neutral-800'}`}
+                >
+                  <Printer className="h-3.5 w-3.5" />
+                  {t('customForms.preview.print')}
+                </button>
+              </div>
+              <button
+                onClick={() => setShowPreview(false)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
+              >
+                <span className="text-lg">✕</span>
+              </button>
             </div>
+
+            {previewMode === 'editor' ? (
+              /* Editor — fillable form (same renderer used on the person's ficha) */
+              <div className="px-10 py-8 sm:px-14 sm:py-10 text-neutral-900">
+                <h1 className="text-2xl font-bold mb-1">{name || t('customForms.newTemplate')}</h1>
+                {description && <p className="text-sm text-neutral-500 mb-8">{description}</p>}
+                {!description && <div className="mb-8" />}
+
+                <FormRenderer
+                  schema={{ fields, layout: { columns: 12 } }}
+                  data={previewData}
+                  onChange={setPreviewData}
+                />
+              </div>
+            ) : (
+              /* Impressão — exact print/PDF output rendered in an isolated iframe */
+              <iframe
+                title="print-preview"
+                className="w-full rounded-b-modal"
+                style={{ height: '75vh', border: 'none' }}
+                srcDoc={buildPrintHtml(
+                  { id: 'preview', name: name || t('customForms.newTemplate'), schema: { fields, layout: { columns: 12 } } } as any,
+                  { title: name || t('customForms.newTemplate'), createdAt: new Date().toISOString(), status: 'draft', data: previewData } as any,
+                )}
+              />
+            )}
           </div>
         </div>,
         document.body,

package/src/components/FormViewer.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { ArrowLeft, Pencil, Badge as BadgeIcon } from 'lucide-react'
+import { ArrowLeft, Pencil, Printer } from 'lucide-react'
 import { Button } from '@fayz-ai/ui'
 import { Badge } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
 import type { CustomFormsDataProvider } from '../data/types'
 import type { FormDocument, FormTemplate } from '../types'
 import { FormRenderer } from './FormRenderer'
+import { printDocument } from '../lib/print'
 
 interface FormViewerProps {
   document: FormDocument
@@ -62,6 +63,15 @@ export function FormViewer({ document: doc, provider, onBack, onEdit }: FormView
         <Badge variant="secondary" className={`text-[10px] ${STATUS_COLORS[doc.status] ?? ''}`}>
           {t(`customForms.status.${doc.status}`)}
         </Badge>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8"
+          onClick={() => printDocument(template, doc)}
+        >
+          <Printer className="h-3 w-3 mr-1" />
+          {t('customForms.printPdf')}
+        </Button>
         {onEdit && doc.status === 'draft' && (
           <Button variant="outline" size="sm" className="h-8" onClick={() => onEdit(doc)}>
             <Pencil className="h-3 w-3 mr-1" />

package/src/components/PersonDocumentsWidget.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useRef } from 'react'
 import { ArrowLeft, Image as ImageIcon, Paperclip } from 'lucide-react'
 import { Badge } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
+import { useLimitGuard, invalidateLimit } from '@fayz-ai/saas'
 import type { CustomFormsConfig } from '../config'
 import type { CustomFormsDataProvider } from '../data/types'
 import type { CustomFormsStore } from '../store'
@@ -27,6 +28,7 @@ type WidgetView =
 
 export function PersonDocumentsWidget({ item, config, provider, store }: PersonDocumentsWidgetProps) {
   const t = useTranslation()
+  const guardDocuments = useLimitGuard('documents_month')
   const [view, setView] = useState<WidgetView>({ type: 'list' })
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [pendingFileAccept, setPendingFileAccept] = useState<string>('*/*')
@@ -58,6 +60,10 @@ export function PersonDocumentsWidget({ item, config, provider, store }: PersonD
   }, [provider])
 
   const handleFiles = useCallback(async (files: File[]) => {
+    // Plan monthly-quota guard (client-side, before the provider call) — count
+    // the whole batch. Opens the global UpgradeModal and aborts when the cap
+    // would be exceeded.
+    if ((await guardDocuments(files.length)) === 'blocked') return
     for (const file of files) {
       const isImage = file.type.startsWith('image/')
       await store.getState().createDocument({
@@ -70,7 +76,8 @@ export function PersonDocumentsWidget({ item, config, provider, store }: PersonD
         status: 'completed',
       })
     }
-  }, [store, item.id])
+    invalidateLimit('documents_month')
+  }, [store, item.id, guardDocuments])
 
   const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files ?? [])
@@ -101,6 +108,7 @@ export function PersonDocumentsWidget({ item, config, provider, store }: PersonD
         template={view.template}
         personId={item.id}
         personName={item.name}
+        person={item}
         provider={provider}
         store={store}
         onSaved={handleSaved}
@@ -139,6 +147,7 @@ export function PersonDocumentsWidget({ item, config, provider, store }: PersonD
         existingDocument={view.document}
         personId={item.id}
         personName={item.name}
+        person={item}
         provider={provider}
         store={store}
         onSaved={handleSaved}

package/src/data/supabase.ts

@@ -108,6 +108,8 @@ export function createSupabaseFormsProvider(): CustomFormsDataProvider {
         .eq('tenant_id', getTenantId())
         .eq('is_current', true)
         .eq('is_deleted', false)
+        // Archived templates (isActive=false) leave the list and the picker.
+        .eq('is_active', true)
 
       if (query.category) qb = qb.eq('category', query.category)
       if (query.search) qb = qb.ilike('name', `%${query.search}%`)

package/src/index.ts

@@ -13,6 +13,7 @@ import type { CustomFormsPluginOptions } from './config'
 import { CustomFormsSettingsTab } from './views/CustomFormsSettingsTab'
 import { PersonDocumentsWidget as PersonDocumentsWidgetImpl } from './components/PersonDocumentsWidget'
 import { registerDocumentTypeProvider } from './document-types'
+import { createOrUpdateFormTool } from './agent-tools'
 import { FileText as FileTextIcon, Image as ImageIcon, Paperclip } from 'lucide-react'
 
 function registerBuiltInProviders(formsProvider: CustomFormsDataProvider) {
@@ -105,6 +106,9 @@ export function createCustomFormsPlugin(options?: CustomFormsPluginOptions): Plu
     React.createElement(PluginSettingsPanel, {
       title: config.labels.settingsLabel,
       subtitle: config.labels.settingsSubtitle,
+      // The settings shell already renders the section label as the page H1;
+      // hide the panel's own duplicate title (keeps the subtitle).
+      hideTitle: true,
       customTabs: [
         {
           id: 'forms',
@@ -135,6 +139,10 @@ export function createCustomFormsPlugin(options?: CustomFormsPluginOptions): Plu
     declaredFeatures: [
       { id: 'custom_forms', label: config.labels.pageTitle, group: config.labels.pageTitle },
     ],
+    declaredLimits: [
+      { key: 'form_templates', label: 'Form templates', table: 'plg_forms_templates' },
+      { key: 'documents_month', label: 'Documents / month', table: 'documents', period: 'month' },
+    ],
 
     navigation: [],
 
@@ -206,6 +214,19 @@ export function createCustomFormsPlugin(options?: CustomFormsPluginOptions): Plu
         ],
         permission: { feature: 'custom_forms', action: 'read' as const },
       },
+      // Server-plane write: builds/edits a form template via the pool RPC, so
+      // the assistant can montar formulários from any page or channel.
+      createOrUpdateFormTool,
+    ],
+
+    declaredRpcs: [
+      {
+        name: 'agent_forms_upsert_template',
+        kind: 'write' as const,
+        description:
+          'Guarded form-template upsert: agent_guard (role→plan→form_templates cap), grid layout computed server-side, create or edit by id, audited.',
+        audits: true,
+      },
     ],
 
     locales: customFormsLocales,

package/src/lib/person-fields.ts

@@ -0,0 +1,67 @@
+// ============================================================
+// PERSON FIELD MAPPING — prefill a document from a person record
+// ============================================================
+//
+// A template field can declare `map: '<personKey>'` (see FormFieldDef.map).
+// When a document is created from a person's profile, fields with a mapping are
+// pre-filled from that person's record. The person record reaching the widget
+// is the host app's CRUD detail `item`, keyed by the entity's field keys
+// (camelCase, e.g. `documentNumber`). We resolve tolerantly so the same mapping
+// works whether the host exposes camelCase or snake_case keys.
+
+import type { FormSchema } from '../types'
+
+/** Curated, vertical-agnostic person keys offered in the field builder. */
+export const PERSON_FIELD_OPTIONS: Array<{ value: string; labelKey: string }> = [
+  { value: 'name', labelKey: 'customForms.personField.name' },
+  { value: 'documentNumber', labelKey: 'customForms.personField.documentNumber' },
+  { value: 'email', labelKey: 'customForms.personField.email' },
+  { value: 'phone', labelKey: 'customForms.personField.phone' },
+  { value: 'dateOfBirth', labelKey: 'customForms.personField.dateOfBirth' },
+  { value: 'guardianName', labelKey: 'customForms.personField.guardianName' },
+  { value: 'address', labelKey: 'customForms.personField.address' },
+  { value: 'city', labelKey: 'customForms.personField.city' },
+  { value: 'state', labelKey: 'customForms.personField.state' },
+]
+
+const toSnake = (k: string) => k.replace(/[A-Z]/g, (m) => '_' + m.toLowerCase())
+const toCamel = (k: string) => k.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase())
+
+/** Read a person field value, tolerating camelCase/snake_case key variants. */
+export function resolvePersonValue(
+  person: Record<string, unknown> | undefined | null,
+  mapKey: string | undefined,
+): unknown {
+  if (!person || !mapKey) return undefined
+  for (const key of [mapKey, toSnake(mapKey), toCamel(mapKey)]) {
+    const v = person[key]
+    if (v != null && v !== '') return v
+  }
+  return undefined
+}
+
+/**
+ * Build the initial document data for a template. For each field, applies (in
+ * priority order) an existing value, then the mapped person value, then the
+ * field's static `defaultValue`. Never overwrites a value already present in
+ * `existing`.
+ */
+export function prefillFromPerson(
+  schema: FormSchema | undefined,
+  person: Record<string, unknown> | undefined | null,
+  existing: Record<string, unknown> = {},
+): Record<string, unknown> {
+  const data: Record<string, unknown> = { ...existing }
+  if (!schema) return data
+  for (const field of schema.fields) {
+    const current = data[field.id]
+    if (current != null && current !== '') continue
+    const mapped = field.map ? resolvePersonValue(person, field.map) : undefined
+    if (mapped != null) {
+      data[field.id] = mapped
+    } else if (field.defaultValue != null) {
+      data[field.id] = field.defaultValue
+    }
+  }
+  return data
+}

package/src/lib/print.ts

@@ -0,0 +1,207 @@
+// ============================================================
+// PRINT / PDF — render a filled document to a printable A4 page
+// ============================================================
+//
+// Browser print-to-PDF: we build a clean, self-contained A4 HTML document from
+// the template schema + saved data, drop it into a hidden iframe, and call
+// print() on it. The browser's print dialog covers both physical printing and
+// "Save as PDF". No external deps.
+
+import type { FormDocument, FormFieldDef, FormTemplate } from '../types'
+
+function esc(value: unknown): string {
+  return String(value ?? '').replace(/[&<>"']/g, (c) =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c] as string),
+  )
+}
+
+function nl2br(value: string): string {
+  return esc(value).replace(/\r?\n/g, '<br/>')
+}
+
+function formatDate(value: string): string {
+  // ISO date (YYYY-MM-DD) → locale date; anything else passes through.
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value)
+  if (!m) return esc(value)
+  return `${m[3]}/${m[2]}/${m[1]}`
+}
+
+function optionLabel(field: FormFieldDef, value: unknown): string {
+  const opt = (field.options ?? []).find((o) => o.value === value)
+  return esc(opt ? opt.label : value)
+}
+
+/** Render one field's value as an HTML fragment for the printed page. */
+function renderValue(field: FormFieldDef, value: unknown): string {
+  const empty = '<span class="empty">—</span>'
+  switch (field.type) {
+    case 'memo':
+    case 'richtext':
+      return value ? `<div class="long">${nl2br(String(value))}</div>` : empty
+    case 'date':
+      return value ? formatDate(String(value)) : empty
+    case 'select':
+    case 'radio':
+      return value ? optionLabel(field, value) : empty
+    case 'tags': {
+      const arr = Array.isArray(value) ? value : []
+      return arr.length
+        ? arr.map((v) => optionLabel(field, v)).join(', ')
+        : empty
+    }
+    case 'checkbox':
+      return value ? 'Sim' : 'Não'
+    case 'image':
+    case 'gallery':
+    case 'budget':
+      return '' // not meaningful on a printed contract
+    default:
+      return value ? esc(value) : empty
+  }
+}
+
+export interface BuildPrintOptions {
+  /** Heading shown at the top of the page (defaults to the document title). */
+  heading?: string
+  /** Small line under the heading (e.g. person name). */
+  subheading?: string
+}
+
+/** Build a full, self-contained printable HTML document. */
+export function buildPrintHtml(
+  template: FormTemplate,
+  doc: FormDocument,
+  opts: BuildPrintOptions = {},
+): string {
+  const heading = opts.heading ?? doc.title ?? template.name
+  const subParts = [opts.subheading ?? doc.personName, new Date(doc.createdAt).toLocaleDateString()]
+    .filter(Boolean)
+    .map((s) => esc(s))
+    .join(' &middot; ')
+
+  const fields = [...template.schema.fields].sort((a, b) => a.row - b.row || a.col - b.col)
+
+  const clampSpan = (n: unknown) => Math.max(1, Math.min(12, Number(n) || 12))
+
+  // Mirror the builder's 12-column grid so the print keeps the authored layout
+  // (side-by-side fields stay side by side). Titles span the full row.
+  const body = fields
+    .map((field) => {
+      if (field.type === 'title') {
+        return `<h2 class="section" style="grid-column: 1 / -1">${esc(field.label)}</h2>`
+      }
+      const rendered = renderValue(field, doc.data[field.id])
+      if (rendered === '') return ''
+      const isLong = field.type === 'memo' || field.type === 'richtext'
+      return `<div class="field${isLong ? ' field--long' : ''}" style="grid-column: span ${clampSpan(field.colSpan)}">
+        <div class="label">${esc(field.label)}</div>
+        <div class="value">${rendered}</div>
+      </div>`
+    })
+    .join('\n')
+
+  return `<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8"/>
+<title>${esc(heading)}</title>
+<style>
+  @page { size: A4; margin: 20mm; }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    color: #111; font-size: 12pt; line-height: 1.5;
+    -webkit-print-color-adjust: exact; print-color-adjust: exact;
+  }
+  .page { max-width: 170mm; margin: 0 auto; padding: 12mm 0; }
+  header { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 20px; }
+  header h1 { font-size: 18pt; margin: 0 0 2px; }
+  header .sub { font-size: 10pt; color: #555; }
+  /* 12-column grid — mirrors the builder Preview (FormRenderer) so the print
+     keeps the authored column layout. */
+  .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; row-gap: 12px; align-items: start; }
+  h2.section { font-size: 13pt; margin: 22px 0 4px; padding-bottom: 3px; border-bottom: 1px solid #ccc; }
+  .grid > h2.section:first-child { margin-top: 4px; }
+  .field { margin: 0; min-width: 0; }
+  .field .label { font-size: 9pt; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-bottom: 2px; }
+  .field .value { font-size: 12pt; }
+  .field--long .value .long { white-space: normal; text-align: justify; }
+  .empty { color: #bbb; }
+  footer { margin-top: 40px; font-size: 9pt; color: #888; text-align: center; }
+  @media screen { body { background: #f3f3f3; } .page { background: #fff; max-width: 210mm; min-height: 297mm; padding: 20mm; box-shadow: 0 1px 8px rgba(0,0,0,.15); } }
+</style>
+</head>
+<body>
+  <div class="page">
+    <header>
+      <h1>${esc(heading)}</h1>
+      ${subParts ? `<div class="sub">${subParts}</div>` : ''}
+    </header>
+    <div class="grid">
+      ${body}
+    </div>
+  </div>
+</body>
+</html>`
+}
+
+/**
+ * Print a prebuilt HTML document via a hidden iframe (popup-blocker safe).
+ * The browser print dialog handles both printing and "Save as PDF".
+ */
+export function printHtml(html: string): void {
+  if (typeof document === 'undefined') return
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('aria-hidden', 'true')
+  iframe.style.position = 'fixed'
+  iframe.style.right = '0'
+  iframe.style.bottom = '0'
+  iframe.style.width = '0'
+  iframe.style.height = '0'
+  iframe.style.border = '0'
+  document.body.appendChild(iframe)
+
+  const cleanup = () => {
+    // Give the print dialog a beat before tearing the frame down.
+    setTimeout(() => {
+      if (iframe.parentNode) iframe.parentNode.removeChild(iframe)
+    }, 1000)
+  }
+
+  const win = iframe.contentWindow
+  const idoc = iframe.contentDocument || win?.document
+  if (!win || !idoc) {
+    cleanup()
+    return
+  }
+
+  idoc.open()
+  idoc.write(html)
+  idoc.close()
+
+  const doPrint = () => {
+    try {
+      win.focus()
+      win.print()
+    } finally {
+      cleanup()
+    }
+  }
+
+  // Wait for the frame document to be ready before printing.
+  if (idoc.readyState === 'complete') {
+    setTimeout(doPrint, 50)
+  } else {
+    iframe.addEventListener('load', () => setTimeout(doPrint, 50), { once: true })
+  }
+}
+
+/** Convenience: build + print a document in one call. */
+export function printDocument(
+  template: FormTemplate,
+  doc: FormDocument,
+  opts?: BuildPrintOptions,
+): void {
+  printHtml(buildPrintHtml(template, doc, opts))
+}

package/src/lib/tenant.ts

@@ -1,5 +1,9 @@
 // Current tenant id holder (runtime DI), decoupling the plugin from saas-core's
-// organization.store. Defaults to undefined → Supabase RLS scopes by session.
+// organization.store. Falls back to the core active-tenant when the host has
+// not injected one explicitly (mirrors plugin-crm's resolver), so the settings
+// template list — gated on this id — loads without extra host wiring.
+import { getActiveTenantId } from '@fayz-ai/core'
+
 let currentTenantId: string | undefined
 export function setFormsTenantId(id: string | undefined): void { currentTenantId = id }
-export function getFormsTenantId(): string | undefined { return currentTenantId }
+export function getFormsTenantId(): string | undefined { return currentTenantId ?? getActiveTenantId() }

package/src/locales/en.ts

@@ -14,6 +14,7 @@ export const en: Record<string, string> = {
   'customForms.noTemplates': 'No form templates yet',
   'customForms.noTemplatesDescription': 'Create your first custom form to start collecting structured data.',
   'customForms.deleteTemplateConfirm': 'Delete this form template? Existing documents will be preserved.',
+  'customForms.archiveTemplateConfirm': 'Archive this form template? It leaves the list and the document picker, but is kept and existing documents are preserved.',
 
   // Categories
   'customForms.category.anamnesis': 'Anamnesis',
@@ -37,6 +38,22 @@ export const en: Record<string, string> = {
   'customForms.builder.addOption': 'Add option',
   'customForms.builder.colSpan': 'Column span',
   'customForms.builder.deleteField': 'Remove field',
+  'customForms.builder.mapToPerson': 'Auto-fill from record',
+  'customForms.builder.mapNone': "Don't auto-fill",
+  'customForms.builder.mapHint': "When creating the document from a person's profile, this field is pre-filled with the chosen value (still editable).",
+  'customForms.preview.editor': 'Editor',
+  'customForms.preview.print': 'Print',
+
+  // Person field mappings (auto-fill)
+  'customForms.personField.name': 'Name',
+  'customForms.personField.documentNumber': 'ID / Document',
+  'customForms.personField.email': 'Email',
+  'customForms.personField.phone': 'Phone',
+  'customForms.personField.dateOfBirth': 'Date of Birth',
+  'customForms.personField.guardianName': 'Guardian',
+  'customForms.personField.address': 'Address',
+  'customForms.personField.city': 'City',
+  'customForms.personField.state': 'State',
 
   // Field types
   'customForms.fieldType.title': 'Title',
@@ -62,6 +79,9 @@ export const en: Record<string, string> = {
   'customForms.saveAsDraft': 'Save as Draft',
   'customForms.saveAndComplete': 'Save & Complete',
   'customForms.deleteDocumentConfirm': 'Delete this document?',
+  'customForms.archive': 'Archive',
+  'customForms.archiveDocumentConfirm': 'Archive this document? It leaves the active list but is kept on file.',
+  'customForms.printPdf': 'Print / PDF',
 
   // Registry
   'registry.form-categories': 'Categories',