vobi_document 1.0.1 → 1.1.0

package/dist/editor.d.cts

@@ -0,0 +1,190 @@
+import * as react from 'react';
+import { MutableRefObject, ReactNode } from 'react';
+import { Data, IframeConfig, ComponentData, Metadata, Dictionary, PuckApi, Config } from '@puckeditor/core';
+import { R as Registry } from './types-CvKSS1Sy.cjs';
+import { T as Theme } from './theme-BuEFpQeZ.cjs';
+import { T as Translator } from './catalogContext-DenbX-OW.cjs';
+import { V as VariableDef, c as VariableResolver, b as VariableContext, U as UnresolvedDisplay } from './types-BgIugNWW.cjs';
+import 'zod';
+import 'styled-components';
+
+type DataUpdater = Data | ((previous: Data) => Data);
+/** Handle imperativo que a lib preenche para o host mutar o documento sem remontar o editor. */
+type DocumentEditorApi = {
+    /**
+     * Substitui o `data` do editor no lugar (sem remount). Dispara o `onChange` do host uma vez
+     * com o novo `data` (a menos que ele seja deep-equal ao anterior — ver docs/theme.md).
+     */
+    setData: (data: DataUpdater) => void;
+};
+type DocumentEditorApiRef = MutableRefObject<DocumentEditorApi | null> | ((api: DocumentEditorApi | null) => void);
+
+type DocumentHeaderApi = {
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    openSettings: () => void;
+    openPreview: () => void;
+    theme: Theme;
+};
+
+type DisabledBlock = {
+    key: string;
+    reason?: string;
+};
+type SettingsRenderProps = {
+    open: boolean;
+    onClose: () => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+    onLogoUpload?: (file: File) => Promise<{
+        key?: string;
+        url?: string;
+    }>;
+};
+type DocumentEditorProps = {
+    registry: Registry;
+    data?: Partial<Data>;
+    onChange?: (data: Data) => void;
+    onPublish?: (data: Data) => void;
+    iframe?: IframeConfig;
+    disabledBlocks?: DisabledBlock[];
+    theme?: Theme;
+    onThemeChange?: (theme: Theme) => void;
+    onLogoUpload?: (file: File) => Promise<{
+        key?: string;
+        url?: string;
+    }>;
+    renderSettings?: (settings: SettingsRenderProps) => ReactNode;
+    renderHeader?: (api: DocumentHeaderApi) => ReactNode;
+    /** Ações extras na action bar do bloco selecionado. Recebe o item; devolva `ActionBar.Action`s. */
+    renderBlockActions?: (item: ComponentData | null) => ReactNode;
+    /** A lib preenche com `{ setData }` para o host mutar o documento sem remontar o editor. */
+    apiRef?: DocumentEditorApiRef;
+    catalog?: VariableDef[];
+    translator?: Translator;
+    resolver?: VariableResolver;
+    ctx?: VariableContext;
+    unresolvedDisplay?: UnresolvedDisplay;
+    /** Dados do host visíveis a todo bloco como `puck.metadata` (ex.: `{ isTemplate: true }`). */
+    metadata?: Metadata;
+    /** Strings da UI do Puck. Default: PT-BR (`ptBrDictionary`). */
+    dictionary?: Dictionary;
+    patchModifierState?: boolean;
+};
+declare function DocumentEditor({ registry, data, onChange, onPublish, iframe, theme, onThemeChange, onLogoUpload, renderSettings, renderHeader, renderBlockActions, catalog, translator, resolver, ctx, unresolvedDisplay, metadata, dictionary, patchModifierState, disabledBlocks, apiRef }: DocumentEditorProps): react.JSX.Element;
+
+/**
+ * UI do Puck em PT-BR (chaves de `defaultDictionary` do 0.23+).
+ * As interpolações (`{title}`, `{count}`, `{index}`, `{type}`, `{zoom}`, `{label}`) precisam ser preservadas.
+ * Chaves em minúscula no original são rótulos internos — mantidas em minúscula.
+ */
+declare const ptBrDictionary: Dictionary;
+
+/**
+ * O Puck escuta keydown/keyup no `document` (monitorHotkeys) e chama
+ * `e.getModifierState('AltGraph')` sem checar o tipo do evento. Extensão de navegador, gerenciador
+ * de senha ou IME que dispara `new Event('keydown')` em vez de `KeyboardEvent` — comum no Linux —
+ * derruba a árvore com `e.getModifierState is not a function`.
+ *
+ * O fallback vive em `Event.prototype`: `KeyboardEvent`/`MouseEvent` têm implementação própria e
+ * seguem intactos; evento sem informação de modificador passa a responder `false`, que é a resposta
+ * correta. Fica no protótipo (e não num listener de captura) porque evento disparado direto no
+ * `document` chega em AT_TARGET, onde a ordem de registro decidiria quem roda primeiro.
+ */
+declare function installModifierStateShim(): void;
+
+type SaveStatus = 'saving' | 'saved' | 'error';
+type UseDocumentAutosaveOptions<T> = {
+    doc: T;
+    save: (doc: T) => Promise<void>;
+    delay?: number;
+    initialSavedAt?: Date | null;
+    enabled?: boolean;
+};
+type UseDocumentAutosaveResult = {
+    status: SaveStatus;
+    lastSavedAt: Date | null;
+    /** Salva o snapshot mais recente AGORA, aguardando qualquer save feito antes. */
+    flushNow: () => Promise<void>;
+};
+/**
+ * Autosave com debounce por conteúdo e fila de saves — `flushNow()` só resolve
+ * com o snapshot mais recente persistido. Semântica completa: docs/autosave.md.
+ */
+declare function useDocumentAutosave<T>({ doc, save, delay, initialSavedAt, enabled }: UseDocumentAutosaveOptions<T>): UseDocumentAutosaveResult;
+
+type DocumentSettingsModalProps = {
+    open: boolean;
+    onClose: () => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+    onLogoUpload?: (file: File) => Promise<{
+        key?: string;
+        url?: string;
+    }>;
+};
+/**
+ * Modal padrão de configurações do documento (aba Visual: cores, fonte, logo).
+ * Hosts que precisam de mais abas ou do próprio design system substituem via
+ * `renderSettings` no DocumentEditor.
+ */
+declare function DocumentSettingsModal({ open, onClose, theme, onThemeChange, onLogoUpload }: DocumentSettingsModalProps): react.JSX.Element | null;
+
+declare const DEFAULT_COLOR_PRESETS: string[];
+type ColorPickerProps = {
+    /** Cor escolhida (#rrggbb). `undefined` = herdando (mostra `fallback`). */
+    value?: string;
+    /** Cor efetiva exibida quando não há `value` (ex: brand do tema). */
+    fallback?: string;
+    presets?: string[];
+    /** `undefined` no argumento = herdar/limpar. */
+    onChange: (hex?: string) => void;
+    /** Quando presente, exibe a ação de herdar (ex: "Herdar do tema"). */
+    inheritLabel?: string;
+    ariaLabel?: string;
+    /** Lado do swatch em px. */
+    size?: number;
+};
+/**
+ * Seletor de cor unificado do gerador: swatch → popover com paleta, cor atual +
+ * hex e picker avançado (react-colorful) embutido. Usado nos blocos e no modal
+ * de configurações do documento.
+ */
+declare function ColorPicker({ value, fallback, presets, onChange, inheritLabel, ariaLabel, size }: ColorPickerProps): react.JSX.Element;
+
+type ColorPickerPanelProps = {
+    /** Cor inicial (#rrggbb). */
+    value: string;
+    /** Chamado com debounce a cada ajuste (arraste, hex, RGB). */
+    onChange: (hex: string) => void;
+    debounceMs?: number;
+};
+/** Picker avançado (react-colorful): saturação + matiz e campos Hex/RGB, aplicação ao vivo. */
+declare function ColorPickerPanel({ value, onChange, debounceMs }: ColorPickerPanelProps): react.JSX.Element;
+
+declare function normalizeHex(input: string): string | null;
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+declare function rgbToHex(r: number, g: number, b: number): string;
+
+/** Estado exposto pelo `usePuckState` / `useGetPuck`. */
+type PuckState = PuckApi<Config>;
+/**
+ * Hook do Puck **com seletor**. Use sempre este, nunca `usePuck()` avulso: sem seletor
+ * o componente assina o app state inteiro e re-renderiza a cada tecla digitada no canvas
+ * (o próprio Puck emite um warning nesse caso).
+ *
+ * Duas regras:
+ * - A comparação é `Object.is` — selecione primitivos ou referências estáveis
+ *   (`selectedItem`, `appState.data.content`), nunca um objeto montado no seletor.
+ * - Getters (`getSelectorForId`, `getItemById`, `dispatch`…) são recriados a cada mudança
+ *   de estado. O que só é lido dentro de callback vai por `useGetPuck()`, que não assina nada.
+ */
+declare const usePuckState: <T>(selector: (state: PuckState) => T) => T;
+
+export { ColorPicker, ColorPickerPanel, type ColorPickerPanelProps, type ColorPickerProps, DEFAULT_COLOR_PRESETS, type DataUpdater, type DisabledBlock, DocumentEditor, type DocumentEditorApi, type DocumentEditorApiRef, type DocumentEditorProps, type DocumentHeaderApi, DocumentSettingsModal, type DocumentSettingsModalProps, type PuckState, type SaveStatus, type SettingsRenderProps, type UseDocumentAutosaveOptions, type UseDocumentAutosaveResult, hexToRgb, installModifierStateShim, normalizeHex, ptBrDictionary, rgbToHex, useDocumentAutosave, usePuckState };

package/dist/editor.d.ts

@@ -0,0 +1,190 @@
+import * as react from 'react';
+import { MutableRefObject, ReactNode } from 'react';
+import { Data, IframeConfig, ComponentData, Metadata, Dictionary, PuckApi, Config } from '@puckeditor/core';
+import { R as Registry } from './types-CvKSS1Sy.js';
+import { T as Theme } from './theme-BuEFpQeZ.js';
+import { T as Translator } from './catalogContext-HGMU-w_4.js';
+import { V as VariableDef, c as VariableResolver, b as VariableContext, U as UnresolvedDisplay } from './types-BgIugNWW.js';
+import 'zod';
+import 'styled-components';
+
+type DataUpdater = Data | ((previous: Data) => Data);
+/** Handle imperativo que a lib preenche para o host mutar o documento sem remontar o editor. */
+type DocumentEditorApi = {
+    /**
+     * Substitui o `data` do editor no lugar (sem remount). Dispara o `onChange` do host uma vez
+     * com o novo `data` (a menos que ele seja deep-equal ao anterior — ver docs/theme.md).
+     */
+    setData: (data: DataUpdater) => void;
+};
+type DocumentEditorApiRef = MutableRefObject<DocumentEditorApi | null> | ((api: DocumentEditorApi | null) => void);
+
+type DocumentHeaderApi = {
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    openSettings: () => void;
+    openPreview: () => void;
+    theme: Theme;
+};
+
+type DisabledBlock = {
+    key: string;
+    reason?: string;
+};
+type SettingsRenderProps = {
+    open: boolean;
+    onClose: () => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+    onLogoUpload?: (file: File) => Promise<{
+        key?: string;
+        url?: string;
+    }>;
+};
+type DocumentEditorProps = {
+    registry: Registry;
+    data?: Partial<Data>;
+    onChange?: (data: Data) => void;
+    onPublish?: (data: Data) => void;
+    iframe?: IframeConfig;
+    disabledBlocks?: DisabledBlock[];
+    theme?: Theme;
+    onThemeChange?: (theme: Theme) => void;
+    onLogoUpload?: (file: File) => Promise<{
+        key?: string;
+        url?: string;
+    }>;
+    renderSettings?: (settings: SettingsRenderProps) => ReactNode;
+    renderHeader?: (api: DocumentHeaderApi) => ReactNode;
+    /** Ações extras na action bar do bloco selecionado. Recebe o item; devolva `ActionBar.Action`s. */
+    renderBlockActions?: (item: ComponentData | null) => ReactNode;
+    /** A lib preenche com `{ setData }` para o host mutar o documento sem remontar o editor. */
+    apiRef?: DocumentEditorApiRef;
+    catalog?: VariableDef[];
+    translator?: Translator;
+    resolver?: VariableResolver;
+    ctx?: VariableContext;
+    unresolvedDisplay?: UnresolvedDisplay;
+    /** Dados do host visíveis a todo bloco como `puck.metadata` (ex.: `{ isTemplate: true }`). */
+    metadata?: Metadata;
+    /** Strings da UI do Puck. Default: PT-BR (`ptBrDictionary`). */
+    dictionary?: Dictionary;
+    patchModifierState?: boolean;
+};
+declare function DocumentEditor({ registry, data, onChange, onPublish, iframe, theme, onThemeChange, onLogoUpload, renderSettings, renderHeader, renderBlockActions, catalog, translator, resolver, ctx, unresolvedDisplay, metadata, dictionary, patchModifierState, disabledBlocks, apiRef }: DocumentEditorProps): react.JSX.Element;
+
+/**
+ * UI do Puck em PT-BR (chaves de `defaultDictionary` do 0.23+).
+ * As interpolações (`{title}`, `{count}`, `{index}`, `{type}`, `{zoom}`, `{label}`) precisam ser preservadas.
+ * Chaves em minúscula no original são rótulos internos — mantidas em minúscula.
+ */
+declare const ptBrDictionary: Dictionary;
+
+/**
+ * O Puck escuta keydown/keyup no `document` (monitorHotkeys) e chama
+ * `e.getModifierState('AltGraph')` sem checar o tipo do evento. Extensão de navegador, gerenciador
+ * de senha ou IME que dispara `new Event('keydown')` em vez de `KeyboardEvent` — comum no Linux —
+ * derruba a árvore com `e.getModifierState is not a function`.
+ *
+ * O fallback vive em `Event.prototype`: `KeyboardEvent`/`MouseEvent` têm implementação própria e
+ * seguem intactos; evento sem informação de modificador passa a responder `false`, que é a resposta
+ * correta. Fica no protótipo (e não num listener de captura) porque evento disparado direto no
+ * `document` chega em AT_TARGET, onde a ordem de registro decidiria quem roda primeiro.
+ */
+declare function installModifierStateShim(): void;
+
+type SaveStatus = 'saving' | 'saved' | 'error';
+type UseDocumentAutosaveOptions<T> = {
+    doc: T;
+    save: (doc: T) => Promise<void>;
+    delay?: number;
+    initialSavedAt?: Date | null;
+    enabled?: boolean;
+};
+type UseDocumentAutosaveResult = {
+    status: SaveStatus;
+    lastSavedAt: Date | null;
+    /** Salva o snapshot mais recente AGORA, aguardando qualquer save feito antes. */
+    flushNow: () => Promise<void>;
+};
+/**
+ * Autosave com debounce por conteúdo e fila de saves — `flushNow()` só resolve
+ * com o snapshot mais recente persistido. Semântica completa: docs/autosave.md.
+ */
+declare function useDocumentAutosave<T>({ doc, save, delay, initialSavedAt, enabled }: UseDocumentAutosaveOptions<T>): UseDocumentAutosaveResult;
+
+type DocumentSettingsModalProps = {
+    open: boolean;
+    onClose: () => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+    onLogoUpload?: (file: File) => Promise<{
+        key?: string;
+        url?: string;
+    }>;
+};
+/**
+ * Modal padrão de configurações do documento (aba Visual: cores, fonte, logo).
+ * Hosts que precisam de mais abas ou do próprio design system substituem via
+ * `renderSettings` no DocumentEditor.
+ */
+declare function DocumentSettingsModal({ open, onClose, theme, onThemeChange, onLogoUpload }: DocumentSettingsModalProps): react.JSX.Element | null;
+
+declare const DEFAULT_COLOR_PRESETS: string[];
+type ColorPickerProps = {
+    /** Cor escolhida (#rrggbb). `undefined` = herdando (mostra `fallback`). */
+    value?: string;
+    /** Cor efetiva exibida quando não há `value` (ex: brand do tema). */
+    fallback?: string;
+    presets?: string[];
+    /** `undefined` no argumento = herdar/limpar. */
+    onChange: (hex?: string) => void;
+    /** Quando presente, exibe a ação de herdar (ex: "Herdar do tema"). */
+    inheritLabel?: string;
+    ariaLabel?: string;
+    /** Lado do swatch em px. */
+    size?: number;
+};
+/**
+ * Seletor de cor unificado do gerador: swatch → popover com paleta, cor atual +
+ * hex e picker avançado (react-colorful) embutido. Usado nos blocos e no modal
+ * de configurações do documento.
+ */
+declare function ColorPicker({ value, fallback, presets, onChange, inheritLabel, ariaLabel, size }: ColorPickerProps): react.JSX.Element;
+
+type ColorPickerPanelProps = {
+    /** Cor inicial (#rrggbb). */
+    value: string;
+    /** Chamado com debounce a cada ajuste (arraste, hex, RGB). */
+    onChange: (hex: string) => void;
+    debounceMs?: number;
+};
+/** Picker avançado (react-colorful): saturação + matiz e campos Hex/RGB, aplicação ao vivo. */
+declare function ColorPickerPanel({ value, onChange, debounceMs }: ColorPickerPanelProps): react.JSX.Element;
+
+declare function normalizeHex(input: string): string | null;
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+declare function rgbToHex(r: number, g: number, b: number): string;
+
+/** Estado exposto pelo `usePuckState` / `useGetPuck`. */
+type PuckState = PuckApi<Config>;
+/**
+ * Hook do Puck **com seletor**. Use sempre este, nunca `usePuck()` avulso: sem seletor
+ * o componente assina o app state inteiro e re-renderiza a cada tecla digitada no canvas
+ * (o próprio Puck emite um warning nesse caso).
+ *
+ * Duas regras:
+ * - A comparação é `Object.is` — selecione primitivos ou referências estáveis
+ *   (`selectedItem`, `appState.data.content`), nunca um objeto montado no seletor.
+ * - Getters (`getSelectorForId`, `getItemById`, `dispatch`…) são recriados a cada mudança
+ *   de estado. O que só é lido dentro de callback vai por `useGetPuck()`, que não assina nada.
+ */
+declare const usePuckState: <T>(selector: (state: PuckState) => T) => T;
+
+export { ColorPicker, ColorPickerPanel, type ColorPickerPanelProps, type ColorPickerProps, DEFAULT_COLOR_PRESETS, type DataUpdater, type DisabledBlock, DocumentEditor, type DocumentEditorApi, type DocumentEditorApiRef, type DocumentEditorProps, type DocumentHeaderApi, DocumentSettingsModal, type DocumentSettingsModalProps, type PuckState, type SaveStatus, type SettingsRenderProps, type UseDocumentAutosaveOptions, type UseDocumentAutosaveResult, hexToRgb, installModifierStateShim, normalizeHex, ptBrDictionary, rgbToHex, useDocumentAutosave, usePuckState };

package/dist/editor.js

@@ -0,0 +1,7 @@
+export { ColorPicker, ColorPickerPanel, DEFAULT_COLOR_PRESETS, DocumentEditor, DocumentSettingsModal, hexToRgb, installModifierStateShim, normalizeHex, ptBrDictionary, rgbToHex, useDocumentAutosave, usePuckState } from './chunk-HMTCQOEV.js';
+import './chunk-QYBWIJXZ.js';
+import './chunk-PLQNNXS2.js';
+import './chunk-2EBYURIX.js';
+import './chunk-M2TPAU2F.js';
+//# sourceMappingURL=editor.js.map
+//# sourceMappingURL=editor.js.map

package/dist/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"editor.js"}