@refactico/pages 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,376 @@
+import { default as default_2 } from 'react';
+import { RefObject } from 'react';
+
+/**
+ * Text alignment mapping
+ */
+export declare const ALIGNMENT_CLASSES: {
+    readonly left: "text-left";
+    readonly center: "text-center";
+    readonly right: "text-right";
+    readonly justify: "text-justify";
+};
+
+export declare type BlockType = 'text' | 'heading' | 'image' | 'code' | 'table' | 'divider' | 'quote' | 'list' | 'callout';
+
+export declare const CALLOUT_ICONS: {
+    readonly info: "ℹ️";
+    readonly warning: "⚠️";
+    readonly success: "✅";
+    readonly error: "❌";
+    readonly tip: "💡";
+};
+
+export declare const CALLOUT_LABELS: {
+    readonly info: "Info";
+    readonly warning: "Warning";
+    readonly success: "Success";
+    readonly error: "Error";
+    readonly tip: "Tip";
+};
+
+/**
+ * Callout variant styles configuration
+ */
+export declare const CALLOUT_VARIANT_STYLES: {
+    readonly info: {
+        readonly light: {
+            readonly bg: "bg-blue-50";
+            readonly border: "border-blue-200";
+            readonly icon: "text-blue-500";
+            readonly title: "text-blue-800";
+            readonly content: "text-blue-700";
+        };
+        readonly dark: {
+            readonly bg: "bg-blue-950/40";
+            readonly border: "border-blue-800";
+            readonly icon: "text-blue-500";
+            readonly title: "text-blue-300";
+            readonly content: "text-blue-200";
+        };
+    };
+    readonly warning: {
+        readonly light: {
+            readonly bg: "bg-amber-50";
+            readonly border: "border-amber-200";
+            readonly icon: "text-amber-500";
+            readonly title: "text-amber-800";
+            readonly content: "text-amber-700";
+        };
+        readonly dark: {
+            readonly bg: "bg-amber-950/40";
+            readonly border: "border-amber-800";
+            readonly icon: "text-amber-500";
+            readonly title: "text-amber-300";
+            readonly content: "text-amber-200";
+        };
+    };
+    readonly success: {
+        readonly light: {
+            readonly bg: "bg-emerald-50";
+            readonly border: "border-emerald-200";
+            readonly icon: "text-emerald-500";
+            readonly title: "text-emerald-800";
+            readonly content: "text-emerald-700";
+        };
+        readonly dark: {
+            readonly bg: "bg-emerald-950/40";
+            readonly border: "border-emerald-800";
+            readonly icon: "text-emerald-500";
+            readonly title: "text-emerald-300";
+            readonly content: "text-emerald-200";
+        };
+    };
+    readonly error: {
+        readonly light: {
+            readonly bg: "bg-red-50";
+            readonly border: "border-red-200";
+            readonly icon: "text-red-500";
+            readonly title: "text-red-800";
+            readonly content: "text-red-700";
+        };
+        readonly dark: {
+            readonly bg: "bg-red-950/40";
+            readonly border: "border-red-800";
+            readonly icon: "text-red-500";
+            readonly title: "text-red-300";
+            readonly content: "text-red-200";
+        };
+    };
+    readonly tip: {
+        readonly light: {
+            readonly bg: "bg-violet-50";
+            readonly border: "border-violet-200";
+            readonly icon: "text-violet-500";
+            readonly title: "text-violet-800";
+            readonly content: "text-violet-700";
+        };
+        readonly dark: {
+            readonly bg: "bg-violet-950/40";
+            readonly border: "border-violet-800";
+            readonly icon: "text-violet-500";
+            readonly title: "text-violet-300";
+            readonly content: "text-violet-200";
+        };
+    };
+};
+
+export declare interface CalloutBlock {
+    type: 'callout';
+    id: string;
+    content: string;
+    variant: 'info' | 'warning' | 'success' | 'error' | 'tip';
+    title?: string;
+}
+
+export declare const cloneBlock: (block: EditorBlock) => EditorBlock;
+
+export declare interface CodeBlock {
+    type: 'code';
+    id: string;
+    code: string;
+    language: string;
+    showLineNumbers?: boolean;
+    filename?: string;
+}
+
+export declare const createCalloutBlock: (variant?: "info" | "warning" | "success" | "error" | "tip") => EditorBlock;
+
+export declare const createCodeBlock: (code?: string, language?: string) => EditorBlock;
+
+export declare const createDividerBlock: () => EditorBlock;
+
+export declare const createEmptyEditorData: () => EditorData;
+
+export declare const createHeadingBlock: (level?: 1 | 2 | 3 | 4 | 5 | 6, content?: string) => EditorBlock;
+
+export declare const createImageBlock: (src?: string, alt?: string) => EditorBlock;
+
+export declare const createListBlock: (listType?: "bullet" | "numbered" | "checklist") => EditorBlock;
+
+export declare const createQuoteBlock: (content?: string) => EditorBlock;
+
+export declare const createTableBlock: (rows?: number, cols?: number) => EditorBlock;
+
+export declare const createTextBlock: (content?: string) => EditorBlock;
+
+/**
+ * Divider style mapping
+ */
+export declare const DIVIDER_STYLE_CLASSES: {
+    readonly solid: "border-solid";
+    readonly dashed: "border-dashed";
+    readonly dotted: "border-dotted";
+};
+
+export declare interface DividerBlock {
+    type: 'divider';
+    id: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+}
+
+export declare type EditorBlock = TextBlock | HeadingBlock | ImageBlock | CodeBlock | TableBlock | DividerBlock | QuoteBlock | ListBlock | CalloutBlock;
+
+export declare interface EditorData {
+    version: string;
+    createdAt: string;
+    updatedAt: string;
+    blocks: EditorBlock[];
+}
+
+export declare const fileToBase64: (file: File) => Promise<string>;
+
+/**
+ * Font size mapping for text blocks
+ */
+export declare const FONT_SIZE_CLASSES: {
+    readonly sm: "text-sm leading-relaxed";
+    readonly base: "text-base leading-relaxed";
+    readonly lg: "text-lg leading-relaxed";
+    readonly xl: "text-xl leading-relaxed";
+};
+
+/**
+ * Generate a unique ID for blocks.
+ * Uses crypto.randomUUID() when available (modern browsers & Node 19+),
+ * falls back to a timestamp-based approach for older environments.
+ */
+export declare const generateId: () => string;
+
+/**
+ * Get muted text class
+ */
+export declare const getMutedTextClass: (isDark: boolean) => string;
+
+/**
+ * Get placeholder text class
+ */
+export declare const getPlaceholderClass: (isDark: boolean) => string;
+
+/**
+ * Get primary text class
+ */
+export declare const getPrimaryTextClass: (isDark: boolean) => string;
+
+/**
+ * Get secondary text class
+ */
+export declare const getSecondaryTextClass: (isDark: boolean) => string;
+
+/**
+ * Generate small toolbar button class (used in list items, etc.)
+ */
+export declare const getSmallToolbarButtonClass: (isActive: boolean | undefined, isDark: boolean) => string;
+
+/**
+ * Generate toolbar button class based on active state and theme
+ */
+export declare const getToolbarButtonClass: (isActive: boolean | undefined, isDark: boolean) => string;
+
+/**
+ * Get toolbar container classes
+ */
+export declare const getToolbarContainerClass: (isDark: boolean) => string;
+
+/**
+ * Get toolbar divider class
+ */
+export declare const getToolbarDividerClass: (isDark: boolean) => string;
+
+export declare interface HeadingBlock {
+    type: 'heading';
+    id: string;
+    content: string;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    alignment?: 'left' | 'center' | 'right';
+}
+
+export declare interface ImageBlock {
+    type: 'image';
+    id: string;
+    src: string;
+    alt?: string;
+    caption?: string;
+    width?: number;
+    alignment?: 'left' | 'center' | 'right';
+}
+
+/**
+ * Theme utilities and common styling helpers
+ */
+export declare const isDarkTheme: (theme: Theme) => boolean;
+
+export declare interface ListBlock {
+    type: 'list';
+    id: string;
+    items: string[];
+    listType: 'bullet' | 'numbered' | 'checklist';
+    checkedItems?: boolean[];
+}
+
+export declare const moveArrayItem: <T>(arr: T[], fromIndex: number, toIndex: number) => T[];
+
+export declare const PagesEditor: default_2.FC<PagesEditorProps>;
+
+export declare interface PagesEditorProps {
+    initialData?: EditorData;
+    onChange?: (data: EditorData) => void;
+    /** Debounce delay in ms for onChange callback. Default: 300ms */
+    debounceDelay?: number;
+    readOnly?: boolean;
+    placeholder?: string;
+    className?: string;
+    theme?: Theme;
+}
+
+/**
+ * Quote style mapping
+ */
+export declare const QUOTE_STYLE_CLASSES: {
+    readonly default: (isDark: boolean) => string;
+    readonly bordered: (isDark: boolean) => string;
+    readonly modern: (isDark: boolean) => string;
+};
+
+export declare interface QuoteBlock {
+    type: 'quote';
+    id: string;
+    content: string;
+    author?: string;
+    style?: 'default' | 'bordered' | 'modern';
+}
+
+export declare const SUPPORTED_LANGUAGES: readonly ["javascript", "typescript", "python", "java", "csharp", "cpp", "c", "go", "rust", "ruby", "php", "swift", "kotlin", "scala", "html", "css", "scss", "json", "yaml", "xml", "markdown", "sql", "bash", "shell", "powershell", "dockerfile", "plaintext"];
+
+export declare type SupportedLanguage = typeof SUPPORTED_LANGUAGES[number];
+
+export declare interface TableBlock {
+    type: 'table';
+    id: string;
+    rows: TableCell[][];
+    hasHeader?: boolean;
+}
+
+export declare interface TableCell {
+    content: string;
+    header?: boolean;
+    alignment?: 'left' | 'center' | 'right';
+}
+
+export declare interface TextBlock {
+    type: 'text';
+    id: string;
+    content: string;
+    style?: TextStyle;
+    alignment?: 'left' | 'center' | 'right' | 'justify';
+    fontSize?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export declare interface TextStyle {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    code?: boolean;
+    color?: string;
+    backgroundColor?: string;
+    link?: string;
+}
+
+export declare type Theme = 'light' | 'dark';
+
+/**
+ * Custom hook to auto-resize a textarea based on its content.
+ * Returns a ref to attach to the textarea element.
+ */
+export declare function useAutoResize<T extends HTMLTextAreaElement>(content: string): RefObject<T | null>;
+
+/**
+ * Custom hook to manage toolbar visibility for block components.
+ * Uses focus/blur pattern to show toolbar when block is focused.
+ */
+export declare function useBlockToolbar({ readOnly }?: UseBlockToolbarOptions): UseBlockToolbarReturn;
+
+declare interface UseBlockToolbarOptions {
+    readOnly?: boolean;
+}
+
+declare interface UseBlockToolbarReturn {
+    showToolbar: boolean;
+    handleFocus: () => void;
+    handleBlur: (e: React.FocusEvent) => void;
+    containerProps: {
+        onFocus: () => void;
+        onBlur: (e: React.FocusEvent) => void;
+    };
+}
+
+/**
+ * Custom hook to detect clicks outside of a referenced element.
+ * Useful for closing menus, modals, dropdowns, etc.
+ */
+export declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: () => void, enabled?: boolean): void;
+
+export declare const validateEditorData: (data: unknown) => data is EditorData;
+
+export { }