docs: consolidate documentation into organized structure

- Move 12 markdown files from root to docs/ subdirectories
- Organize documentation by category:
  • docs/troubleshooting/ (1 file)  - Technical troubleshooting guides
  • docs/deployment/      (4 files) - Deployment and security documentation
  • docs/guides/          (3 files) - Feature-specific guides
  • docs/planning/        (4 files) - Planning and improvement proposals

Root directory cleanup:
- Reduced from 16 to 4 markdown files in root
- Only essential project files remain:
  • CLAUDE.md (AI instructions)
  • README.md (Main project readme)
  • CLEANUP_PLAN.md (Current cleanup plan)
  • SRC_STRUCTURE_IMPROVEMENTS.md (Structure improvements)

This improves:
✅ Documentation discoverability
✅ Logical organization by purpose
✅ Clean root directory
✅ Better maintainability

src/Framework/View/Components/Image.php

@@ -0,0 +1,134 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Framework\View\Components;
+
+use App\Framework\View\ValueObjects\HtmlAttributes;
+use App\Framework\View\ValueObjects\HtmlElement;
+use App\Framework\View\ValueObjects\HtmlTag;
+use App\Framework\View\ValueObjects\StandardHtmlElement;
+use App\Framework\View\ValueObjects\TagName;
+
+final readonly class Image implements HtmlElement
+{
+    public HtmlTag $tag;
+    public HtmlAttributes $attributes;
+    public string $content;
+
+    public function __construct(
+        public string $src,
+        public string $alt,
+        public ?int $width = null,
+        public ?int $height = null,
+        public string $loading = 'lazy',
+        public string $decoding = 'async',
+        public ?string $srcset = null,
+        public ?string $sizes = null,
+        public HtmlAttributes $additionalAttributes = new HtmlAttributes()
+    ) {
+        $this->tag = new HtmlTag(TagName::IMG);
+
+        $this->attributes = HtmlAttributes::empty()
+            ->with('src', $this->src)
+            ->with('alt', $this->alt)
+            ->with('loading', $this->loading)
+            ->with('decoding', $this->decoding);
+
+        if ($this->width !== null) {
+            $this->attributes = $this->attributes->with('width', (string) $this->width);
+        }
+
+        if ($this->height !== null) {
+            $this->attributes = $this->attributes->with('height', (string) $this->height);
+        }
+
+        if ($this->srcset !== null) {
+            $this->attributes = $this->attributes->with('srcset', $this->srcset);
+        }
+
+        if ($this->sizes !== null) {
+            $this->attributes = $this->attributes->with('sizes', $this->sizes);
+        }
+
+        // Merge additional attributes
+        foreach ($this->additionalAttributes->attributes as $name => $value) {
+            $this->attributes = $this->attributes->with($name, $value);
+        }
+
+        $this->content = '';
+    }
+
+    public static function create(string $src, string $alt): self
+    {
+        return new self(src: $src, alt: $alt);
+    }
+
+    public static function responsive(
+        string $src,
+        string $alt,
+        string $srcset,
+        string $sizes = '100vw'
+    ): self {
+        return new self(
+            src: $src,
+            alt: $alt,
+            srcset: $srcset,
+            sizes: $sizes
+        );
+    }
+
+    public function withDimensions(int $width, int $height): self
+    {
+        return new self(
+            src: $this->src,
+            alt: $this->alt,
+            width: $width,
+            height: $height,
+            loading: $this->loading,
+            decoding: $this->decoding,
+            srcset: $this->srcset,
+            sizes: $this->sizes,
+            additionalAttributes: $this->additionalAttributes
+        );
+    }
+
+    public function eager(): self
+    {
+        return new self(
+            src: $this->src,
+            alt: $this->alt,
+            width: $this->width,
+            height: $this->height,
+            loading: 'eager',
+            decoding: $this->decoding,
+            srcset: $this->srcset,
+            sizes: $this->sizes,
+            additionalAttributes: $this->additionalAttributes
+        );
+    }
+
+    public function syncDecoding(): self
+    {
+        return new self(
+            src: $this->src,
+            alt: $this->alt,
+            width: $this->width,
+            height: $this->height,
+            loading: $this->loading,
+            decoding: 'sync',
+            srcset: $this->srcset,
+            sizes: $this->sizes,
+            additionalAttributes: $this->additionalAttributes
+        );
+    }
+
+    public function __toString(): string
+    {
+        return (string) StandardHtmlElement::create(
+            $this->tag->name,
+            $this->attributes,
+            $this->content
+        );
+    }
+}