Redesign the site and docs for TallCraftUI 3

CLAUDE.md

@@ -2,12 +2,12 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-Documentation site for the [TallCraftUI](https://github.com/developermithu/tallcraftui) Blade component library (Laravel 13, Livewire 4, Tailwind 4). The `3.x` branch documents TallCraftUI 3 (Livewire 4); `2.x` documents TallCraftUI 2 (Laravel 12, Livewire 3 + Volt). Served locally by Herd at http://tallcraftui-doc.test.
+Documentation site for the [TallCraftUI](https://github.com/developermithu/tallcraftui) Blade component library (Laravel 13, Livewire 4, Tailwind 4). The `3.x` branch documents TallCraftUI 3 (Livewire 4); `2.x` documents TallCraftUI 2 (Laravel 12, Livewire 3 + Volt). Production is https://tallcraftui.com; served locally by Herd at http://tallcraftui-doc.test. Canonical, Open Graph and JSON-LD URLs always use `docs.site_url` (tallcraftui.com), not the request host.
 
 ## Commands
 
 - Use **bun** for frontend (`bun install`, `bun run dev`, `bun run build`), not npm/pnpm, even though the README mentions them.
-- For GitHub (PRs, issues, reviews), use the GitHub MCP tools; `gh` is not installed. Repo: `developermithu/tallcraftui.developermithu.com`, main branch `2.x`.
+- For GitHub (PRs, issues, reviews), use the GitHub MCP tools; `gh` is not installed. Repo: `developermithu/tallcraftui.com`, main branch `2.x`.
 - Format PHP with `vendor/bin/pint`. Tests use Pest (`vendor/bin/pest`), but the only tests are the Laravel stubs.
 
 ## Build assets
@@ -17,11 +17,22 @@ Documentation site for the [TallCraftUI](https://github.com/developermithu/tallc
 
 ## Doc pages
 
-- Each component page is a Livewire 4 single-file component (`new class extends Livewire\Component`, no Volt) in `resources/views/livewire/docs/components/<name>.blade.php`, using `#[Layout('components.layouts.app')]` and `#[Title(...)]`. `table` and `toast` are the exceptions; they use class-based Livewire components in `app/Livewire/Docs/Components/`.
+- `config/docs.php` is the docs registry. The sidebar, search index (`/search-index.json`, used by the Cmd/Ctrl+K palette), breadcrumbs, previous/next links, related components, the `/docs` landing page and the homepage component grid are all generated from it by `App\Support\Docs`.
+- Each component page is a Livewire 4 single-file component (`new class extends Livewire\Component`, no Volt) in `resources/views/livewire/docs/components/<name>.blade.php`, using `#[Layout('components.layouts.app')]` and `#[Title('<Name> - TallCraftUI Components')]`. `table` and `toast` are the exceptions; they use class-based Livewire components in `app/Livewire/Docs/Components/`.
 - Write examples as `<x-code-block title="...">` wrapping `@verbatim('docs') ... @endverbatim`. The component strips `('docs')`, de-indents the code, shows it with Torchlight, and renders it live with `Blade::render()`. Any `wire:model` property used in an example must be declared on the page's component class. Show those properties to readers in a `@php // public int $x = 3; @endphp` comment inside the snippet.
-- `<x-on-this-page.item title="...">` anchors come from `Str::slug($title)`, so each one must match a `<x-code-block>` title exactly.
-- Every page sets SEO meta in `@slot('metaTags')` with `<x-meta-tags title=... description=... />`.
-- Adding a page means touching four places: the component view, a `Route::livewire()` route in `routes/web.php` (named `docs.components.<name>`), an entry in `resources/views/livewire/partials/sidebar.blade.php`, and a `<url>` in the hand-maintained `public/sitemap.xml`.
+- Standalone snippets use `<x-code language="..." filename="...">` with `@verbatim` inside (otherwise Blade compiles tags like `<x-tc-input>`). Group snippets in tabs with `<x-docs.code-group>` and `<x-code tab="...">`. Prose sections use `<x-docs.section title="..." step="1">` (`level="3"` for subsections); notes use `<x-docs.callout type="note|tip|warning">`.
+- The "On this page" TOC is generated from the page's Blade source: `<x-code-block title>`, `<x-docs.section title>` and `<h2 id>` headings, in order. Don't add manual TOC markup.
+- The API reference at the bottom of component pages is generated by reflecting on the package's component classes, from the `components` key in the registry. Don't hand-write prop tables.
+- Every page sets SEO meta in `@slot('metaTags')` with `<x-meta-tags title=... description=... />`. Without it, the registry title and description are used.
+- Adding a page means touching four places: the component view, a `Route::livewire()` route in `routes/web.php` (named `docs.components.<name>`), an entry in `config/docs.php`, and a `<url>` in the hand-maintained `public/sitemap.xml`.
+- Release notes live in `resources/data/changelog.php` (newest first) and render on `/docs/changelog`. Transcribe them from the package's GitHub releases and `CHANGELOG.md`; don't invent entries.
+
+## Site structure
+
+- `components/layouts/base.blade.php` holds the `<head>`, header, footer, search palette and mobile nav. `app` (docs, three-column) and `home` wrap it.
+- Shared chrome is in `resources/views/components/site/*` and docs UI in `components/docs/*`. Homepage sections are in `components/home/*`; sections that read Livewire state (showcase, syntax demo) are `@include` partials in `resources/views/partials/home/`, because anonymous components can't see the page's properties.
+- Design tokens (`brand-*` teal scale, `primary`, radius and shadow tokens, `prose-docs`, `code-inline`) are in `resources/css/app.css`. Neutrals use Tailwind `gray` to match TallCraftUI's own dark mode. TallCraftUI buttons are uppercase by default; the site passes `normal-case tracking-normal` where it wants sentence case.
+- Small Alpine helpers (`docsCode`, `docsToc`, `docsSearch`) are globals in `resources/js/app.js`.
 
 ## TallCraftUI package
 

README.md

@@ -1,15 +1,15 @@
-# [TallCraftUI](https://github.com/developermithu/tallcraftui) 
+# [TallCraftUI](https://github.com/developermithu/tallcraftui)
 
 ## Introduction
 
-This is the source code of [tallcraftui.developermithu.com](https://tallcraftui.developermithu.com) 🚀
+This is the source code of [tallcraftui.com](https://tallcraftui.com) 🚀
 
 ## How to Contribute
 
-Clone the repository: 
+Clone the repository:
 
 ```bash
-git clone https://github.com/developermithu/tallcraftui.developermithu.com.git tallcraftui
+git clone https://github.com/developermithu/tallcraftui.com.git tallcraftui
 ```
 
 Move into the directory `cd tallcraftui` and run the following commands:
@@ -29,11 +29,10 @@ Start the development server:
 
 That's it ✅ visit http://tallcraftui.test
 
-
 Be sure to build the frontend assets by running `npm run build` or `pnpm build` before committing.
 
 ## Follow me 👍
 
 - [Instagram](https://instagram.com/developermithu)
 - [Linkedin](https://linkedin.com/in/developermithu)
-- [Twitter](https://twitter.com/developermithu)
+- [Twitter](https://twitter.com/developermithu)

app/Livewire/Docs/Components/Table.php

@@ -9,27 +9,28 @@
 use Livewire\Component;
 
 #[Layout('components.layouts.app')]
-#[Title('Table components - Tallcraftui')]
+#[Title('Table - TallCraftUI Components')]
 class Table extends Component
 {
     use WithTcTable;
 
     public bool $is_active = false;
+
     public bool $email_verified_at = false;
 
     public function render()
     {
         $users = User::query()
             ->when($this->tcSearch, function ($query) {
-                $query->where('name', 'LIKE', '%' . $this->tcSearch . '%');
+                $query->where('name', 'LIKE', '%'.$this->tcSearch.'%');
             })
             ->when($this->is_active, function ($query) {
                 $query->where('is_active', true);
             })
             ->when($this->email_verified_at, function ($query) {
                 $query->whereNotNull('email_verified_at');
             })
-            ->tap(fn($query) => $this->tcApplySorting($query))
+            ->tap(fn ($query) => $this->tcApplySorting($query))
             ->paginate($this->tcPerPage);
 
         return view('livewire.docs.components.table', compact('users'));

app/Livewire/Docs/Components/Toast.php

@@ -3,8 +3,12 @@
 namespace App\Livewire\Docs\Components;
 
 use Developermithu\Tallcraftui\Traits\WithTcToast;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
 use Livewire\Component;
 
+#[Layout('components.layouts.app')]
+#[Title('Toast - TallCraftUI Components')]
 class Toast extends Component
 {
     use WithTcToast;
@@ -18,16 +22,15 @@ public function showToast1()
     public function showToast2()
     {
         $this->success(
-            title: 'User created successfully', 
+            title: 'User created successfully',
             description: 'Your changes have been saved permanently.'
         );
     }
-
 
     public function showToast3()
     {
         $this->success(
-            title: 'User created successfully', 
+            title: 'User created successfully',
             description: 'Your changes have been saved permanently.',
             showProgress: true
         );
@@ -36,7 +39,7 @@ public function showToast3()
     public function showToast4()
     {
         $this->success(
-            title: 'User created successfully', 
+            title: 'User created successfully',
             description: 'Your changes have been saved permanently.',
             showCloseIcon: true
         );
@@ -107,7 +110,7 @@ public function showDescriptionToast()
     {
         $this->success(title: 'User created successfully', description: 'Your changes have been saved permanently.');
     }
-    
+
     public function render()
     {
         return view('livewire.docs.components.toast');

app/Providers/AppServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use App\Support\Docs;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -11,7 +12,7 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        //
+        $this->app->singleton(Docs::class);
     }
 
     /**