tuiuiu.js 0.1.1

package/dist/design-system/media/picture.d.ts

@@ -0,0 +1,304 @@
+/**
+ * Picture Component - Display ASCII art and character-based images
+ *
+ * Use this for:
+ * - ASCII art logos and graphics
+ * - Splash screens
+ * - Character-based images (including colored pixel art)
+ * - Decorative elements
+ */
+import type { VNode } from '../../utils/types.js';
+/**
+ * A single pixel with character and optional colors
+ */
+export interface Pixel {
+    /** The character to display */
+    char: string;
+    /** Foreground color (supports named colors, hex, rgb) */
+    fg?: string;
+    /** Background color */
+    bg?: string;
+}
+/**
+ * A 2D pixel grid for colored ASCII art
+ */
+export type PixelGrid = Pixel[][];
+/**
+ * Color palette for mapping characters to colors
+ */
+export type ColorPalette = Record<string, {
+    fg?: string;
+    bg?: string;
+}>;
+/**
+ * Create a pixel grid from source and color palette
+ *
+ * @example
+ * ```typescript
+ * const art = `
+ * RRR
+ * GGG
+ * BBB
+ * `;
+ *
+ * const palette = {
+ *   'R': { fg: 'red' },
+ *   'G': { fg: 'green' },
+ *   'B': { fg: 'blue' },
+ * };
+ *
+ * const grid = createPixelGrid(art, palette);
+ * ```
+ */
+export declare function createPixelGrid(source: string, palette: ColorPalette): PixelGrid;
+/**
+ * Create a pixel grid from a simple color map
+ * Each cell can be a color name, and we use a block character
+ *
+ * @example
+ * ```typescript
+ * const colorMap = [
+ *   ['red', 'red', 'red'],
+ *   ['green', 'green', 'green'],
+ *   ['blue', 'blue', 'blue'],
+ * ];
+ *
+ * const grid = createPixelGridFromColors(colorMap);
+ * ```
+ */
+export declare function createPixelGridFromColors(colors: (string | null)[][], char?: string): PixelGrid;
+/**
+ * Parse BBCode colored ASCII art format to PixelGrid
+ *
+ * Input format: [color=#hex]char[/color][color=#hex]char[/color]...
+ *
+ * Useful for importing colored ASCII art from text-to-ASCII generators.
+ */
+export declare function parseColoredBBCode(bbcode: string): PixelGrid;
+/**
+ * Render a pixel grid to an ANSI string
+ */
+export declare function renderPixelGrid(grid: PixelGrid): string;
+/**
+ * How the picture should fit within its container
+ */
+export type PictureFit = 'none' | 'contain' | 'cover' | 'fill' | 'crop';
+/**
+ * Horizontal alignment within container
+ */
+export type PictureAlignX = 'left' | 'center' | 'right';
+/**
+ * Vertical alignment within container
+ */
+export type PictureAlignY = 'top' | 'center' | 'bottom';
+export interface PictureProps {
+    /** The ASCII art content (string with newlines or array of strings) */
+    source: string | string[];
+    /** Fixed width (characters). If not set, uses source width */
+    width?: number;
+    /** Fixed height (lines). If not set, uses source height */
+    height?: number;
+    /** How to fit the picture in the container */
+    fit?: PictureFit;
+    /** Horizontal alignment */
+    alignX?: PictureAlignX;
+    /** Vertical alignment */
+    alignY?: PictureAlignY;
+    /** Foreground color */
+    color?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Character to treat as transparent (won't be rendered) */
+    transparent?: string;
+    /** Border style */
+    borderStyle?: 'none' | 'single' | 'double' | 'round' | 'bold';
+    /** Border color */
+    borderColor?: string;
+    /** Padding inside the picture frame */
+    padding?: number;
+    /** Whether to preserve colors in source (ANSI codes) */
+    preserveColors?: boolean;
+}
+/**
+ * Picture - Display ASCII art and character-based images
+ *
+ * @example
+ * ```typescript
+ * // Simple ASCII art
+ * Picture({
+ *   source: `
+ *     ╭─────╮
+ *     │ HI! │
+ *     ╰─────╯
+ *   `,
+ *   color: 'cyan',
+ * })
+ *
+ * // Logo with fixed size
+ * Picture({
+ *   source: LOGO_ART,
+ *   width: 40,
+ *   height: 10,
+ *   fit: 'contain',
+ *   alignX: 'center',
+ *   alignY: 'center',
+ * })
+ *
+ * // Splash screen
+ * Picture({
+ *   source: SPLASH_ART,
+ *   width: process.stdout.columns,
+ *   height: process.stdout.rows,
+ *   fit: 'contain',
+ *   alignX: 'center',
+ *   alignY: 'center',
+ *   color: 'magenta',
+ * })
+ * ```
+ */
+export declare function Picture(props: PictureProps): VNode;
+/**
+ * Create a framed picture with a title
+ */
+export interface FramedPictureProps extends PictureProps {
+    /** Title to display at the top of the frame */
+    title?: string;
+    /** Title color */
+    titleColor?: string;
+}
+/**
+ * FramedPicture - Picture with a decorative frame and optional title
+ *
+ * @example
+ * ```typescript
+ * FramedPicture({
+ *   source: LOGO_ART,
+ *   title: ' My App ',
+ *   titleColor: 'cyan',
+ *   borderStyle: 'double',
+ *   borderColor: 'gray',
+ * })
+ * ```
+ */
+export declare function FramedPicture(props: FramedPictureProps): VNode;
+/**
+ * Common ASCII art patterns
+ */
+export declare const AsciiPatterns: {
+    /** Horizontal line */
+    hline: (width: number, char?: string) => string;
+    /** Vertical line */
+    vline: (height: number, char?: string) => string;
+    /** Box */
+    box: (width: number, height: number, style?: "single" | "double") => string;
+    /** Diamond shape */
+    diamond: (size: number) => string;
+    /** Arrow pointing right */
+    arrowRight: string;
+    /** Arrow pointing left */
+    arrowLeft: string;
+    /** Star */
+    star: string;
+    /** Heart */
+    heart: string;
+    /** Checkmark */
+    checkmark: string;
+    /** Cross/X */
+    cross: string;
+};
+/**
+ * Generate a simple text banner
+ */
+export declare function createBanner(text: string, style?: 'simple' | 'box' | 'double'): string;
+export interface ColoredPictureProps {
+    /** Pixel grid to render */
+    pixels: PixelGrid;
+    /** Fixed width (will pad/crop if needed) */
+    width?: number;
+    /** Fixed height (will pad/crop if needed) */
+    height?: number;
+    /** Horizontal alignment */
+    alignX?: PictureAlignX;
+    /** Vertical alignment */
+    alignY?: PictureAlignY;
+    /** Border style */
+    borderStyle?: 'none' | 'single' | 'double' | 'round' | 'bold';
+    /** Border color */
+    borderColor?: string;
+    /** Padding */
+    padding?: number;
+}
+/**
+ * ColoredPicture - Display colored pixel art
+ *
+ * @example
+ * ```typescript
+ * // Using palette
+ * const grid = createPixelGrid(`
+ * RRRGGGBBB
+ * RRRGGGBBB
+ * RRRGGGBBB
+ * `, {
+ *   'R': { fg: 'red' },
+ *   'G': { fg: 'green' },
+ *   'B': { fg: 'blue' },
+ * });
+ *
+ * ColoredPicture({ pixels: grid })
+ *
+ * // Using color map
+ * const colors = [
+ *   ['red', 'green', 'blue'],
+ *   ['yellow', 'magenta', 'cyan'],
+ * ];
+ * const grid2 = createPixelGridFromColors(colors);
+ *
+ * ColoredPicture({ pixels: grid2 })
+ * ```
+ */
+export declare function ColoredPicture(props: ColoredPictureProps): VNode;
+/**
+ * A sprite is a collection of frames (pixel grids)
+ */
+export interface Sprite {
+    /** Name of the sprite */
+    name: string;
+    /** Frames of animation */
+    frames: PixelGrid[];
+    /** Current frame index */
+    currentFrame: number;
+    /** Frame duration in ms (for animation) */
+    frameDuration?: number;
+}
+/**
+ * Create a sprite from multiple sources
+ */
+export declare function createSprite(name: string, sources: string[], palette: ColorPalette, frameDuration?: number): Sprite;
+/**
+ * Get the current frame of a sprite as a pixel grid
+ */
+export declare function getSpriteFrame(sprite: Sprite): PixelGrid;
+/**
+ * Advance sprite to next frame
+ */
+export declare function nextSpriteFrame(sprite: Sprite): Sprite;
+/**
+ * Color gradient definition
+ */
+export type GradientStop = {
+    position: number;
+    color: string;
+};
+/**
+ * Create a horizontal gradient bar
+ */
+export declare function createGradientBar(width: number, stops: GradientStop[], char?: string): string;
+/**
+ * Create a rainbow text effect
+ */
+export declare function rainbowText(text: string): string;
+/**
+ * Create a shadow effect (duplicate text offset and dimmed)
+ */
+export declare function createShadowedText(text: string, color: string, shadowColor?: string): string[];
+//# sourceMappingURL=picture.d.ts.map

package/dist/design-system/media/picture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picture.d.ts","sourceRoot":"","sources":["../../../src/design-system/media/picture.ts"],"names":[],"mappings":"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"}