/** * Cube Geometry Utilities * * Path generation for the CREATE SOMETHING cube mark. * Built on the isometric projection utilities from visual/isometric.ts, * specialized for the brand cube at various sizes and use cases. * * Three primary outputs: * - generateCubePaths: Raw SVG paths for component use * - generateFaviconCube: Complete SVG optimized for favicon (16x16, 32x32) * - generateLayoutCube: Complete SVG with proper viewBox for layout use * * "Good design is as little design as possible." - Dieter Rams */ import { type CubeFace } from '../types.js'; /** * Standard cube dimensions for brand mark * Equal-sided cube for balanced visual weight */ export declare const CUBE_UNIT_SIZE = 12; /** * Default viewBox dimensions */ export declare const CUBE_VIEWBOX: { /** Standard mark viewBox */ readonly standard: { readonly width: 32; readonly height: 32; }; /** Favicon viewBox (pixel-perfect at 16x16 and 32x32) */ readonly favicon: { readonly width: 16; readonly height: 16; }; /** Large display viewBox */ readonly display: { readonly width: 64; readonly height: 64; }; }; /** * Center points for each viewBox size */ export declare const CUBE_CENTER: { readonly standard: { readonly x: 16; readonly y: 16; }; readonly favicon: { readonly x: 8; readonly y: 8; }; readonly display: { readonly x: 32; readonly y: 32; }; }; export interface CubePaths { /** Top face path (brightest - creation) */ top: string; /** Left face path (medium - understanding) */ left: string; /** Right face path (subtle - foundation) */ right: string; } export interface CubePathOptions { /** Center X coordinate of the cube */ cx?: number; /** Center Y coordinate of the cube */ cy?: number; /** Size of each cube edge */ size?: number; /** Precision for coordinate rounding (decimal places) */ precision?: number; } /** * Generate isometric cube face paths * * Uses the isometric projection from visual/isometric.ts to create * mathematically correct paths. The cube is centered at (cx, cy) with * equal edge lengths for balanced visual weight. * * @example * const paths = generateCubePaths({ cx: 16, cy: 16, size: 12 }); * // Returns { top: "M ...", left: "M ...", right: "M ..." } */ export declare function generateCubePaths(options?: CubePathOptions): CubePaths; /** * Generate a complete SVG string for favicon use * * Optimized for small sizes (16x16, 32x32) with: * - Minimal decimal precision for smaller file size * - Hardcoded fill colors (no CSS variables for favicon compatibility) * - No animations (static favicon) * * @example * const svg = generateFaviconCube({ size: 32 }); * // Write to public/favicon.svg */ export declare function generateFaviconCube(options?: { /** Output size in pixels (default: 32) */ size?: number; /** Fill color (default: white for dark backgrounds) */ fillColor?: string; }): string; /** * Generate a complete SVG string for layout/component use * * Includes proper viewBox, CSS custom property support, and * accessibility attributes. Suitable for inline use in layouts. * * @example * const svg = generateLayoutCube({ width: 48, height: 48 }); * // Use as component background or inline decoration */ export declare function generateLayoutCube(options?: { /** Output width in pixels (default: 32) */ width?: number; /** Output height in pixels (default: matches width) */ height?: number; /** Use CSS custom properties for colors (default: true) */ useCssVars?: boolean; /** Include aria-label (default: true) */ accessible?: boolean; /** Additional CSS classes */ className?: string; }): string; /** * Generate individual face path for targeted rendering * * Useful when you need only one face (e.g., for staggered animations * or individual face styling). */ export declare function generateCubeFacePath(face: CubeFace, options?: CubePathOptions): string; /** * Get the vertices of a cube face for custom rendering * * Returns the 4 corner points of the specified face, * useful for custom path manipulation or hit testing. */ export declare function getCubeFaceVertices(face: CubeFace, options?: CubePathOptions): Array<{ x: number; y: number; }>; /** * Calculate the bounding box of the cube * * Useful for layout calculations and positioning. */ export declare function getCubeBoundingBox(options?: CubePathOptions): { x: number; y: number; width: number; height: number; };