git-hash-art 0.0.3 → 0.0.4

package/src/lib/canvas/{colors.js → colors.ts}

@@ -1,6 +1,7 @@
 import ColorScheme from "color-scheme";
-import { gitHashToSeed } from "../utils";
+import "../../../global.d";
 
+import { gitHashToSeed } from "../utils";
 
 /**
  * Generates a color scheme based on a given Git hash.
@@ -8,7 +9,7 @@ import { gitHashToSeed } from "../utils";
  * @param {string} gitHash - The Git hash used to generate the color scheme.
  * @returns {string[]} An array of hex color codes representing the generated color scheme.
  */
-export function generateColorScheme(gitHash) {
+export function generateColorScheme(gitHash: string): string[] {
   const seed = gitHashToSeed(gitHash);
   const scheme = new ColorScheme();
   scheme
@@ -16,7 +17,7 @@ export function generateColorScheme(gitHash) {
     .scheme("analogic")
     .variation("soft");
 
-  let colors = scheme.colors().map((hex) => `#${hex}`);
+  let colors = scheme.colors().map((hex: string) => `#${hex}`);
 
   const contrastingHue = (seed + 180) % 360;
   const contrastingScheme = new ColorScheme();
@@ -26,30 +27,69 @@ export function generateColorScheme(gitHash) {
   return colors;
 }
 
+interface MetallicColors {
+  gold: string;
+  silver: string;
+  copper: string;
+  bronze: string;
+}
+
+interface SacredPalette {
+  primary: string;
+  secondary: string;
+  accent: string;
+  metallic: string;
+}
+
+interface ElementalPalette {
+  earth: string;
+  water: string;
+  air: string;
+  fire: string;
+}
+
+interface ChakraPalette {
+  root: string;
+  sacral: string;
+  solar: string;
+  heart: string;
+  throat: string;
+  third_eye: string;
+  crown: string;
+}
+
+type ColorPalette = SacredPalette | ElementalPalette | ChakraPalette | string[];
+
 // Enhanced color scheme generation for sacred geometry
 export class SacredColorScheme {
-  constructor(gitHash) {
+  private seed: number;
+  public baseScheme: string[];
+  private complementaryScheme: string[];
+  private metallic: MetallicColors;
+
+  constructor(gitHash: string) {
     this.seed = this.gitHashToSeed(gitHash);
     this.baseScheme = this.generateBaseScheme();
     this.complementaryScheme = this.generateComplementaryScheme();
     this.metallic = this.generateMetallicColors();
   }
 
-  gitHashToSeed(hash) {
+  private gitHashToSeed(hash: string): number {
     return parseInt(hash.slice(0, 8), 16);
   }
 
-  generateBaseScheme() {
+  private generateBaseScheme(): string[] {
     const scheme = new ColorScheme();
+    scheme;
     return scheme
       .from_hue(this.seed % 360)
       .scheme("analogic")
       .variation("soft")
       .colors()
-      .map((hex) => `#${hex}`);
+      .map((hex: string) => `#${hex}`);
   }
 
-  generateComplementaryScheme() {
+  private generateComplementaryScheme(): string[] {
     const complementaryHue = (this.seed + 180) % 360;
     const scheme = new ColorScheme();
     return scheme
@@ -57,10 +97,10 @@ export class SacredColorScheme {
       .scheme("mono")
       .variation("soft")
       .colors()
-      .map((hex) => `#${hex}`);
+      .map((hex: string) => `#${hex}`);
   }
 
-  generateMetallicColors() {
+  private generateMetallicColors(): MetallicColors {
     return {
       gold: "#FFD700",
       silver: "#C0C0C0",
@@ -69,7 +109,9 @@ export class SacredColorScheme {
     };
   }
 
-  getColorPalette(type = "sacred") {
+  getColorPalette(
+    type: "sacred" | "elemental" | "chakra" | "default" = "sacred",
+  ): ColorPalette {
     switch (type) {
       case "sacred":
         return {

package/src/lib/canvas/{draw.js → draw.ts}

@@ -1,17 +1,29 @@
-import { PatternCombiner } from "../utils";
+import { PatternCombiner, ProportionType } from "../utils";
 import { shapes } from "./shapes";
 
+interface DrawShapeConfig {
+  fillColor: string;
+  strokeColor: string;
+  strokeWidth: number;
+  size: number;
+  rotation: number;
+}
+
+interface EnhanceShapeConfig extends DrawShapeConfig {
+  patterns?: Array<{ type: string; config: any }>;
+  proportionType?: ProportionType;
+  baseOpacity?: number;
+  opacityReduction?: number;
+}
+
 export function drawShape(
-  ctx,
-  shape,
-  x,
-  y,
-  fillColor,
-  strokeColor,
-  strokeWidth,
-  size,
-  rotation
+  ctx: CanvasRenderingContext2D,
+  shape: string,
+  x: number,
+  y: number,
+  config: DrawShapeConfig,
 ) {
+  const { fillColor, strokeColor, strokeWidth, size, rotation } = config;
   ctx.save();
   ctx.translate(x, y);
   ctx.rotate((rotation * Math.PI) / 180);
@@ -30,7 +42,13 @@ export function drawShape(
 }
 
 // Integration with existing generation logic
-export function enhanceShapeGeneration(ctx, shape, x, y, config) {
+export function enhanceShapeGeneration(
+  ctx: CanvasRenderingContext2D,
+  shape: string,
+  x: number,
+  y: number,
+  config: EnhanceShapeConfig,
+) {
   const {
     fillColor,
     strokeColor,

package/src/lib/canvas/shapes/{basic.js → basic.ts}

@@ -1,14 +1,16 @@
-export const drawCircle = (ctx, size) => {
+type DrawFunction = (ctx: CanvasRenderingContext2D, size: number) => void;
+
+export const drawCircle: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
 };
 
-export const drawSquare = (ctx, size) => {
+export const drawSquare: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   ctx.rect(-size / 2, -size / 2, size, size);
 };
 
-export const drawTriangle = (ctx, size) => {
+export const drawTriangle: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   ctx.moveTo(0, -size / 2);
   ctx.lineTo(-size / 2, size / 2);
@@ -16,7 +18,7 @@ export const drawTriangle = (ctx, size) => {
   ctx.closePath();
 };
 
-export const drawHexagon = (ctx, size) => {
+export const drawHexagon: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   for (let i = 0; i < 6; i++) {
     const angle = (Math.PI / 8) * i;
@@ -28,7 +30,7 @@ export const drawHexagon = (ctx, size) => {
   ctx.closePath();
 };
 
-export const drawStar = (ctx, size) => {
+export const drawStar: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   for (let i = 0; i < 10; i++) {
     const angle = Math.PI / 5 + (Math.PI / 5) * i * 3;
@@ -41,7 +43,7 @@ export const drawStar = (ctx, size) => {
   ctx.closePath();
 };
 
-export const drawJackedStar = (ctx, size) => {
+export const drawJackedStar: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   for (let i = 0; i < 10; i++) {
     const angle = Math.PI / 30 + (Math.PI / 30) * i * 8;
@@ -54,14 +56,14 @@ export const drawJackedStar = (ctx, size) => {
   ctx.closePath();
 };
 
-export const drawHeart = (ctx, size) => {
+export const drawHeart: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   ctx.moveTo(0, size / 4);
   ctx.quadraticCurveTo(size / 2, size / 4, 0, -size / 4);
   ctx.quadraticCurveTo(-size / 2, size / 4, 0, size / 4);
 };
 
-export const drawDiamond = (ctx, size) => {
+export const drawDiamond: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   ctx.moveTo(0, -size / 2);
   ctx.lineTo(size / 2, 0);
@@ -70,7 +72,7 @@ export const drawDiamond = (ctx, size) => {
   ctx.closePath();
 };
 
-export const drawCube = (ctx, size) => {
+export const drawCube: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   ctx.moveTo(-size / 2, -size / 2);
   ctx.lineTo(size / 2, -size / 2);
@@ -80,7 +82,7 @@ export const drawCube = (ctx, size) => {
 };
 
 // Optional: Create a shape map for easier lookup
-export const basicShapes = {
+export const basicShapes: Record<string, DrawFunction> = {
   circle: drawCircle,
   square: drawSquare,
   triangle: drawTriangle,
@@ -89,5 +91,5 @@ export const basicShapes = {
   "jacked-star": drawJackedStar,
   heart: drawHeart,
   diamond: drawDiamond,
-  cube: drawCube
-};
+  cube: drawCube,
+};

package/src/lib/canvas/shapes/{complex.js → complex.ts}

@@ -1,6 +1,21 @@
 import { defaultShapeConfig } from "../../constants";
 import { applyTransforms, createCirclePoints, restoreContext } from "./utils";
 
+interface PlatonicSolidConfig {
+  vertices: number;
+  faces: number;
+}
+
+interface FibonacciConfig {
+  iterations: number;
+  growthFactor: number;
+}
+
+interface GoldenRatioConfig {
+  iterations: number;
+  ratio: number;
+}
+
 export const ShapeConfigs = {
   platonic: {
     tetrahedron: { vertices: 4, faces: 4 },
@@ -8,25 +23,41 @@ export const ShapeConfigs = {
     octahedron: { vertices: 6, faces: 8 },
     dodecahedron: { vertices: 20, faces: 12 },
     icosahedron: { vertices: 12, faces: 20 },
-  },
+  } as Record<string, PlatonicSolidConfig>,
   fibonacci: {
     iterations: 13,
     growthFactor: 1.618034, // Golden ratio
-  },
+  } as FibonacciConfig,
   goldenRatio: {
     iterations: 8,
     ratio: 1.618034,
-  },
+  } as GoldenRatioConfig,
 };
 
-export const drawPlatonicSolid = (ctx, size, type, config = {}) => {
+interface ShapeConfig {
+  fillStyle?: string;
+  strokeStyle?: string;
+  lineWidth?: number;
+  rotation?: number;
+  iterations?: number;
+  animate?: boolean;
+  type?: string;
+}
+
+type DrawFunction = (
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  config?: ShapeConfig,
+) => void;
+
+export const drawPlatonicSolid: DrawFunction = (ctx, size, config = {}) => {
   const finalConfig = { ...defaultShapeConfig, ...config };
   applyTransforms(ctx, size, finalConfig);
 
-  const { 
-    vertices, 
-    // faces 
-  } = ShapeConfigs.platonic[type];
+  const {
+    vertices,
+    // faces
+  } = ShapeConfigs.platonic[config.type as keyof typeof ShapeConfigs.platonic];
   const radius = size / 2;
 
   // Calculate vertices based on platonic solid type
@@ -48,7 +79,7 @@ export const drawPlatonicSolid = (ctx, size, type, config = {}) => {
   restoreContext(ctx);
 };
 
-export const drawFibonacciSpiral = (ctx, size, config = {}) => {
+export const drawFibonacciSpiral: DrawFunction = (ctx, size, config = {}) => {
   const finalConfig = {
     ...defaultShapeConfig,
     ...ShapeConfigs.fibonacci,
@@ -82,7 +113,7 @@ export const drawFibonacciSpiral = (ctx, size, config = {}) => {
   restoreContext(ctx);
 };
 
-export const drawIslamicPattern = (ctx, size, config = {}) => {
+export const drawIslamicPattern: DrawFunction = (ctx, size, config = {}) => {
   const finalConfig = { ...defaultShapeConfig, ...config };
   applyTransforms(ctx, size, finalConfig);
 
@@ -99,34 +130,29 @@ export const drawIslamicPattern = (ctx, size, config = {}) => {
       // Draw star pattern at each intersection
       const radius = unit / 2;
       for (let k = 0; k < 8; k++) {
-        const angle = (k / 8) * Math.PI * 2;
-        const x1 = x + Math.cos(angle) * radius;
-        const y1 = y + Math.sin(angle) * radius;
-        if (k === 0) {
-          ctx.moveTo(x1, y1);
-        } else {
-          ctx.lineTo(x1, y1);
-        }
+        const angle = (Math.PI / 4) * k;
+        const x1 = x + radius * Math.cos(angle);
+        const y1 = y + radius * Math.sin(angle);
+        const x2 = x + radius * Math.cos(angle + Math.PI / 4);
+        const y2 = y + radius * Math.sin(angle + Math.PI / 4);
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
       }
-      ctx.closePath();
     }
   }
 
-  if (finalConfig.fillStyle !== "transparent") {
-    ctx.fill();
-  }
   ctx.stroke();
   restoreContext(ctx);
 };
 
-export const drawCelticKnot = (ctx, size, config = {}) => {
+export const drawCelticKnot: DrawFunction = (ctx, size, config = {}) => {
   const finalConfig = { ...defaultShapeConfig, ...config };
   applyTransforms(ctx, size, finalConfig);
 
   const gridSize = 4;
   const unit = size / gridSize;
 
-  const drawKnotSegment = (x, y, type) => {
+  const drawKnotSegment = (x: number, y: number, type: string) => {
     ctx.beginPath();
     switch (type) {
       case "over":
@@ -137,7 +163,7 @@ export const drawCelticKnot = (ctx, size, config = {}) => {
           x + unit / 2,
           y + unit,
           x + unit,
-          y + unit
+          y + unit,
         );
         break;
       case "under":
@@ -160,7 +186,7 @@ export const drawCelticKnot = (ctx, size, config = {}) => {
   restoreContext(ctx);
 };
 
-export const drawMerkaba = (ctx, size, config = {}) => {
+export const drawMerkaba: DrawFunction = (ctx, size, config = {}) => {
   const finalConfig = { ...defaultShapeConfig, ...config };
   applyTransforms(ctx, size, finalConfig);
 
@@ -194,12 +220,68 @@ export const drawMerkaba = (ctx, size, config = {}) => {
   restoreContext(ctx);
 };
 
-export const complexShapes = {
-  platonicSolid: (ctx, size, type = "tetrahedron", config) =>
-    drawPlatonicSolid(ctx, size, type, config),
-  fibonacciSpiral: (ctx, size, config) =>
-    drawFibonacciSpiral(ctx, size, config),
-  islamicPattern: (ctx, size, config) => drawIslamicPattern(ctx, size, config),
-  celticKnot: (ctx, size, config) => drawCelticKnot(ctx, size, config),
-  merkaba: (ctx, size, config) => drawMerkaba(ctx, size, config),
+export const drawMandala: DrawFunction = (ctx, size, config = {}) => {
+  const finalConfig = { ...defaultShapeConfig, ...config };
+  applyTransforms(ctx, size, finalConfig);
+
+  const numCircles = 8;
+  const numPoints = 16;
+  const radius = size / 2;
+
+  ctx.beginPath();
+  for (let i = 1; i <= numCircles; i++) {
+    const circleRadius = (radius / numCircles) * i;
+    ctx.moveTo(circleRadius, 0);
+    ctx.arc(0, 0, circleRadius, 0, Math.PI * 2);
+
+    for (let j = 0; j < numPoints; j++) {
+      const angle = (Math.PI * 2 * j) / numPoints;
+      const x = circleRadius * Math.cos(angle);
+      const y = circleRadius * Math.sin(angle);
+      ctx.moveTo(0, 0);
+      ctx.lineTo(x, y);
+    }
+  }
+
+  ctx.stroke();
+  restoreContext(ctx);
+};
+
+export const drawFractal: DrawFunction = (ctx, size, config = {}) => {
+  const finalConfig = { ...defaultShapeConfig, ...config, iterations: 5 };
+  applyTransforms(ctx, size, finalConfig);
+
+  const drawBranch = (
+    x: number,
+    y: number,
+    length: number,
+    angle: number,
+    depth: number,
+  ) => {
+    if (depth === 0) return;
+
+    const endX = x + length * Math.cos(angle);
+    const endY = y + length * Math.sin(angle);
+
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+
+    drawBranch(endX, endY, length * 0.7, angle - Math.PI / 6, depth - 1);
+    drawBranch(endX, endY, length * 0.7, angle + Math.PI / 6, depth - 1);
+  };
+
+  drawBranch(0, size / 2, size / 4, -Math.PI / 2, finalConfig.iterations);
+  restoreContext(ctx);
+};
+
+export const complexShapes: Record<string, DrawFunction> = {
+  platonicSolid: drawPlatonicSolid,
+  fibonacciSpiral: drawFibonacciSpiral,
+  islamicPattern: drawIslamicPattern,
+  celticKnot: drawCelticKnot,
+  merkaba: drawMerkaba,
+  mandala: drawMandala,
+  fractal: drawFractal,
 };

package/src/lib/canvas/shapes/{index.js → index.ts}

@@ -2,7 +2,13 @@ import { basicShapes } from "./basic";
 import { complexShapes } from "./complex";
 import { sacredShapes } from "./sacred";
 
-export const shapes = {
+type DrawFunction = (
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  config?: any,
+) => void;
+
+export const shapes: Record<string, DrawFunction> = {
   ...basicShapes,
   ...complexShapes,
   ...sacredShapes,