@interware/content-generator 0.4.4 → 0.6.0

package/dist/admin/src/features/templates/editor/TemplatePicker.d.ts

@@ -0,0 +1,23 @@
+import type { Template } from '../model/types';
+interface TemplatePickerProps {
+    bases: Template[];
+    mine: Template[];
+    folders: string[];
+    onOpen: (template: Template) => void;
+    onCreateBlank: (width: number, height: number) => void;
+    onRename: (template: Template, name: string) => void;
+    onDuplicate: (template: Template) => void;
+    onMove: (template: Template, folder: string) => void;
+    onDelete: (template: Template) => void;
+    onCreateFolder: (parent: string, name: string) => void;
+    onRenameFolder: (path: string, name: string) => void;
+    onDeleteFolder: (path: string) => void;
+    /** Vuelve una base editada a la versión de InterWare (S4.15). */
+    onRestoreBase: (template: Template) => void;
+}
+/**
+ * Selector de plantillas (diseño S4.6, D10): lienzo en blanco con tamaños predefinidos, «Mis
+ * templates» por carpetas y las plantillas base. Presentacional: las operaciones llegan por props.
+ */
+export declare const TemplatePicker: (p: TemplatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/admin/src/features/templates/editor/TemplatesTab.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Pestaña Plantillas: selector (lienzo en blanco, «Mis templates», bases) o el editor abierto. Un
+ * template propio se abre con sus imágenes convertidas a data URL (diseño S4.6, D7).
+ */
+export declare const TemplatesTab: () => import("react/jsx-runtime").JSX.Element;

package/dist/admin/src/features/templates/editor/TypographyControls.d.ts

@@ -0,0 +1,24 @@
+import type { LayerPatch } from '../model/types';
+type Align = 'left' | 'center' | 'right';
+interface TypographyLayer {
+    font?: string;
+    fontSize: number;
+    fontWeight: number;
+    fontStyle?: 'normal' | 'italic';
+    textAlign?: Align;
+}
+interface TypographyControlsProps {
+    layer: TypographyLayer;
+    /** Solo las capas de texto se alinean; lista, cita y etiqueta no. */
+    alignable: boolean;
+    onUpdate: (patch: LayerPatch) => void;
+    /** Subir una fuente propia (S4.16, D4). */
+    onUploadFont?: () => void;
+}
+/**
+ * Controles de texto como los de los editores habituales (S4.16, D6): tipografía con vista previa,
+ * peso según la fuente, tamaño con − / campo / + sobre la escala estándar, negritas y cursivas como
+ * toggles y alineación con íconos.
+ */
+export declare const TypographyControls: ({ layer: l, alignable, onUpdate, onUploadFont }: TypographyControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/admin/src/features/templates/editor/icons.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType, SVGProps } from 'react';
+import type { LayerType } from '../model/types';
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+/** Íconos de interfaz del editor (paleta de elementos y panel de capas). */
+export declare const UI_ICONS: Record<string, IconComponent>;
+export declare const LAYER_ICONS: Record<LayerType, IconComponent>;
+export {};

package/dist/admin/src/features/templates/editor/overlays.d.ts

@@ -0,0 +1,20 @@
+export declare const GridOverlay: ({ w, h, unit, scale }: {
+    w: number;
+    h: number;
+    unit: number;
+    scale: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SafeAreaOverlay: ({ w, h, margin, scale }: {
+    w: number;
+    h: number;
+    margin: number;
+    scale: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RULER = 24;
+/** Reglas superior e izquierda con marcas cada `unit` px del lienzo y media marca intermedia. */
+export declare const Rulers: ({ w, h, scale, unit }: {
+    w: number;
+    h: number;
+    scale: number;
+    unit?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/admin/src/features/templates/editor/useCanvasNav.d.ts

@@ -0,0 +1,25 @@
+import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import type { View } from '../model/viewport';
+/**
+ * Navegación del lienzo (diseño S4.9, D8–D11). «Ajustar» calcula la vista con el espacio libre
+ * entre paneles; cualquier paneo o zoom pasa a una vista manual.
+ * - Rueda nativa `{ passive: false }`: con Ctrl/⌘ (el pellizco del trackpad llega así) hace zoom
+ *   hacia el cursor; sin modificador desplaza (dos dedos).
+ * - Arrastre del fondo, Espacio + arrastrar y botón central desplazan.
+ */
+export declare const useCanvasNav: (viewport: RefObject<HTMLElement>, piece: {
+    w: number;
+    h: number;
+}, insets: {
+    left: number;
+    right: number;
+}, rulers: number) => {
+    view: View;
+    isFit: boolean;
+    spaceDown: boolean;
+    panning: boolean;
+    startPan: (e: ReactMouseEvent) => void;
+    fit: () => void;
+    zoomTo: (scale: number) => void;
+    zoomBy: (delta: number) => void;
+};

package/dist/admin/src/features/templates/editor/useFitScale.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+/** Escala que hace caber la pieza en el contenedor (nunca mayor que 100%). */
+export declare const useFitScale: (ref: RefObject<HTMLElement>, width: number, height: number) => number;

package/dist/admin/src/features/templates/export/fontEmbed.d.ts

@@ -0,0 +1,22 @@
+import type { FontDef } from '../fonts/catalog';
+import type { Layer } from '../model/types';
+type WithLayers = {
+    layers?: Layer[];
+};
+type Fetcher = (url: string) => Promise<Blob>;
+/**
+ * Fuentes que usa una pieza (S4.16, D5): las de sus capas con texto, Inter (la base del lienzo) y
+ * Texta si lleva el logo (su palabra va en Texta).
+ */
+export declare const usedFonts: (template: WithLayers) => FontDef[];
+/**
+ * `@font-face` de las fuentes dadas con cada archivo incrustado como data URL. Se pasa a
+ * html-to-image como `fontEmbedCSS` para que no recorra las hojas de estilo del panel: al hacerlo
+ * intenta descargar fuentes de otros dominios (Font Awesome), la CSP del admin lo bloquea y la
+ * exportación se queda colgada. Una fuente que no se pueda descargar se omite (la pieza cae a la
+ * fuente de respaldo); las subidas ya vienen como data URL.
+ */
+export declare const buildFontEmbedCss: (fonts: FontDef[], fetcher?: Fetcher) => Promise<string>;
+/** `@font-face` incrustado de las fuentes de la pieza; cada fuente se descarga una vez por sesión. */
+export declare const getFontEmbedCss: (template: WithLayers) => Promise<string>;
+export {};

package/dist/admin/src/features/templates/export/imageSource.d.ts

@@ -0,0 +1,21 @@
+type Post = (url: string, body: {
+    url: string;
+}) => Promise<{
+    data: {
+        base64: string;
+        contentType: string;
+    };
+}>;
+export declare const DOWNLOAD_PROXY = "/strapi-content-generator-gemini/download-file";
+/**
+ * Convierte una imagen en data URL para que pueda entrar al lienzo y exportarse. El bucket S3 no
+ * tiene CORS para el panel: sin esto el lienzo queda contaminado y la exportación falla (diseño
+ * S4.4, D4). Las imágenes remotas pasan por el proxy autenticado del plugin.
+ */
+export declare const toDataUrl: (src: string, post: Post, origin?: string) => Promise<string>;
+/** Mide una imagen a partir de su URL (se usa con data URLs). */
+export declare const measureImage: (src: string) => Promise<{
+    width: number;
+    height: number;
+}>;
+export {};

package/dist/admin/src/features/templates/export/pdf.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PDF 1.4 de una página con un JPEG a página completa (diseño S4.7, D3). La página mide lo mismo
+ * que la pieza a 96 ppp (px × 0.75 = pt). El JPEG se incrusta tal cual con `DCTDecode`: no se
+ * decodifica ni se recomprime.
+ */
+export declare const buildPdf: (jpeg: Uint8Array, width: number, height: number) => Uint8Array;

package/dist/admin/src/features/templates/export/render.d.ts

@@ -0,0 +1,22 @@
+import type { Layer } from '../model/types';
+export type ExportFormat = 'png' | 'jpg' | 'svg' | 'pdf';
+export declare const FORMAT_LABELS: Record<ExportFormat, string>;
+/** «Story / Reels», 'png' → «story-reels.png». */
+export declare const fileNameFor: (name: string, ext: ExportFormat) => string;
+/** Color de relleno del JPEG: el de la plantilla si es sólido; con degradado, blanco. */
+export declare const jpegBackground: (background: string) => string;
+/**
+ * Renderiza la pieza (el nodo `data-export-root`) a su tamaño real en el formato pedido. Quita la
+ * escala de presentación del lienzo, espera a las fuentes de marca y las incrusta sin recorrer las
+ * hojas de estilo del panel (ver `fontEmbed.ts`). El PDF se arma con el JPEG (diseño S4.7, D3).
+ */
+export declare const renderPiece: (node: HTMLElement, tpl: {
+    width: number;
+    height: number;
+    background: string;
+    layers?: Layer[];
+}, format: ExportFormat, { timeoutMs }?: {
+    timeoutMs?: number;
+}) => Promise<Blob>;
+/** Descarga un blob con el nombre dado. */
+export declare const downloadBlob: (blob: Blob, name: string) => void;

package/dist/admin/src/features/templates/export/useEditorIO.d.ts

@@ -0,0 +1,18 @@
+import type { ExportFormat } from './render';
+import type { Template } from '../model/types';
+/**
+ * Entrada y salida del editor que dependen del panel de Strapi (cliente autenticado, biblioteca y
+ * notificaciones). Aislado en un hook para que el editor se pueda probar sin el panel.
+ */
+export declare const useEditorIO: () => {
+    loadImage: (url: string) => Promise<{
+        width: number;
+        height: number;
+        src: string;
+    } | null>;
+    exportAs: (node: HTMLElement | null, template: Template, format: ExportFormat) => Promise<void>;
+    saveToLibrary: (node: HTMLElement | null, template: Template, { name, folderId }: {
+        name: string;
+        folderId: number | null;
+    }) => Promise<boolean>;
+};

package/dist/admin/src/features/templates/fonts/catalog.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Catálogo de tipografías del editor (S4.16, D1). Los archivos los sirve el CMS desde
+ * `public/fonts/` (mismo origen que el panel, D2): Texta es comercial y no viaja en el paquete npm.
+ * Agregar una fuente = copiar sus archivos al CMS y añadir una entrada aquí. Las fuentes que sube el
+ * equipo se registran en tiempo de ejecución con `registerCustomFonts` (D4).
+ */
+export interface FontFile {
+    url: string;
+    /** Uno («400») o un rango de fuente variable («100 900»). */
+    weight: string;
+    style: 'normal' | 'italic';
+    format: 'truetype' | 'opentype' | 'woff' | 'woff2';
+}
+export interface FontDef {
+    id: string;
+    label: string;
+    /** Nombre CSS de la familia. */
+    family: string;
+    /** Respaldo del mismo tipo (sans, serif o monoespaciada) si el archivo no carga. */
+    fallback: string;
+    weights: number[];
+    /** Tiene cursivas propias; sin ellas el navegador las inclina. */
+    italic: boolean;
+    files: FontFile[];
+    /** Subida por el equipo a «/Fuentes». */
+    custom?: boolean;
+}
+export declare const BUILTIN_FONTS: FontDef[];
+export declare const DEFAULT_FONT = "inter";
+/** Reemplaza las fuentes subidas por el equipo (se llama al cargar la biblioteca de fuentes). */
+export declare const registerCustomFonts: (fonts: FontDef[]) => void;
+/** Para `useSyncExternalStore`: el lienzo se vuelve a pintar cuando cargan las fuentes subidas. */
+export declare const subscribeFonts: (listener: () => void) => () => boolean;
+export declare const fontsVersion: () => number;
+export declare const allFonts: () => FontDef[];
+/** La fuente de una capa; lo desconocido (p. ej. una fuente subida que se borró) cae a Inter. */
+export declare const resolveFont: (id: string | undefined) => FontDef;
+export declare const fontStack: (f: FontDef) => string;
+/** El peso disponible más cercano (una fuente sin 800 usa su 700). */
+export declare const nearestWeight: (f: FontDef, weight: number) => number;
+export declare const WEIGHT_LABELS: Record<number, string>;
+/** `@font-face` de las fuentes dadas; `url` puede ser una ruta del CMS o una data URL. */
+export declare const fontFaceCss: (fonts: FontDef[]) => string;
+/** Escala de tamaños de los editores de texto habituales (D6). */
+export declare const FONT_SIZES: number[];
+/** Tamaño estándar siguiente (`+1`) o anterior (`-1`); un valor libre salta al estándar más próximo. */
+export declare const stepSize: (size: number, dir: 1 | -1) => number;

package/dist/admin/src/features/templates/fonts/customFonts.d.ts

@@ -0,0 +1,19 @@
+import type { FontDef } from './catalog';
+/**
+ * Fuentes que sube el equipo (S4.16, D4). Viven en la carpeta «Fuentes» de la biblioteca del Estudio
+ * («/Fuentes»); cada archivo es una fuente. La licencia de cada una es responsabilidad de quien la sube.
+ */
+export declare const FONTS_FOLDER = "Fuentes";
+export declare const FONT_MAX_BYTES: number;
+export declare const isFontName: (name: string) => boolean;
+/** Error para mostrar, o `null` si el archivo se puede subir. */
+export declare const checkFontFile: (file: File) => string | null;
+/**
+ * Archivo de la biblioteca → fuente del catálogo. El nombre visible sale del archivo
+ * («Montserrat-SemiBold.ttf» → «Montserrat SemiBold»); la familia CSS es única por archivo para no
+ * chocar con fuentes del sistema. Un archivo trae un solo peso: las negritas las simula el navegador.
+ */
+export declare const fontFromFile: (file: {
+    id: number;
+    name: string;
+}, dataUrl: string) => FontDef;

package/dist/admin/src/features/templates/fonts/useCustomFonts.d.ts

@@ -0,0 +1,9 @@
+import type { FontDef } from './catalog';
+/**
+ * Fuentes propias del equipo (S4.16, D4): al montar carga las de «/Fuentes» al catálogo (por el
+ * proxy, como data URL: mismo origen para el lienzo y la exportación) y permite subir otra.
+ */
+export declare const useCustomFonts: () => {
+    upload: (file: File) => Promise<FontDef | null>;
+    reload: () => Promise<void>;
+};

package/dist/admin/src/features/templates/fonts/useFonts.d.ts

@@ -0,0 +1,2 @@
+/** Catálogo completo (del código y subidas); re-renderiza cuando cambian las subidas (S4.16). */
+export declare const useFonts: () => import("./catalog").FontDef[];

package/dist/admin/src/features/templates/model/drag.d.ts

@@ -0,0 +1,10 @@
+import type { Delta } from './layers';
+import type { Layer, LayerPatch } from './types';
+/** Manija de redimensión que ofrece cada tipo de capa. */
+export type Handle = 'box' | 'width' | 'size';
+export type DragMode = 'move' | Handle;
+export declare const handleFor: (layer: Layer) => Handle | null;
+/** Cambio que produce un arrastre `delta` (px de pantalla) sobre la capa tal como estaba al empezar. */
+export declare const dragPatch: (mode: DragMode, start: Layer, delta: Delta, scale: number, { keepRatio }?: {
+    keepRatio?: boolean;
+}) => LayerPatch;

package/dist/admin/src/features/templates/model/editorReducer.d.ts

@@ -0,0 +1,58 @@
+import type { Layer, LayerPatch, Template } from './types';
+export declare const HISTORY_LIMIT = 30;
+export interface EditorState {
+    template: Template;
+    layers: Layer[];
+    past: Layer[][];
+    future: Layer[][];
+    /** Capas antes del gesto transitorio en curso (arrastre); `commit` las pasa al historial. */
+    pending: Layer[] | null;
+    selectedId: string | null;
+}
+export type EditorAction = {
+    type: 'select';
+    id: string | null;
+} | {
+    type: 'add';
+    layer: Layer;
+} | {
+    type: 'update';
+    id: string;
+    patch: LayerPatch;
+    transient?: boolean;
+} | {
+    type: 'commit';
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'reorder';
+    id: string;
+    to: 'front' | 'back' | 'up' | 'down';
+} | {
+    type: 'moveTo';
+    id: string;
+    targetId: string;
+    place: 'above' | 'below';
+} | {
+    type: 'toggleBackground';
+    id: string;
+} | {
+    type: 'undo';
+} | {
+    type: 'redo';
+} | {
+    type: 'reset';
+}
+/** Fuera del historial de deshacer: el historial guarda solo capas (diseño S4.5, D5). */
+ | {
+    type: 'setSafeMargin';
+    value: number;
+}
+/** También fuera del historial: renombrar no se deshace con ⌘Z (S4.11). */
+ | {
+    type: 'rename';
+    name: string;
+};
+export declare const initEditor: (template: Template) => EditorState;
+export declare const editorReducer: (state: EditorState, action: EditorAction) => EditorState;

package/dist/admin/src/features/templates/model/layers.d.ts

@@ -0,0 +1,42 @@
+import type { ElementPreset } from './presets';
+import type { Layer, LayerType } from './types';
+/** Siguiente nombre libre para una capa del tipo dado: «Etiqueta 1», «Etiqueta 2», … */
+export declare const nextLayerName: (layers: Pick<Layer, 'label'>[], type: LayerType) => string;
+export interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Caja envolvente aproximada de una capa, en unidades del lienzo. */
+export declare const bbox: (l: Layer) => Box;
+export interface Delta {
+    dx: number;
+    dy: number;
+}
+/** Nueva posición tras arrastrar `delta` píxeles de pantalla con el lienzo a escala `scale`. */
+export declare const moveBy: (pos: {
+    x: number;
+    y: number;
+}, { dx, dy }: Delta, scale: number) => {
+    x: number;
+    y: number;
+};
+/** Nuevo tamaño tras arrastrar la manija inferior derecha. */
+export declare const resizeBy: (size: {
+    w: number;
+    h: number;
+}, { dx, dy }: Delta, scale: number, { min, keepRatio }?: {
+    min?: number;
+    keepRatio?: boolean;
+}) => {
+    w: number;
+    h: number;
+};
+/** Capa nueva a partir de un elemento de la paleta, dentro del margen seguro y a media altura. */
+export declare const createLayerFromPreset: (preset: ElementPreset, layers: Layer[], canvas: {
+    safeMargin: number;
+    height: number;
+}, id: string) => Layer;
+/** `#RRGGBB` → `rgba(r, g, b, a)`. */
+export declare const hexA: (hex: string, alpha: number) => string;

package/dist/admin/src/features/templates/model/palette.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Paleta InterWare (paleta canónica del brochure). Es la única que ofrecen las muestras del
+ * editor y la única que usan las plantillas base.
+ */
+export declare const PALETTE: readonly [{
+    readonly label: "Navy";
+    readonly value: "#1F2A44";
+}, {
+    readonly label: "Rojo";
+    readonly value: "#E4002B";
+}, {
+    readonly label: "Teal";
+    readonly value: "#00C7B1";
+}, {
+    readonly label: "Teal suave";
+    readonly value: "#92CFC7";
+}, {
+    readonly label: "Amarillo";
+    readonly value: "#FFC844";
+}, {
+    readonly label: "Amarillo suave";
+    readonly value: "#F8DF8D";
+}, {
+    readonly label: "Gris";
+    readonly value: "#5B6473";
+}, {
+    readonly label: "Papel";
+    readonly value: "#EEF1F5";
+}, {
+    readonly label: "Blanco";
+    readonly value: "#FFFFFF";
+}];
+export declare const NAVY = "#1F2A44";
+export declare const RED = "#E4002B";
+export declare const TEAL = "#00C7B1";
+export declare const GREY = "#5B6473";
+export declare const PAPER = "#EEF1F5";
+export declare const WHITE = "#FFFFFF";

package/dist/admin/src/features/templates/model/presets.d.ts

@@ -0,0 +1,17 @@
+import type { Layer, LayerType, ShapeKind } from './types';
+/** Elemento que se puede agregar desde la paleta del editor. */
+export interface ElementPreset {
+    id: string;
+    label: string;
+    /** Nombre de un ícono de @strapi/icons para la paleta. */
+    icon: string;
+    type: LayerType;
+    props: Partial<Layer> & Record<string, unknown>;
+}
+export declare const ELEMENT_PRESETS: ElementPreset[];
+export declare const SHAPE_TYPES: {
+    id: ShapeKind;
+    label: string;
+}[];
+/** Íconos de @strapi/icons disponibles como contenido de una pieza. */
+export declare const ICON_LIBRARY: readonly ["Star", "Heart", "Lightning", "CheckCircle", "Shield", "Sparkle", "Rocket", "User", "Briefcase", "SealCheck", "Crown", "Lightbulb", "Server", "Globe", "Cloud", "Database", "Cog", "ChartBubble", "ChartPie", "PresentationChart", "Earth", "PinMap", "Mail", "Phone", "Play"];

package/dist/admin/src/features/templates/model/shortcuts.d.ts

@@ -0,0 +1,19 @@
+/** Comandos de teclado del editor (diseño S4.5, D6). */
+export type Command = 'undo' | 'redo' | 'duplicate' | 'save' | 'deselect' | 'delete' | {
+    reorder: 'front' | 'back' | 'up' | 'down';
+} | {
+    nudge: {
+        dx: number;
+        dy: number;
+    };
+};
+type KeyLike = {
+    key: string;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+};
+export declare const commandFor: (e: KeyLike) => Command | null;
+/** ¿El foco está en un lugar donde se escribe? Ahí los atajos no aplican. */
+export declare const isTyping: (target: EventTarget | null) => boolean;
+export {};

package/dist/admin/src/features/templates/model/snap.d.ts

@@ -0,0 +1,24 @@
+import type { Box } from './layers';
+import type { Layer } from './types';
+/** Redondea a la unidad de la cuadrícula más cercana (diseño S4.5, D1). */
+export declare const snapValue: (v: number, unit: number) => number;
+/**
+ * Guías inteligentes: alinea el borde o el centro de `box` con el borde o centro más cercano del
+ * lienzo o de otra capa, si está a menos de `tolerance` (unidades del lienzo). Por eje se aplica la
+ * coincidencia más cercana y se devuelve su línea guía.
+ */
+export declare const alignToGuides: (box: Box, others: Box[], canvas: {
+    w: number;
+    h: number;
+}, tolerance: number) => {
+    x: number;
+    y: number;
+    v: number[];
+    h: number[];
+};
+/** Capas visibles (sin contar fondos) que salen del área segura (diseño S4.5, D8). */
+export declare const safeViolations: (layers: Layer[], t: {
+    width: number;
+    height: number;
+    safeMargin: number;
+}) => Layer[];

package/dist/admin/src/features/templates/model/templates.d.ts

@@ -0,0 +1,8 @@
+import type { Template } from './types';
+/**
+ * Las 6 plantillas base del prototipo, adaptadas a la marca InterWare: paleta del brochure,
+ * Texta para titulares (`font: 'display'`) e Inter para el resto. Viven en código (ADR-004).
+ */
+export declare const BASE_TEMPLATES: Template[];
+/** Id de la plantilla base que representa (original o editada), o `undefined` si no es base (S4.15). */
+export declare const baseIdOf: (t: Template) => string | undefined;