feat: initialize template shell and basic components

.dockerignore

@@ -0,0 +1,5 @@
+target
+.git
+.antigravitycli
+cookie.txt
+.env

.env.example

@@ -0,0 +1,11 @@
+# MongoDB Connection Options
+DATABASE_URL=mongodb://localhost:27017
+DATABASE_NAME=stick_db
+
+# Cryptography Settings
+# Ensure this secret is a strong, random character sequence in production
+JWT_SECRET=super_secret_template_signing_key_that_is_at_least_32_characters_long
+
+# Web Server Options
+HOST=127.0.0.1
+PORT=3000

.gitignore

@@ -0,0 +1,3 @@
+target/
+node_modules/
+.antigravitycli/

Cargo.toml

@@ -0,0 +1,26 @@
+[package]
+name = "stick"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+askama = "0.16.0"
+async-trait = "0.1.89"
+axum = { version = "0.8.9", features = ["macros"] }
+axum-extra = { version = "0.12.6", features = ["cookie"] }
+bcrypt = "0.19.1"
+bson = { version = "3.1.0", features = ["chrono-0_4", "serde", "serde_with-3"] }
+chrono = { version = "0.4.44", features = ["serde"] }
+dotenvy = "0.15.7"
+futures = "0.3.32"
+jsonwebtoken = { version = "10.4.0", features = ["rust_crypto"] }
+mongodb = { version = "3.7.0", features = ["bson-3"] }
+serde = { version = "1.0.228", features = ["derive"] }
+serde_json = "1.0.150"
+serde_with = "3.20.0"
+thiserror = "2.0.18"
+time = "0.3.47"
+tokio = { version = "1.52.3", features = ["full"] }
+tower-http = { version = "0.6.11", features = ["trace", "cors"] }
+tracing = "0.1.44"
+tracing-subscriber = "0.3.23"

Dockerfile

@@ -0,0 +1,69 @@
+# Stage 1: Build Tailwind CSS
+FROM node:20-slim AS tailwind-builder
+WORKDIR /app
+
+# Copy dependency manifests and install dependencies
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy source, templates, and static directories for Tailwind compile scan
+COPY src ./src
+COPY templates ./templates
+COPY static ./static
+
+# Run Tailwind compilation
+RUN npx tailwindcss -i src/input.css -o static/tailwind.css
+
+# Stage 2: Build Rust application
+FROM rust:1.95-slim AS builder
+WORKDIR /app
+
+# Create a dummy project to cache dependencies
+RUN cargo new --bin stick
+WORKDIR /app/stick
+
+# Copy dependency manifests
+COPY Cargo.toml Cargo.lock ./
+
+# Build dependencies (cached as a layer unless Cargo.toml/Cargo.lock changes)
+RUN --mount=type=cache,target=/usr/local/cargo/registry \
+    --mount=type=cache,target=/app/stick/target \
+    cargo build
+
+# Copy tailwind.css compiled in the first stage
+COPY --from=tailwind-builder /app/static/tailwind.css ./static/tailwind.css
+
+# Copy the actual source code, templates, and rest of static files
+COPY src ./src
+COPY templates ./templates
+COPY static ./static
+# Ensure the compiled tailwind.css is definitely the one used
+COPY --from=tailwind-builder /app/static/tailwind.css ./static/tailwind.css
+
+# Build the real binary
+RUN --mount=type=cache,target=/usr/local/cargo/registry \
+    --mount=type=cache,target=/app/stick/target \
+    touch src/main.rs && \
+    cargo build && \
+    cp target/debug/stick /app/stick-bin
+
+# Stage 3: Runtime stage
+FROM debian:bookworm-slim
+WORKDIR /app
+
+# Install runtime dependencies if needed
+RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*
+
+# Copy the binary and templates from the build stage
+COPY --from=builder /app/stick-bin /app/stick
+COPY --from=builder /app/stick/templates /app/templates
+
+# Expose port 3007
+EXPOSE 3007
+
+# Set default HOST and PORT
+ENV HOST=0.0.0.0
+ENV PORT=3007
+
+# Run the app
+CMD ["/app/stick"]

README.md

@@ -0,0 +1,92 @@
+# Stick: Use-Case Oriented Axum + Askama + MongoDB Template
+
+A production-ready Rust web application template organized by vertical features (use-cases) rather than horizontal technical layers.
+
+---
+
+## 🛠️ Technology Stack
+*   **Web Framework**: [Axum](https://github.com/tokio-rs/axum) (v0.8) - Native RPITIT (Return-Position Impl Trait in Traits) extractors.
+*   **Template Engine**: [Askama](https://github.com/djc/askama) (v0.16) - Type-safe, compile-time HTML templates.
+*   **Styling**: [Tailwind CSS](https://tailwindcss.com/) - Modern utility-first styling.
+*   **Database**: [MongoDB Rust Driver](https://github.com/mongodb/mongo-rust-driver) (v3.7) - Configured with BSON v3.
+*   **Authentication/Authorization**: [jsonwebtoken](https://github.com/Keats/jsonwebtoken) (v10) with the `rust_crypto` backend, stored in secure `HttpOnly` session cookies.
+*   **Password Hashing**: [bcrypt](https://github.com/Keats/rust-bcrypt) for secure password storage.
+
+---
+
+## 📁 Use-Case Centered Project Layout
+Unlike traditional MVC setups, files are grouped by their business domain. A single use-case directory contains its models, database repositories, route handlers, local extractors, and templates.
+
+```text
+stick/
+├── Cargo.toml
+├── .env.example
+├── templates/             # Raw HTML template layout files
+│   ├── base.html          # Global layout wrapper
+│   ├── auth/              # Auth views
+│   │   ├── login.html
+│   │   └── register.html
+│   ├── tasks/             # Task manager views
+│   │   └── dashboard.html
+│   └── main_view/         # Main views
+│       └── index.html
+└── src/
+    ├── main.rs            # Server composition, shared state, and route merging
+    ├── common/            # Shared features (errors, database, settings)
+    │   ├── config.rs
+    │   ├── database.rs
+    │   └── errors.rs
+    ├── auth/              # Authentication & User Management Use-Case
+    │   ├── extractors.rs  # Session context extractors
+    │   ├── handlers.rs    # User interaction handlers
+    │   ├── models.rs      # User database schemas
+    │   └── repository.rs  # User database actions
+    ├── tasks/             # Tasks & Dashboard Management Use-Case
+    │   ├── handlers.rs    # Task CRUD handlers
+    │   ├── models.rs      # Task database schemas
+    │   └── repository.rs  # Task database actions
+    └── main_view/         # Static Navigation & Branding Use-Case
+        └── mod.rs         # Serves index & handles public routes
+```
+
+---
+
+## 🚀 Setup & Execution
+
+### 1. Prerequisites
+*   [Rust](https://www.rust-lang.org/tools/install) (v1.75+ required for native async traits)
+*   [MongoDB](https://www.mongodb.com/) running locally (port `27017`)
+
+### 2. Configuration
+Copy the configuration example file and customize your settings:
+```bash
+cp .env.example .env
+```
+
+### 3. Run the Server
+Start the development server:
+```bash
+cargo run
+```
+The server will start listening at `http://127.0.0.1:3000`.
+
+---
+
+## 💡 Designing Custom Use-Cases
+When adding a new feature (e.g., `projects`):
+
+1.  Create `src/projects/` containing:
+    *   `models.rs` (BSON schemas)
+    *   `repository.rs` (Database access)
+    *   `handlers.rs` (Endpoints)
+    *   `mod.rs` (Usecase module entrypoint exposing a `pub fn router<S>() -> Router<S>`)
+2.  Add its view templates under `templates/projects/`.
+3.  Expose the repository and compile constraints in `src/main.rs`.
+4.  Merge the usecase router inside the main router builder:
+    ```rust
+    let app = Router::new()
+        .merge(main_view::router())
+        .merge(auth::router())
+        .merge(projects::router()) // Custom vertical router
+        .with_state(state);
+    ```

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "stick",
+  "version": "1.0.0",
+  "description": "A production-ready Rust web application template organized by vertical features (use-cases) rather than horizontal technical layers.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "@tailwindcss/cli": "^4.3.0",
+    "tailwindcss": "^4.3.0"
+  }
+}

src/auth/extractors.rs

@@ -0,0 +1,87 @@
+use axum::{
+    extract::{FromRef, FromRequestParts, OptionalFromRequestParts},
+    http::request::Parts,
+};
+use axum_extra::extract::CookieJar;
+use jsonwebtoken::{decode, DecodingKey, Validation};
+use mongodb::bson::oid::ObjectId;
+use crate::common::config::Config;
+use crate::common::errors::AppError;
+use crate::auth::models::Claims;
+
+pub struct AuthenticatedUser {
+    pub user_id: ObjectId,
+    pub username: String,
+}
+
+impl<S> FromRequestParts<S> for AuthenticatedUser
+where
+    Config: FromRef<S>,
+    S: Send + Sync,
+{
+    type Rejection = AppError;
+
+    async fn from_request_parts(parts: &mut Parts, state: &S) -> Result<Self, Self::Rejection> {
+        let config = Config::from_ref(state);
+        
+        let jar = CookieJar::from_request_parts(parts, state)
+            .await
+            .map_err(|_| AppError::Unauthorized("Failed to parse cookies".to_string()))?;
+
+        let token = jar
+            .get("token")
+            .map(|cookie| cookie.value().to_string())
+            .ok_or_else(|| AppError::Unauthorized("No authorization token found. Please sign in.".to_string()))?;
+
+        let token_data = decode::<Claims>(
+            &token,
+            &DecodingKey::from_secret(config.jwt_secret.as_bytes()),
+            &Validation::default(),
+        )
+        .map_err(|e| AppError::Unauthorized(format!("Invalid session: {}", e)))?;
+
+        let user_id = ObjectId::parse_str(&token_data.claims.sub)
+            .map_err(|_| AppError::Unauthorized("Invalid user session identifier".to_string()))?;
+
+        Ok(AuthenticatedUser {
+            user_id,
+            username: token_data.claims.username,
+        })
+    }
+}
+
+impl<S> OptionalFromRequestParts<S> for AuthenticatedUser
+where
+    Config: FromRef<S>,
+    S: Send + Sync,
+{
+    type Rejection = AppError;
+
+    async fn from_request_parts(parts: &mut Parts, state: &S) -> Result<Option<Self>, Self::Rejection> {
+        let config = Config::from_ref(state);
+        
+        let jar = CookieJar::from_request_parts(parts, state)
+            .await
+            .map_err(|_| AppError::Unauthorized("Failed to parse cookies".to_string()))?;
+
+        let Some(token_cookie) = jar.get("token") else {
+            return Ok(None);
+        };
+
+        let token = token_cookie.value();
+        let token_data = decode::<Claims>(
+            token,
+            &DecodingKey::from_secret(config.jwt_secret.as_bytes()),
+            &Validation::default(),
+        )
+        .map_err(|e| AppError::Unauthorized(format!("Invalid session: {}", e)))?;
+
+        let user_id = ObjectId::parse_str(&token_data.claims.sub)
+            .map_err(|_| AppError::Unauthorized("Invalid user session identifier".to_string()))?;
+
+        Ok(Some(AuthenticatedUser {
+            user_id,
+            username: token_data.claims.username,
+        }))
+    }
+}

src/auth/handlers.rs

@@ -0,0 +1,207 @@
+use askama::Template;
+use axum::{
+    extract::{Form, State},
+    http::StatusCode,
+    response::{Html, IntoResponse, Redirect, Response},
+};
+use axum_extra::extract::{
+    cookie::{Cookie, SameSite},
+    CookieJar,
+};
+use bcrypt::{hash, verify, DEFAULT_COST};
+use jsonwebtoken::{encode, EncodingKey, Header};
+use serde::Deserialize;
+use time::Duration;
+use crate::common::config::Config;
+use crate::common::errors::AppError;
+use crate::auth::models::Claims;
+use crate::auth::extractors::AuthenticatedUser;
+use crate::auth::repository::{UserRepository, MongoUserRepository};
+
+// Wrapper for rendering Askama HTML
+struct HtmlTemplate<T>(T);
+
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> Response {
+        match self.0.render() {
+            Ok(html) => Html(html).into_response(),
+            Err(err) => {
+                tracing::error!("Failed to render template: {:?}", err);
+                StatusCode::INTERNAL_SERVER_ERROR.into_response()
+            }
+        }
+    }
+}
+
+// Askama template structs
+#[derive(Template)]
+#[template(path = "auth/login.html")]
+struct LoginTemplate {
+    error: Option<String>,
+    authenticated: bool,
+    username: String,
+}
+
+#[derive(Template)]
+#[template(path = "auth/register.html")]
+struct RegisterTemplate {
+    error: Option<String>,
+    success: Option<String>,
+    authenticated: bool,
+    username: String,
+}
+
+// HANDLERS
+
+pub async fn get_login(
+    user_opt: Option<AuthenticatedUser>,
+) -> impl IntoResponse {
+    if user_opt.is_some() {
+        return Redirect::to("/tasks").into_response();
+    }
+    HtmlTemplate(LoginTemplate {
+        error: None,
+        authenticated: false,
+        username: "".to_string(),
+    })
+    .into_response()
+}
+
+#[derive(Deserialize)]
+pub struct AuthPayload {
+    pub username: String,
+    pub password: String,
+}
+
+pub async fn post_login(
+    State(config): State<Config>,
+    State(user_repo): State<MongoUserRepository>,
+    jar: CookieJar,
+    Form(payload): Form<AuthPayload>,
+) -> Result<Response, AppError> {
+    let username = payload.username.trim();
+    
+    // Find user
+    let user = user_repo.find_by_username(username).await?;
+    let Some(user) = user else {
+        return Ok(HtmlTemplate(LoginTemplate {
+            error: Some("Invalid username or password".to_string()),
+            authenticated: false,
+            username: "".to_string(),
+        })
+        .into_response());
+    };
+
+    // Verify password
+    match verify(&payload.password, &user.password_hash) {
+        Ok(true) => {}
+        _ => {
+            return Ok(HtmlTemplate(LoginTemplate {
+                error: Some("Invalid username or password".to_string()),
+                authenticated: false,
+                username: "".to_string(),
+            })
+            .into_response());
+        }
+    }
+
+    // Generate JWT
+    let exp = chrono::Utc::now()
+        .checked_add_signed(chrono::Duration::hours(24))
+        .expect("Valid duration")
+        .timestamp() as usize;
+
+    let claims = Claims {
+        sub: user.id.expect("User document must have ID").to_hex(),
+        username: user.username,
+        exp,
+    };
+
+    let token = encode(
+        &Header::default(),
+        &claims,
+        &EncodingKey::from_secret(config.jwt_secret.as_bytes()),
+    )?;
+
+    // Set cookie
+    let cookie = Cookie::build(("token", token))
+        .path("/")
+        .http_only(true)
+        .same_site(SameSite::Lax)
+        .max_age(Duration::days(1));
+
+    let updated_jar = jar.add(cookie);
+
+    Ok((updated_jar, Redirect::to("/tasks")).into_response())
+}
+
+pub async fn get_register(
+    user_opt: Option<AuthenticatedUser>,
+) -> impl IntoResponse {
+    if user_opt.is_some() {
+        return Redirect::to("/tasks").into_response();
+    }
+    HtmlTemplate(RegisterTemplate {
+        error: None,
+        success: None,
+        authenticated: false,
+        username: "".to_string(),
+    })
+    .into_response()
+}
+
+pub async fn post_register(
+    State(user_repo): State<MongoUserRepository>,
+    Form(payload): Form<AuthPayload>,
+) -> Result<Response, AppError> {
+    let username = payload.username.trim();
+    let password = payload.password.trim();
+
+    if username.is_empty() || password.is_empty() {
+        return Ok(HtmlTemplate(RegisterTemplate {
+            error: Some("Username and password cannot be empty".to_string()),
+            success: None,
+            authenticated: false,
+            username: "".to_string(),
+        })
+        .into_response());
+    }
+
+    // Check if user exists
+    let existing_user = user_repo.find_by_username(username).await?;
+    if existing_user.is_some() {
+        return Ok(HtmlTemplate(RegisterTemplate {
+            error: Some("Username already taken".to_string()),
+            success: None,
+            authenticated: false,
+            username: "".to_string(),
+        })
+        .into_response());
+    }
+
+    // Hash password
+    let hashed_password = hash(password, DEFAULT_COST)?;
+
+    // Create user
+    user_repo.create(username, &hashed_password).await?;
+
+    Ok(HtmlTemplate(RegisterTemplate {
+        error: None,
+        success: Some("Registration successful! You can now log in.".to_string()),
+        authenticated: false,
+        username: "".to_string(),
+    })
+    .into_response())
+}
+
+pub async fn post_logout(jar: CookieJar) -> impl IntoResponse {
+    let mut cookie = Cookie::new("token", "");
+    cookie.set_path("/");
+    cookie.set_max_age(Some(Duration::ZERO)); // Clear cookie
+
+    let updated_jar = jar.add(cookie);
+    (updated_jar, Redirect::to("/")).into_response()
+}

src/auth/mod.rs

@@ -0,0 +1,23 @@
+pub mod extractors;
+pub mod handlers;
+pub mod models;
+pub mod repository;
+
+use axum::{
+    routing::{get, post},
+    Router,
+};
+use crate::common::config::Config;
+use crate::auth::repository::MongoUserRepository;
+
+pub fn router<S>() -> Router<S>
+where
+    Config: axum::extract::FromRef<S>,
+    MongoUserRepository: axum::extract::FromRef<S>,
+    S: Clone + Send + Sync + 'static,
+{
+    Router::new()
+        .route("/auth/login", get(handlers::get_login).post(handlers::post_login))
+        .route("/auth/register", get(handlers::get_register).post(handlers::post_register))
+        .route("/auth/logout", post(handlers::post_logout))
+}

src/auth/models.rs

@@ -0,0 +1,21 @@
+use mongodb::bson::oid::ObjectId;
+use serde::{Deserialize, Serialize};
+use serde_with::serde_as;
+
+#[serde_as]
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct User {
+    #[serde(rename = "_id", skip_serializing_if = "Option::is_none")]
+    pub id: Option<ObjectId>,
+    pub username: String,
+    pub password_hash: String,
+    #[serde_as(as = "mongodb::bson::serde_helpers::datetime::FromChrono04DateTime")]
+    pub created_at: chrono::DateTime<chrono::Utc>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct Claims {
+    pub sub: String,
+    pub username: String,
+    pub exp: usize,
+}

src/auth/repository.rs

@@ -0,0 +1,52 @@
+use mongodb::{
+    bson::doc,
+    Database,
+};
+use crate::common::errors::AppError;
+use crate::auth::models::User;
+
+#[async_trait::async_trait]
+pub trait UserRepository {
+    async fn find_by_username(&self, username: &str) -> Result<Option<User>, AppError>;
+    async fn create(&self, username: &str, password_hash: &str) -> Result<User, AppError>;
+}
+
+#[derive(Clone)]
+pub struct MongoUserRepository {
+    db: Database,
+}
+
+impl MongoUserRepository {
+    pub fn new(db: Database) -> Self {
+        Self { db }
+    }
+}
+
+#[async_trait::async_trait]
+impl UserRepository for MongoUserRepository {
+    async fn find_by_username(&self, username: &str) -> Result<Option<User>, AppError> {
+        let collection = self.db.collection::<User>("users");
+        let filter = doc! { "username": username };
+        
+        let user = collection.find_one(filter).await?;
+        Ok(user)
+    }
+
+    async fn create(&self, username: &str, password_hash: &str) -> Result<User, AppError> {
+        let collection = self.db.collection::<User>("users");
+        
+        let new_user = User {
+            id: None,
+            username: username.to_string(),
+            password_hash: password_hash.to_string(),
+            created_at: chrono::Utc::now(),
+        };
+        
+        let insert_result = collection.insert_one(new_user.clone()).await?;
+        
+        let mut user = new_user;
+        user.id = Some(insert_result.inserted_id.as_object_id().expect("Inserted ID is ObjectId"));
+        
+        Ok(user)
+    }
+}

src/common/config.rs

@@ -0,0 +1,42 @@
+use std::env;
+
+#[derive(Clone, Debug)]
+pub struct Config {
+    pub database_url: String,
+    pub database_name: String,
+    pub jwt_secret: String,
+    pub host: String,
+    pub port: u16,
+}
+
+impl Config {
+    pub fn from_env() -> Self {
+        // Load .env if present
+        let _ = dotenvy::dotenv();
+
+        let database_url = env::var("DATABASE_URL")
+            .unwrap_or_else(|_| "mongodb://localhost:27017".to_string());
+
+        let database_name = env::var("DATABASE_NAME")
+            .unwrap_or_else(|_| "stick_db".to_string());
+
+        let jwt_secret = env::var("JWT_SECRET")
+            .unwrap_or_else(|_| "super_secret_fallback_key_for_json_web_token_signing_and_verification_must_be_long_enough".to_string());
+
+        let host = env::var("HOST")
+            .unwrap_or_else(|_| "127.0.0.1".to_string());
+
+        let port = env::var("PORT")
+            .ok()
+            .and_then(|p| p.parse().ok())
+            .unwrap_or(3000);
+
+        Self {
+            database_url,
+            database_name,
+            jwt_secret,
+            host,
+            port,
+        }
+    }
+}

src/common/database.rs

@@ -0,0 +1,44 @@
+use mongodb::{
+    bson::doc,
+    options::{ClientOptions, IndexOptions},
+    Client, Database, IndexModel,
+};
+use tracing::info;
+use crate::common::config::Config;
+use crate::common::errors::AppError;
+
+pub async fn connect_db(config: &Config) -> Result<Database, AppError> {
+    info!("Connecting to MongoDB at: {}", config.database_url);
+    
+    let mut client_options = ClientOptions::parse(&config.database_url).await?;
+    client_options.app_name = Some("stick-template".to_string());
+    
+    let client = Client::with_options(client_options)?;
+    let db = client.database(&config.database_name);
+    
+    // Ping to verify connection
+    db.run_command(doc! { "ping": 1 }).await?;
+    info!("Successfully connected to database: {}", config.database_name);
+    
+    // Build index models
+    setup_indexes(&db).await?;
+    
+    Ok(db)
+}
+
+async fn setup_indexes(db: &Database) -> Result<(), AppError> {
+    info!("Setting up database indexes...");
+    
+    // Setup unique index for user username
+    let users_col = db.collection::<mongodb::bson::Document>("users");
+    
+    let username_index = IndexModel::builder()
+        .keys(doc! { "username": 1 })
+        .options(IndexOptions::builder().unique(true).build())
+        .build();
+        
+    users_col.create_index(username_index).await?;
+    
+    info!("Database index setup completed successfully.");
+    Ok(())
+}

src/common/errors.rs

@@ -0,0 +1,94 @@
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse, Response},
+};
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum AppError {
+    #[error("Database error: {0}")]
+    Mongo(#[from] mongodb::error::Error),
+
+    #[error("Crypto error: {0}")]
+    Bcrypt(#[from] bcrypt::BcryptError),
+
+    #[error("Authentication token error: {0}")]
+    Jwt(#[from] jsonwebtoken::errors::Error),
+
+    #[error("Unauthorized: {0}")]
+    Unauthorized(String),
+
+    #[error("Bad Request: {0}")]
+    BadRequest(String),
+
+    #[error("Internal Server Error: {0}")]
+    #[allow(dead_code)]
+    Internal(String),
+}
+
+impl IntoResponse for AppError {
+    fn into_response(self) -> Response {
+        let (status, msg) = match &self {
+            AppError::Mongo(err) => {
+                tracing::error!("Database Error: {:?}", err);
+                (StatusCode::INTERNAL_SERVER_ERROR, "A database error occurred.")
+            }
+            AppError::Bcrypt(err) => {
+                tracing::error!("Password hashing error: {:?}", err);
+                (StatusCode::INTERNAL_SERVER_ERROR, "An authentication hashing error occurred.")
+            }
+            AppError::Jwt(err) => {
+                tracing::error!("Token signing/validation error: {:?}", err);
+                (StatusCode::UNAUTHORIZED, "Your session has expired or is invalid. Please log in again.")
+            }
+            AppError::Unauthorized(msg) => (StatusCode::UNAUTHORIZED, msg.as_str()),
+            AppError::BadRequest(msg) => (StatusCode::BAD_REQUEST, msg.as_str()),
+            AppError::Internal(msg) => {
+                tracing::error!("Internal Error: {}", msg);
+                (StatusCode::INTERNAL_SERVER_ERROR, msg.as_str())
+            }
+        };
+
+        // Render a premium Tailwind styled error page
+        let html_content = format!(
+            r#"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error - Template App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+        body {{
+            font-family: 'Outfit', sans-serif;
+        }}
+    </style>
+</head>
+<body class="bg-[#0f172a] text-slate-100 min-h-screen flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-[#1e293b] border border-slate-800 rounded-2xl p-8 text-center shadow-2xl relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-500 via-rose-500 to-pink-600"></div>
+        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-rose-950/50 border border-rose-900/50 text-rose-500 mb-6">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+            </svg>
+        </div>
+        <h1 class="text-2xl font-bold text-slate-100 mb-2">Something went wrong</h1>
+        <p class="text-slate-400 text-sm mb-6 leading-relaxed">{}</p>
+        <div class="flex flex-col sm:flex-row gap-3 justify-center">
+            <a href="/" class="px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-750 transition font-medium text-sm text-slate-200 border border-slate-700">
+                Go to Safety
+            </a>
+            <a href="/auth/login" class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-90 transition font-medium text-sm text-white">
+                Log In
+            </a>
+        </div>
+    </div>
+</body>
+</html>"#,
+            msg
+        );
+
+        (status, Html(html_content)).into_response()
+    }
+}

src/common/mod.rs

@@ -0,0 +1,3 @@
+pub mod config;
+pub mod database;
+pub mod errors;

src/components/handlers.rs

@@ -0,0 +1,209 @@
+use axum::response::IntoResponse;
+use askama::Template;
+use crate::common::errors::AppError;
+use crate::auth::extractors::AuthenticatedUser;
+
+// Wrapper for rendering Askama HTML
+pub struct HtmlTemplate<T>(pub T);
+
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> axum::response::Response {
+        match self.0.render() {
+            Ok(html) => axum::response::Html(html).into_response(),
+            Err(err) => {
+                tracing::error!("Failed to render template: {:?}", err);
+                axum::http::StatusCode::INTERNAL_SERVER_ERROR.into_response()
+            }
+        }
+    }
+}
+
+// Macro helper to construct user session details
+fn get_session_info(user_opt: Option<AuthenticatedUser>) -> (bool, String) {
+    match user_opt {
+        Some(user) => (true, user.username),
+        None => (false, "".to_string()),
+    }
+}
+
+// Define individual templates
+#[derive(Template)]
+#[template(path = "components/index.html")]
+pub struct IndexTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/buttons.html")]
+pub struct ButtonsTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/inputs.html")]
+pub struct InputsTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/date_time.html")]
+pub struct DateTimeTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/combobox.html")]
+pub struct ComboboxTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/toggles.html")]
+pub struct TogglesTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/modals.html")]
+pub struct ModalsTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/sheets.html")]
+pub struct SheetsTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/tabs_accordion.html")]
+pub struct TabsAccordionTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/visuals.html")]
+pub struct VisualsTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/scrollbars.html")]
+pub struct ScrollbarsTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+#[derive(Template)]
+#[template(path = "components/feedback.html")]
+pub struct FeedbackTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
+// Define individual handlers
+pub async fn index_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(IndexTemplate { username, authenticated }))
+}
+
+pub async fn buttons_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(ButtonsTemplate { username, authenticated }))
+}
+
+pub async fn inputs_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(InputsTemplate { username, authenticated }))
+}
+
+pub async fn date_time_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(DateTimeTemplate { username, authenticated }))
+}
+
+pub async fn combobox_handler(
+    axum::extract::State(dev_repo): axum::extract::State<crate::developers::repository::MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    use crate::developers::repository::DeveloperRepository;
+    
+    let user_id = user_opt.as_ref().map(|u| u.user_id);
+    let (authenticated, username) = get_session_info(user_opt);
+    
+    if let Some(user_id) = user_id {
+        let _ = dev_repo.ensure_seeded(&user_id).await;
+    }
+
+    Ok(HtmlTemplate(ComboboxTemplate { username, authenticated }))
+}
+
+pub async fn toggles_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(TogglesTemplate { username, authenticated }))
+}
+
+pub async fn modals_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(ModalsTemplate { username, authenticated }))
+}
+
+pub async fn sheets_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(SheetsTemplate { username, authenticated }))
+}
+
+pub async fn tabs_accordion_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(TabsAccordionTemplate { username, authenticated }))
+}
+
+pub async fn visuals_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(VisualsTemplate { username, authenticated }))
+}
+
+pub async fn scrollbars_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(ScrollbarsTemplate { username, authenticated }))
+}
+
+pub async fn feedback_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(FeedbackTemplate { username, authenticated }))
+}

src/components/mod.rs

@@ -0,0 +1,30 @@
+pub mod handlers;
+
+use axum::{routing::get, Router};
+use self::handlers::{
+    index_handler, buttons_handler, inputs_handler, date_time_handler,
+    combobox_handler, toggles_handler, modals_handler, sheets_handler,
+    tabs_accordion_handler, visuals_handler, scrollbars_handler, feedback_handler,
+};
+
+pub fn router<S>() -> Router<S>
+where
+    crate::common::config::Config: axum::extract::FromRef<S>,
+    mongodb::Database: axum::extract::FromRef<S>,
+    crate::developers::repository::MongoDeveloperRepository: axum::extract::FromRef<S>,
+    S: Clone + Send + Sync + 'static,
+{
+    Router::new()
+        .route("/components", get(index_handler))
+        .route("/components/buttons", get(buttons_handler))
+        .route("/components/inputs", get(inputs_handler))
+        .route("/components/date-time", get(date_time_handler))
+        .route("/components/combobox", get(combobox_handler))
+        .route("/components/toggles", get(toggles_handler))
+        .route("/components/modals", get(modals_handler))
+        .route("/components/sheets", get(sheets_handler))
+        .route("/components/tabs-accordion", get(tabs_accordion_handler))
+        .route("/components/visuals", get(visuals_handler))
+        .route("/components/scrollbars", get(scrollbars_handler))
+        .route("/components/feedback", get(feedback_handler))
+}

src/developers/handlers.rs

@@ -0,0 +1,207 @@
+use askama::Template;
+use axum::{
+    extract::{Form, Path, Query, State},
+    http::StatusCode,
+    response::{Html, IntoResponse, Redirect, Response},
+};
+use mongodb::bson::oid::ObjectId;
+use serde::Deserialize;
+use crate::common::errors::AppError;
+use crate::auth::extractors::AuthenticatedUser;
+use crate::developers::models::Developer;
+use crate::developers::repository::{DeveloperRepository, MongoDeveloperRepository};
+
+// Wrapper for rendering Askama HTML
+struct HtmlTemplate<T>(T);
+
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> Response {
+        match self.0.render() {
+            Ok(html) => Html(html).into_response(),
+            Err(err) => {
+                tracing::error!("Failed to render template: {:?}", err);
+                StatusCode::INTERNAL_SERVER_ERROR.into_response()
+            }
+        }
+    }
+}
+
+// Askama templates
+#[derive(Template)]
+#[template(path = "developers/list.html")]
+struct DeveloperListTemplate {
+    username: String,
+    authenticated: bool,
+    developers: Vec<Developer>,
+}
+
+#[derive(Template)]
+#[template(path = "developers/edit.html")]
+struct DeveloperEditTemplate {
+    username: String,
+    authenticated: bool,
+    developer: Developer,
+}
+
+#[derive(Template)]
+#[template(path = "developers/search_results.html")]
+struct DeveloperSearchResultsTemplate {
+    developers: Vec<Developer>,
+}
+
+// HANDLERS
+
+pub async fn get_list(
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let _ = dev_repo.ensure_seeded(&user.user_id).await;
+    let developers = dev_repo.find_all_by_user(&user.user_id).await?;
+
+    Ok(HtmlTemplate(DeveloperListTemplate {
+        username: user.username,
+        authenticated: true,
+        developers,
+    })
+    .into_response())
+}
+
+#[derive(Deserialize)]
+pub struct CreateDevForm {
+    pub name: String,
+    pub email: String,
+    pub skills: String,
+}
+
+pub async fn post_create(
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Form(payload): Form<CreateDevForm>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let name = payload.name.trim();
+    let email = payload.email.trim();
+    if name.is_empty() {
+        return Err(AppError::BadRequest("Developer name cannot be empty".to_string()));
+    }
+
+    let skills: Vec<String> = payload.skills
+        .split(',')
+        .map(|s| s.trim().to_string())
+        .filter(|s| !s.is_empty())
+        .collect();
+
+    dev_repo.create(&user.user_id, name, email, skills).await?;
+
+    Ok(Redirect::to("/developers").into_response())
+}
+
+pub async fn get_edit(
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Path(dev_id_str): Path<String>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let dev_id = ObjectId::parse_str(&dev_id_str)
+        .map_err(|_| AppError::BadRequest("Invalid developer identifier".to_string()))?;
+
+    let developer = dev_repo.find_by_id(&dev_id, &user.user_id).await?;
+    let Some(developer) = developer else {
+        return Err(AppError::Unauthorized("Developer not found".to_string()));
+    };
+
+    Ok(HtmlTemplate(DeveloperEditTemplate {
+        username: user.username,
+        authenticated: true,
+        developer,
+    })
+    .into_response())
+}
+
+pub async fn post_update(
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Path(dev_id_str): Path<String>,
+    Form(payload): Form<CreateDevForm>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let dev_id = ObjectId::parse_str(&dev_id_str)
+        .map_err(|_| AppError::BadRequest("Invalid developer identifier".to_string()))?;
+
+    let name = payload.name.trim();
+    let email = payload.email.trim();
+    if name.is_empty() {
+        return Err(AppError::BadRequest("Developer name cannot be empty".to_string()));
+    }
+
+    let skills: Vec<String> = payload.skills
+        .split(',')
+        .map(|s| s.trim().to_string())
+        .filter(|s| !s.is_empty())
+        .collect();
+
+    dev_repo.update(&dev_id, &user.user_id, name, email, skills).await?;
+
+    Ok(Redirect::to("/developers").into_response())
+}
+
+pub async fn post_delete(
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Path(dev_id_str): Path<String>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let dev_id = ObjectId::parse_str(&dev_id_str)
+        .map_err(|_| AppError::BadRequest("Invalid developer identifier".to_string()))?;
+
+    dev_repo.delete(&dev_id, &user.user_id).await?;
+
+    Ok(Redirect::to("/developers").into_response())
+}
+
+#[derive(Deserialize)]
+pub struct SearchQuery {
+    pub q: String,
+}
+
+pub async fn get_search(
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Query(params): Query<SearchQuery>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(StatusCode::UNAUTHORIZED.into_response());
+    };
+
+    let _ = dev_repo.ensure_seeded(&user.user_id).await;
+    let query_str = params.q.trim();
+    if query_str.is_empty() {
+        return Ok(HtmlTemplate(DeveloperSearchResultsTemplate { developers: vec![] }).into_response());
+    }
+
+    let matched_devs = dev_repo.search_by_name(&user.user_id, query_str).await?;
+
+    Ok(HtmlTemplate(DeveloperSearchResultsTemplate {
+        developers: matched_devs,
+    })
+    .into_response())
+}

src/developers/mod.rs

@@ -0,0 +1,23 @@
+pub mod handlers;
+pub mod models;
+pub mod repository;
+
+use axum::{
+    routing::{get, post},
+    Router,
+};
+use crate::common::config::Config;
+use crate::developers::repository::MongoDeveloperRepository;
+
+pub fn router<S>() -> Router<S>
+where
+    Config: axum::extract::FromRef<S>,
+    MongoDeveloperRepository: axum::extract::FromRef<S>,
+    S: Clone + Send + Sync + 'static,
+{
+    Router::new()
+        .route("/developers", get(handlers::get_list).post(handlers::post_create))
+        .route("/developers/{id}/edit", get(handlers::get_edit).post(handlers::post_update))
+        .route("/developers/{id}/delete", post(handlers::post_delete))
+        .route("/developers/search", get(handlers::get_search))
+}

src/developers/models.rs

@@ -0,0 +1,16 @@
+use mongodb::bson::oid::ObjectId;
+use serde::{Deserialize, Serialize};
+use serde_with::serde_as;
+
+#[serde_as]
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct Developer {
+    #[serde(rename = "_id", skip_serializing_if = "Option::is_none")]
+    pub id: Option<ObjectId>,
+    pub user_id: ObjectId,
+    pub name: String,
+    pub email: String,
+    pub skills: Vec<String>,
+    #[serde_as(as = "mongodb::bson::serde_helpers::datetime::FromChrono04DateTime")]
+    pub created_at: chrono::DateTime<chrono::Utc>,
+}

src/developers/repository.rs

@@ -0,0 +1,123 @@
+use futures::stream::TryStreamExt;
+use mongodb::{
+    bson::{doc, oid::ObjectId},
+    options::FindOptions,
+    Database,
+};
+use crate::common::errors::AppError;
+use crate::developers::models::Developer;
+
+#[async_trait::async_trait]
+pub trait DeveloperRepository {
+    async fn find_all_by_user(&self, user_id: &ObjectId) -> Result<Vec<Developer>, AppError>;
+    async fn find_by_id(&self, dev_id: &ObjectId, user_id: &ObjectId) -> Result<Option<Developer>, AppError>;
+    async fn search_by_name(&self, user_id: &ObjectId, query: &str) -> Result<Vec<Developer>, AppError>;
+    async fn create(&self, user_id: &ObjectId, name: &str, email: &str, skills: Vec<String>) -> Result<Developer, AppError>;
+    async fn update(&self, dev_id: &ObjectId, user_id: &ObjectId, name: &str, email: &str, skills: Vec<String>) -> Result<(), AppError>;
+    async fn delete(&self, dev_id: &ObjectId, user_id: &ObjectId) -> Result<(), AppError>;
+    async fn ensure_seeded(&self, user_id: &ObjectId) -> Result<(), AppError>;
+}
+
+#[derive(Clone)]
+pub struct MongoDeveloperRepository {
+    db: Database,
+}
+
+impl MongoDeveloperRepository {
+    pub fn new(db: Database) -> Self {
+        Self { db }
+    }
+}
+
+#[async_trait::async_trait]
+impl DeveloperRepository for MongoDeveloperRepository {
+    async fn find_all_by_user(&self, user_id: &ObjectId) -> Result<Vec<Developer>, AppError> {
+        let collection = self.db.collection::<Developer>("developers");
+        let filter = doc! { "user_id": user_id };
+        let find_options = FindOptions::builder().sort(doc! { "created_at": -1 }).build();
+        
+        let mut cursor = collection.find(filter).with_options(find_options).await?;
+        let mut developers = Vec::new();
+        while let Some(dev) = cursor.try_next().await? {
+            developers.push(dev);
+        }
+        Ok(developers)
+    }
+
+    async fn find_by_id(&self, dev_id: &ObjectId, user_id: &ObjectId) -> Result<Option<Developer>, AppError> {
+        let collection = self.db.collection::<Developer>("developers");
+        let filter = doc! { "_id": dev_id, "user_id": user_id };
+        let dev = collection.find_one(filter).await?;
+        Ok(dev)
+    }
+
+    async fn search_by_name(&self, user_id: &ObjectId, query: &str) -> Result<Vec<Developer>, AppError> {
+        let collection = self.db.collection::<Developer>("developers");
+        // Regex search case-insensitive on developer name
+        let filter = doc! {
+            "user_id": user_id,
+            "name": { "$regex": query, "$options": "i" }
+        };
+        let find_options = FindOptions::builder().limit(10).build();
+        
+        let mut cursor = collection.find(filter).with_options(find_options).await?;
+        let mut developers = Vec::new();
+        while let Some(dev) = cursor.try_next().await? {
+            developers.push(dev);
+        }
+        Ok(developers)
+    }
+
+    async fn create(&self, user_id: &ObjectId, name: &str, email: &str, skills: Vec<String>) -> Result<Developer, AppError> {
+        let collection = self.db.collection::<Developer>("developers");
+        let new_dev = Developer {
+            id: None,
+            user_id: *user_id,
+            name: name.to_string(),
+            email: email.to_string(),
+            skills,
+            created_at: chrono::Utc::now(),
+        };
+        let insert_result = collection.insert_one(new_dev.clone()).await?;
+        let mut dev = new_dev;
+        dev.id = Some(insert_result.inserted_id.as_object_id().expect("Inserted ID is ObjectId"));
+        Ok(dev)
+    }
+
+    async fn update(&self, dev_id: &ObjectId, user_id: &ObjectId, name: &str, email: &str, skills: Vec<String>) -> Result<(), AppError> {
+        let collection = self.db.collection::<Developer>("developers");
+        let filter = doc! { "_id": dev_id, "user_id": user_id };
+        let update = doc! {
+            "$set": {
+                "name": name,
+                "email": email,
+                "skills": skills
+            }
+        };
+        let result = collection.update_one(filter, update).await?;
+        if result.matched_count == 0 {
+            return Err(AppError::Unauthorized("Developer not found or not owned by user".to_string()));
+        }
+        Ok(())
+    }
+
+    async fn delete(&self, dev_id: &ObjectId, user_id: &ObjectId) -> Result<(), AppError> {
+        let collection = self.db.collection::<Developer>("developers");
+        let filter = doc! { "_id": dev_id, "user_id": user_id };
+        let result = collection.delete_one(filter).await?;
+        if result.deleted_count == 0 {
+            return Err(AppError::Unauthorized("Developer not found or not owned by user".to_string()));
+        }
+        Ok(())
+    }
+
+    async fn ensure_seeded(&self, user_id: &ObjectId) -> Result<(), AppError> {
+        let devs = self.find_all_by_user(user_id).await?;
+        if devs.is_empty() {
+            let _ = self.create(user_id, "Alice Vance", "alice@example.com", vec!["Rust".to_string(), "Axum".to_string()]).await;
+            let _ = self.create(user_id, "Bob Carter", "bob@example.com", vec!["Tailwind".to_string(), "JavaScript".to_string()]).await;
+            let _ = self.create(user_id, "Charlie Smith", "charlie@example.com", vec!["HTML".to_string(), "CSS".to_string()]).await;
+        }
+        Ok(())
+    }
+}

src/input.css

@@ -0,0 +1,185 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Outfit', sans-serif;
+  
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+html, body {
+  color-scheme: dark;
+}
+
+:root {
+  color-scheme: dark;
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+  
+  --radius: 0.5rem;
+}
+
+/* Custom Scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; 
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border)); 
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground)); 
+}
+
+/* Custom Date/Time Inputs */
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"] {
+  position: relative;
+  padding-left: 0.5rem !important;
+  padding-right: 1.5rem !important;
+  color-scheme: dark;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--foreground));
+  font-family: inherit;
+}
+
+::-webkit-datetime-edit {
+  padding: 0 !important;
+  flex-shrink: 0 !important;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0 !important;
+  flex-shrink: 0 !important;
+}
+
+::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 0.4rem;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-text {
+  color: hsl(var(--muted-foreground));
+  padding: 0 0.125rem;
+}
+
+::-webkit-datetime-edit-month-field:focus,
+::-webkit-datetime-edit-day-field:focus,
+::-webkit-datetime-edit-year-field:focus {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+  outline: none;
+  border-radius: 2px;
+}
+
+/* Number Spinner Removal */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* Custom Select Arrows */
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='hsl(215.4, 16.3%, 56.9%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  padding-right: 2.5rem;
+}
+
+/* Hide scrollbars for premium list picker layouts */
+.scrollbar-none {
+  scrollbar-width: none; /* Firefox */
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Edge */
+}
+

src/main.rs

@@ -0,0 +1,107 @@
+mod common;
+mod auth;
+mod tasks;
+mod developers;
+mod main_view;
+mod components;
+
+use axum::{extract::FromRef, Router};
+use std::net::SocketAddr;
+use tracing::info;
+use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
+
+use crate::common::config::Config;
+use crate::common::database::connect_db;
+use crate::auth::repository::MongoUserRepository;
+use crate::tasks::repository::MongoTaskRepository;
+use crate::developers::repository::MongoDeveloperRepository;
+
+#[derive(Clone)]
+struct AppState {
+    config: Config,
+    db: mongodb::Database,
+    user_repo: MongoUserRepository,
+    task_repo: MongoTaskRepository,
+    dev_repo: MongoDeveloperRepository,
+}
+
+impl FromRef<AppState> for Config {
+    fn from_ref(state: &AppState) -> Self {
+        state.config.clone()
+    }
+}
+
+impl FromRef<AppState> for mongodb::Database {
+    fn from_ref(state: &AppState) -> Self {
+        state.db.clone()
+    }
+}
+
+impl FromRef<AppState> for MongoUserRepository {
+    fn from_ref(state: &AppState) -> Self {
+        state.user_repo.clone()
+    }
+}
+
+impl FromRef<AppState> for MongoTaskRepository {
+    fn from_ref(state: &AppState) -> Self {
+        state.task_repo.clone()
+    }
+}
+
+impl FromRef<AppState> for MongoDeveloperRepository {
+    fn from_ref(state: &AppState) -> Self {
+        state.dev_repo.clone()
+    }
+}
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    // 1. Initialize logging
+    tracing_subscriber::registry()
+        .with(tracing_subscriber::fmt::layer())
+        .init();
+
+    info!("Starting Stick Template application...");
+
+    // 2. Parse config from env
+    let config = Config::from_env();
+
+    // 3. Connect to MongoDB
+    let db = connect_db(&config).await?;
+
+    // 4. Initialize repositories
+    let user_repo = MongoUserRepository::new(db.clone());
+    let task_repo = MongoTaskRepository::new(db.clone());
+    let dev_repo = MongoDeveloperRepository::new(db.clone());
+
+    // 5. Initialize shared AppState
+    let state = AppState {
+        config: config.clone(),
+        db,
+        user_repo,
+        task_repo,
+        dev_repo,
+    };
+
+    // 6. Build and merge routers by use-case
+    let app = Router::new()
+        .merge(main_view::router())
+        .merge(components::router())
+        .merge(auth::router())
+        .merge(tasks::router())
+        .merge(developers::router())
+        .with_state(state);
+
+    // 7. Bind address and run server
+    let host_addr: SocketAddr = format!("{}:{}", config.host, config.port)
+        .parse()
+        .expect("Invalid HOST or PORT config");
+
+    info!("Listening on http://{}", host_addr);
+
+    let listener = tokio::net::TcpListener::bind(host_addr).await?;
+    axum::serve(listener, app).await?;
+
+    Ok(())
+}

src/main_view/mod.rs

@@ -0,0 +1,79 @@
+use axum::{routing::get, Router};
+use crate::common::errors::AppError;
+use crate::auth::extractors::AuthenticatedUser;
+use axum::response::IntoResponse;
+use askama::Template;
+
+// Define the template struct extending base.html
+#[derive(Template)]
+#[template(path = "main_view/index.html")]
+struct IndexTemplate {
+    username: String,
+    authenticated: bool,
+}
+
+async fn index_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = match user_opt {
+        Some(user) => (true, user.username),
+        None => (false, "".to_string()),
+    };
+
+    Ok(HtmlTemplate(IndexTemplate { username, authenticated }))
+}
+
+// Wrapper for rendering Askama HTML
+struct HtmlTemplate<T>(T);
+
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> axum::response::Response {
+        match self.0.render() {
+            Ok(html) => axum::response::Html(html).into_response(),
+            Err(err) => {
+                tracing::error!("Failed to render template: {:?}", err);
+                axum::http::StatusCode::INTERNAL_SERVER_ERROR.into_response()
+            }
+        }
+    }
+}
+
+async fn serve_tailwind() -> impl IntoResponse {
+    let css = include_str!("../../static/tailwind.css");
+    (
+        [(axum::http::header::CONTENT_TYPE, "text/css")],
+        css
+    )
+}
+
+async fn serve_combobox_js() -> impl IntoResponse {
+    let js = include_str!("../../static/js/combobox.js");
+    (
+        [(axum::http::header::CONTENT_TYPE, "application/javascript")],
+        js
+    )
+}
+
+async fn serve_components_js() -> impl IntoResponse {
+    let js = include_str!("../../static/js/components.js");
+    (
+        [(axum::http::header::CONTENT_TYPE, "application/javascript")],
+        js
+    )
+}
+
+pub fn router<S>() -> Router<S>
+where
+    crate::common::config::Config: axum::extract::FromRef<S>,
+    mongodb::Database: axum::extract::FromRef<S>,
+    S: Clone + Send + Sync + 'static,
+{
+    Router::new()
+        .route("/", get(index_handler))
+        .route("/static/tailwind.css", get(serve_tailwind))
+        .route("/static/js/combobox.js", get(serve_combobox_js))
+        .route("/static/js/components.js", get(serve_components_js))
+}

src/tasks/handlers.rs

@@ -0,0 +1,150 @@
+use askama::Template;
+use axum::{
+    extract::{Form, Path, State},
+    http::StatusCode,
+    response::{Html, IntoResponse, Redirect, Response},
+};
+use mongodb::bson::oid::ObjectId;
+use serde::Deserialize;
+use crate::common::errors::AppError;
+use crate::auth::extractors::AuthenticatedUser;
+use crate::tasks::models::Task;
+use crate::tasks::repository::{TaskRepository, MongoTaskRepository};
+use crate::developers::repository::{DeveloperRepository, MongoDeveloperRepository};
+
+// Wrapper for rendering Askama HTML
+struct HtmlTemplate<T>(T);
+
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> Response {
+        match self.0.render() {
+            Ok(html) => Html(html).into_response(),
+            Err(err) => {
+                tracing::error!("Failed to render template: {:?}", err);
+                StatusCode::INTERNAL_SERVER_ERROR.into_response()
+            }
+        }
+    }
+}
+
+pub struct TaskViewModel {
+    pub task: Task,
+    pub developer_name: Option<String>,
+}
+
+// Askama template struct
+#[derive(Template)]
+#[template(path = "tasks/dashboard.html")]
+struct DashboardTemplate {
+    username: String,
+    authenticated: bool,
+    tasks: Vec<TaskViewModel>,
+}
+
+// HANDLERS
+
+pub async fn get_dashboard(
+    State(task_repo): State<MongoTaskRepository>,
+    State(dev_repo): State<MongoDeveloperRepository>,
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let _ = dev_repo.ensure_seeded(&user.user_id).await;
+    let tasks = task_repo.find_all_by_user(&user.user_id).await?;
+    let mut task_vms = Vec::new();
+    for task in tasks {
+        let developer_name = if let Some(dev_id) = task.assigned_to {
+            dev_repo.find_by_id(&dev_id, &user.user_id).await?.map(|d| d.name)
+        } else {
+            None
+        };
+        task_vms.push(TaskViewModel {
+            task,
+            developer_name,
+        });
+    }
+
+    Ok(HtmlTemplate(DashboardTemplate {
+        username: user.username,
+        authenticated: true,
+        tasks: task_vms,
+    })
+    .into_response())
+}
+
+#[derive(Deserialize)]
+pub struct CreateTaskForm {
+    pub title: String,
+    pub description: Option<String>,
+    pub assignee_id: Option<String>,
+}
+
+pub async fn post_create_task(
+    State(task_repo): State<MongoTaskRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Form(payload): Form<CreateTaskForm>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let title = payload.title.trim();
+    if title.is_empty() {
+        return Err(AppError::BadRequest("Task title cannot be empty".to_string()));
+    }
+
+    let description = payload.description.as_deref().map(|d| d.trim());
+    
+    let assigned_to = match payload.assignee_id.as_deref() {
+        Some(id_str) if !id_str.trim().is_empty() => {
+            ObjectId::parse_str(id_str.trim()).ok()
+        }
+        _ => None,
+    };
+
+    task_repo
+        .create(&user.user_id, title, description, assigned_to)
+        .await?;
+
+    Ok(Redirect::to("/tasks").into_response())
+}
+
+pub async fn post_complete_task(
+    State(task_repo): State<MongoTaskRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Path(task_id_str): Path<String>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let task_id = ObjectId::parse_str(&task_id_str)
+        .map_err(|_| AppError::BadRequest("Invalid task identifier".to_string()))?;
+
+    task_repo.mark_completed(&task_id, &user.user_id).await?;
+
+    Ok(Redirect::to("/tasks").into_response())
+}
+
+pub async fn post_delete_task(
+    State(task_repo): State<MongoTaskRepository>,
+    user_opt: Option<AuthenticatedUser>,
+    Path(task_id_str): Path<String>,
+) -> Result<Response, AppError> {
+    let Some(user) = user_opt else {
+        return Ok(Redirect::to("/auth/login").into_response());
+    };
+
+    let task_id = ObjectId::parse_str(&task_id_str)
+        .map_err(|_| AppError::BadRequest("Invalid task identifier".to_string()))?;
+
+    task_repo.delete(&task_id, &user.user_id).await?;
+
+    Ok(Redirect::to("/tasks").into_response())
+}

src/tasks/mod.rs

@@ -0,0 +1,24 @@
+pub mod handlers;
+pub mod models;
+pub mod repository;
+
+use axum::{
+    routing::{get, post},
+    Router,
+};
+use crate::common::config::Config;
+use crate::tasks::repository::MongoTaskRepository;
+
+pub fn router<S>() -> Router<S>
+where
+    Config: axum::extract::FromRef<S>,
+    MongoTaskRepository: axum::extract::FromRef<S>,
+    crate::developers::repository::MongoDeveloperRepository: axum::extract::FromRef<S>,
+    S: Clone + Send + Sync + 'static,
+{
+    Router::new()
+        .route("/tasks", get(handlers::get_dashboard))
+        .route("/tasks/create", post(handlers::post_create_task))
+        .route("/tasks/{id}/complete", post(handlers::post_complete_task))
+        .route("/tasks/{id}/delete", post(handlers::post_delete_task))
+}

src/tasks/models.rs

@@ -0,0 +1,18 @@
+use mongodb::bson::oid::ObjectId;
+use serde::{Deserialize, Serialize};
+use serde_with::serde_as;
+
+#[serde_as]
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct Task {
+    #[serde(rename = "_id", skip_serializing_if = "Option::is_none")]
+    pub id: Option<ObjectId>,
+    pub user_id: ObjectId,
+    pub title: String,
+    pub description: Option<String>,
+    pub is_completed: bool,
+    #[serde_as(as = "mongodb::bson::serde_helpers::datetime::FromChrono04DateTime")]
+    pub created_at: chrono::DateTime<chrono::Utc>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub assigned_to: Option<ObjectId>,
+}

src/tasks/repository.rs

@@ -0,0 +1,99 @@
+use futures::stream::TryStreamExt;
+use mongodb::{
+    bson::{doc, oid::ObjectId},
+    options::FindOptions,
+    Database,
+};
+use crate::common::errors::AppError;
+use crate::tasks::models::Task;
+
+#[async_trait::async_trait]
+pub trait TaskRepository {
+    async fn find_all_by_user(&self, user_id: &ObjectId) -> Result<Vec<Task>, AppError>;
+    async fn create(&self, user_id: &ObjectId, title: &str, description: Option<&str>, assigned_to: Option<ObjectId>) -> Result<Task, AppError>;
+    async fn mark_completed(&self, task_id: &ObjectId, user_id: &ObjectId) -> Result<(), AppError>;
+    async fn delete(&self, task_id: &ObjectId, user_id: &ObjectId) -> Result<(), AppError>;
+}
+
+#[derive(Clone)]
+pub struct MongoTaskRepository {
+    db: Database,
+}
+
+impl MongoTaskRepository {
+    pub fn new(db: Database) -> Self {
+        Self { db }
+    }
+}
+
+#[async_trait::async_trait]
+impl TaskRepository for MongoTaskRepository {
+    async fn find_all_by_user(&self, user_id: &ObjectId) -> Result<Vec<Task>, AppError> {
+        let collection = self.db.collection::<Task>("tasks");
+        
+        let filter = doc! { "user_id": user_id };
+        
+        // Sort incomplete tasks first, and then order by creation timestamp descending
+        let find_options = FindOptions::builder()
+            .sort(doc! { "is_completed": 1, "created_at": -1 })
+            .build();
+            
+        let mut cursor = collection.find(filter).with_options(find_options).await?;
+        let mut tasks = Vec::new();
+        
+        while let Some(task) = cursor.try_next().await? {
+            tasks.push(task);
+        }
+        
+        Ok(tasks)
+    }
+
+    async fn create(&self, user_id: &ObjectId, title: &str, description: Option<&str>, assigned_to: Option<ObjectId>) -> Result<Task, AppError> {
+        let collection = self.db.collection::<Task>("tasks");
+        
+        let new_task = Task {
+            id: None,
+            user_id: *user_id,
+            title: title.to_string(),
+            description: description.map(|d| d.to_string()),
+            is_completed: false,
+            created_at: chrono::Utc::now(),
+            assigned_to,
+        };
+        
+        let insert_result = collection.insert_one(new_task.clone()).await?;
+        
+        let mut task = new_task;
+        task.id = Some(insert_result.inserted_id.as_object_id().expect("Inserted ID is ObjectId"));
+        
+        Ok(task)
+    }
+
+    async fn mark_completed(&self, task_id: &ObjectId, user_id: &ObjectId) -> Result<(), AppError> {
+        let collection = self.db.collection::<Task>("tasks");
+        
+        let filter = doc! { "_id": task_id, "user_id": user_id };
+        let update = doc! { "$set": { "is_completed": true } };
+        
+        let result = collection.update_one(filter, update).await?;
+        
+        if result.matched_count == 0 {
+            return Err(AppError::Unauthorized("Task not found or not owned by user".to_string()));
+        }
+        
+        Ok(())
+    }
+
+    async fn delete(&self, task_id: &ObjectId, user_id: &ObjectId) -> Result<(), AppError> {
+        let collection = self.db.collection::<Task>("tasks");
+        
+        let filter = doc! { "_id": task_id, "user_id": user_id };
+        let result = collection.delete_one(filter).await?;
+        
+        if result.deleted_count == 0 {
+            return Err(AppError::Unauthorized("Task not found or not owned by user".to_string()));
+        }
+        
+        Ok(())
+    }
+}

static/js/combobox.js

@@ -0,0 +1,201 @@
+document.addEventListener('DOMContentLoaded', () => {
+    
+    // 1. Close all comboboxes when clicking outside
+    document.addEventListener('click', (event) => {
+        document.querySelectorAll('.autocomplete-combobox').forEach(combo => {
+            const results = combo.querySelector('.combobox-results');
+            if (results && !combo.contains(event.target)) {
+                results.classList.add('hidden');
+            }
+        });
+    });
+
+    // Helper to get only currently visible combobox items
+    function getVisibleItems(combo) {
+        const results = combo.querySelector('.combobox-results');
+        if (!results || results.classList.contains('hidden')) {
+            return [];
+        }
+        return Array.from(results.querySelectorAll('.combobox-item')).filter(item => {
+            return !item.classList.contains('hidden') && item.offsetParent !== null;
+        });
+    }
+
+    // Helper to show dropdown results
+    function showDropdown(input) {
+        const combo = input.closest('.autocomplete-combobox');
+        if (!combo) return;
+        if (combo.dataset.justSelected === 'true') return;
+        
+        const results = combo.querySelector('.combobox-results');
+        if (!results) return;
+
+        if (!input.hasAttribute('hx-get')) {
+            // Client-side: filter and display
+            results.classList.remove('hidden');
+            const query = input.value.toLowerCase().trim();
+            const items = results.querySelectorAll('.combobox-item');
+            let visibleCount = 0;
+            
+            items.forEach(item => {
+                const text = item.getAttribute('data-name').toLowerCase();
+                if (text.includes(query)) {
+                    item.classList.remove('hidden');
+                    visibleCount++;
+                } else {
+                    item.classList.add('hidden');
+                }
+            });
+            
+            if (visibleCount === 0 && query !== '') {
+                results.classList.add('hidden');
+            }
+        } else {
+            // Server-side HTMX search: only show if results contain elements
+            if (results.querySelector('.combobox-item') || results.querySelector('div')) {
+                results.classList.remove('hidden');
+            }
+        }
+    }
+
+    // 2. Open dropdown on focusin and click
+    document.addEventListener('focusin', (event) => {
+        const input = event.target.closest('.combobox-input');
+        if (input) {
+            showDropdown(input);
+        }
+    });
+
+    document.addEventListener('click', (event) => {
+        const input = event.target.closest('.combobox-input');
+        if (input) {
+            showDropdown(input);
+        }
+    });
+
+    // 3. Clear values on input delete and perform client-side filtering
+    document.addEventListener('input', (event) => {
+        const input = event.target.closest('.combobox-input');
+        if (!input) return;
+        
+        const combo = input.closest('.autocomplete-combobox');
+        const valueInput = combo.querySelector('.combobox-value');
+        const results = combo.querySelector('.combobox-results');
+        
+        if (input.value.trim() === '') {
+            if (valueInput) valueInput.value = '';
+            if (results) results.classList.add('hidden');
+            return;
+        }
+
+        // Apply client-side search filtering immediately
+        if (!input.hasAttribute('hx-get')) {
+            showDropdown(input);
+        }
+    });
+
+    // 4. Keydown navigation delegation (Arrows, Escape, Enter, Tab/Shift-Tab)
+    document.addEventListener('keydown', (event) => {
+        const input = event.target.closest('.combobox-input');
+        const item = event.target.closest('.combobox-item');
+
+        if (input) {
+            const combo = input.closest('.autocomplete-combobox');
+            const results = combo.querySelector('.combobox-results');
+            
+            if (event.key === 'Escape') {
+                if (results) results.classList.add('hidden');
+                input.blur();
+            } else if (event.key === 'ArrowDown' || (event.key === 'Tab' && !event.shiftKey)) {
+                const visibleItems = getVisibleItems(combo);
+                if (visibleItems.length > 0) {
+                    event.preventDefault();
+                    visibleItems[0].focus();
+                }
+            }
+            return;
+        }
+
+        if (item) {
+            const combo = item.closest('.autocomplete-combobox');
+            const results = combo.querySelector('.combobox-results');
+            const inputField = combo.querySelector('.combobox-input');
+            const visibleItems = getVisibleItems(combo);
+            const index = visibleItems.indexOf(item);
+
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                selectItem(combo, item);
+            } else if (event.key === 'ArrowDown' || (event.key === 'Tab' && !event.shiftKey)) {
+                event.preventDefault();
+                if (index >= 0 && index + 1 < visibleItems.length) {
+                    visibleItems[index + 1].focus();
+                } else {
+                    // Loop back to first item
+                    if (visibleItems.length > 0) visibleItems[0].focus();
+                }
+            } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {
+                event.preventDefault();
+                if (index > 0) {
+                    visibleItems[index - 1].focus();
+                } else if (inputField) {
+                    // Return focus back to search input
+                    inputField.focus();
+                }
+            } else if (event.key === 'Escape') {
+                event.preventDefault();
+                if (results) results.classList.add('hidden');
+                if (inputField) inputField.focus();
+            }
+        }
+    });
+
+    // 5. Click event delegation for selection
+    document.addEventListener('click', (event) => {
+        const item = event.target.closest('.combobox-item');
+        if (item) {
+            const combo = item.closest('.autocomplete-combobox');
+            selectItem(combo, item);
+        }
+    });
+
+    // 6. HTMX Swap Integration to show results
+    document.addEventListener('htmx:afterSwap', (event) => {
+        const results = event.target.querySelector('.combobox-results') 
+            || event.target.closest('.combobox-results');
+        if (results) {
+            results.classList.remove('hidden');
+        }
+    });
+
+    // Core helper to perform selection swap
+    function selectItem(combo, item) {
+        const input = combo.querySelector('.combobox-input');
+        const valueInput = combo.querySelector('.combobox-value');
+        const results = combo.querySelector('.combobox-results');
+        
+        const id = item.getAttribute('data-id');
+        const name = item.getAttribute('data-name');
+        
+        if (valueInput) {
+            valueInput.value = id;
+            valueInput.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        
+        if (input) {
+            input.value = name;
+            input.focus();
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        
+        if (results) {
+            results.classList.add('hidden');
+            // Prevent immediate reopening on focus
+            combo.dataset.justSelected = 'true';
+            setTimeout(() => {
+                delete combo.dataset.justSelected;
+            }, 200);
+        }
+    }
+});

static/js/components.js

@@ -0,0 +1,669 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    // --- DIALOG / MODAL ---
+    window.openModal = function(modalId) {
+        const modal = document.getElementById(modalId);
+        if (!modal) return;
+        modal.classList.remove('hidden');
+        setTimeout(() => {
+            const content = modal.querySelector('.modal-content');
+            if (content) {
+                content.classList.remove('scale-95', 'opacity-0');
+                content.classList.add('scale-100', 'opacity-100');
+            }
+        }, 10);
+    };
+
+    window.closeModal = function(modal) {
+        if (typeof modal === 'string') modal = document.getElementById(modal);
+        if (!modal) return;
+        const content = modal.querySelector('.modal-content');
+        if (content) {
+            content.classList.remove('scale-100', 'opacity-100');
+            content.classList.add('scale-95', 'opacity-0');
+        }
+        setTimeout(() => {
+            modal.classList.add('hidden');
+        }, 300); // Wait for transition animation
+    };
+
+    document.addEventListener('click', (event) => {
+        // Modal Trigger Buttons
+        const trigger = event.target.closest('[data-modal-target]');
+        if (trigger) {
+            const targetId = trigger.getAttribute('data-modal-target');
+            window.openModal(targetId);
+        }
+
+        // Modal Close Buttons
+        if (event.target.closest('.modal-close') || event.target.closest('.modal-backdrop')) {
+            const modal = event.target.closest('.modal-dialog');
+            window.closeModal(modal);
+        }
+    });
+
+    // --- DROPDOWNS ---
+    document.addEventListener('click', (event) => {
+        const trigger = event.target.closest('.dropdown-trigger');
+        
+        // Close all other dropdowns
+        document.querySelectorAll('.dropdown-menu').forEach(menu => {
+            const content = menu.querySelector('.dropdown-content');
+            if (content && (!trigger || menu !== trigger.closest('.dropdown-menu'))) {
+                content.classList.add('hidden');
+            }
+        });
+
+        // Toggle selected dropdown
+        if (trigger) {
+            const menu = trigger.closest('.dropdown-menu');
+            const content = menu.querySelector('.dropdown-content');
+            if (content) content.classList.toggle('hidden');
+        }
+    });
+
+    // --- TOAST NOTIFICATIONS ---
+    window.showToast = function(message, type = 'success') {
+        const container = document.getElementById('toast-container');
+        if (!container) return;
+
+        const toast = document.createElement('div');
+        toast.className = `toast-item flex items-center gap-3 w-80 p-4 rounded-lg border border-border bg-card shadow-lg transform transition-all duration-300 translate-y-10 opacity-0`;
+        toast.innerHTML = `
+            <div class="grow text-sm font-semibold text-slate-100">${message}</div>
+            <button class="toast-close text-slate-500 hover:text-slate-350">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+            </button>
+        `;
+        container.appendChild(toast);
+
+        // Slide in
+        setTimeout(() => {
+            toast.classList.remove('translate-y-10', 'opacity-0');
+        }, 10);
+
+        // Auto-dismiss after 4 seconds
+        const dismissTimeout = setTimeout(() => dismissToast(toast), 4000);
+
+        // Manual dismiss listener
+        toast.querySelector('.toast-close').addEventListener('click', () => {
+            clearTimeout(dismissTimeout);
+            dismissToast(toast);
+        });
+    };
+
+    function dismissToast(toast) {
+        toast.classList.add('translate-y-10', 'opacity-0');
+        setTimeout(() => {
+            toast.remove();
+        }, 300);
+    }
+
+    // --- CUSTOM DATE PICKER LOGIC ---
+    function formatDateLabel(dateStr) {
+        if (!dateStr) return 'Pick a date';
+        const parts = dateStr.split('-');
+        if (parts.length !== 3) return dateStr;
+        const d = new Date(parts[0], parts[1] - 1, parts[2]);
+        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+        return `${monthNames[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+    }
+
+    function renderCalendar(picker) {
+        const valueInput = picker.querySelector('.datepicker-value');
+        const monthYearLabel = picker.querySelector('.datepicker-month-year');
+        const daysContainer = picker.querySelector('.datepicker-days');
+        if (!valueInput || !monthYearLabel || !daysContainer) return;
+
+        let currentYear = parseInt(picker.dataset.year);
+        let currentMonth = parseInt(picker.dataset.month); // 0-indexed
+
+        if (isNaN(currentYear) || isNaN(currentMonth)) {
+            const val = valueInput.value;
+            const d = val ? new Date(val) : new Date();
+            currentYear = d.getFullYear();
+            currentMonth = d.getMonth();
+            picker.dataset.year = currentYear;
+            picker.dataset.month = currentMonth;
+        }
+
+        const selectedDateVal = valueInput.value;
+        const today = new Date();
+
+        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        monthYearLabel.textContent = `${monthNames[currentMonth]} ${currentYear}`;
+
+        daysContainer.innerHTML = '';
+
+        const firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
+        const totalDays = new Date(currentYear, currentMonth + 1, 0).getDate();
+        const prevTotalDays = new Date(currentYear, currentMonth, 0).getDate();
+
+        // Prev month padding
+        for (let i = firstDayIndex - 1; i >= 0; i--) {
+            const dayNum = prevTotalDays - i;
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.disabled = true;
+            btn.className = 'py-1 text-center text-xs text-slate-700 cursor-not-allowed font-medium';
+            btn.textContent = dayNum;
+            daysContainer.appendChild(btn);
+        }
+
+        // Current month days
+        for (let day = 1; day <= totalDays; day++) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            const yearStr = currentYear;
+            const monthStr = String(currentMonth + 1).padStart(2, '0');
+            const dayStr = String(day).padStart(2, '0');
+            const dateStr = `${yearStr}-${monthStr}-${dayStr}`;
+
+            const isSelected = selectedDateVal === dateStr;
+            const isToday = today.getFullYear() === currentYear && today.getMonth() === currentMonth && today.getDate() === day;
+
+            btn.className = `py-1 text-xs rounded-lg font-semibold hover:bg-accent hover:text-accent-foreground transition flex items-center justify-center h-7 w-7 mx-auto ${
+                isSelected ? 'bg-indigo-600 text-white hover:bg-indigo-650' :
+                isToday ? 'border border-sky-500/50 text-sky-400' : 'text-slate-350'
+            }`;
+            btn.dataset.date = dateStr;
+            btn.textContent = day;
+            daysContainer.appendChild(btn);
+        }
+
+        // Next month padding
+        const totalGrids = 42;
+        const currentGrids = firstDayIndex + totalDays;
+        for (let i = 1; i <= (totalGrids - currentGrids); i++) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.disabled = true;
+            btn.className = 'py-1 text-center text-xs text-slate-700 cursor-not-allowed font-medium';
+            btn.textContent = i;
+            daysContainer.appendChild(btn);
+        }
+    }
+
+    // Initialize custom date pickers
+    document.querySelectorAll('.custom-datepicker').forEach(picker => {
+        renderCalendar(picker);
+        const val = picker.querySelector('.datepicker-value').value;
+        const text = picker.querySelector('.datepicker-text');
+        if (text && val) text.textContent = formatDateLabel(val);
+    });
+
+    // Custom Date Picker events
+    document.addEventListener('click', (event) => {
+        // Trigger Click
+        const trigger = event.target.closest('.datepicker-trigger');
+        if (trigger) {
+            const picker = trigger.closest('.custom-datepicker');
+            const popover = picker.querySelector('.datepicker-popover');
+            
+            // Close other pickers
+            document.querySelectorAll('.datepicker-popover, .timepicker-popover').forEach(pop => {
+                if (pop !== popover) pop.classList.add('hidden');
+            });
+            
+            popover.classList.toggle('hidden');
+            return;
+        }
+
+        // Prev Month
+        const prevBtn = event.target.closest('.datepicker-prev');
+        if (prevBtn) {
+            const picker = prevBtn.closest('.custom-datepicker');
+            let currentMonth = parseInt(picker.dataset.month);
+            let currentYear = parseInt(picker.dataset.year);
+            currentMonth--;
+            if (currentMonth < 0) {
+                currentMonth = 11;
+                currentYear--;
+            }
+            picker.dataset.month = currentMonth;
+            picker.dataset.year = currentYear;
+            renderCalendar(picker);
+            return;
+        }
+
+        // Next Month
+        const nextBtn = event.target.closest('.datepicker-next');
+        if (nextBtn) {
+            const picker = nextBtn.closest('.custom-datepicker');
+            let currentMonth = parseInt(picker.dataset.month);
+            let currentYear = parseInt(picker.dataset.year);
+            currentMonth++;
+            if (currentMonth > 11) {
+                currentMonth = 0;
+                currentYear++;
+            }
+            picker.dataset.month = currentMonth;
+            picker.dataset.year = currentYear;
+            renderCalendar(picker);
+            return;
+        }
+
+        // Day click
+        const dayBtn = event.target.closest('.datepicker-days button[data-date]');
+        if (dayBtn) {
+            const picker = dayBtn.closest('.custom-datepicker');
+            const valueInput = picker.querySelector('.datepicker-value');
+            const textLabel = picker.querySelector('.datepicker-text');
+            const popover = picker.querySelector('.datepicker-popover');
+            
+            const selectedDate = dayBtn.dataset.date;
+            valueInput.value = selectedDate;
+            textLabel.textContent = formatDateLabel(selectedDate);
+            renderCalendar(picker);
+            popover.classList.add('hidden');
+            valueInput.dispatchEvent(new Event('change', { bubbles: true }));
+            return;
+        }
+
+        // Close outside
+        const openPickerPopover = document.querySelector('.datepicker-popover:not(.hidden)');
+        if (openPickerPopover && !event.target.closest('.custom-datepicker')) {
+            openPickerPopover.classList.add('hidden');
+        }
+    });
+
+    // --- CUSTOM TIME PICKER LOGIC ---
+    function initTimePicker(picker) {
+        const hoursCol = picker.querySelector('.timepicker-col-hours');
+        const minutesCol = picker.querySelector('.timepicker-col-minutes');
+        const valueInput = picker.querySelector('.timepicker-value');
+        if (!hoursCol || !minutesCol || !valueInput) return;
+
+        if (hoursCol.children.length === 0) {
+            for (let hr = 1; hr <= 12; hr++) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'timepicker-btn-hour block w-full py-1.5 text-xs hover:bg-accent hover:text-accent-foreground transition text-slate-350 font-bold rounded-md';
+                btn.textContent = hr;
+                hoursCol.appendChild(btn);
+            }
+        }
+
+        if (minutesCol.children.length === 0) {
+            for (let min = 0; min < 60; min += 5) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'timepicker-btn-minute block w-full py-1.5 text-xs hover:bg-accent hover:text-accent-foreground transition text-slate-350 font-bold rounded-md';
+                btn.textContent = String(min).padStart(2, '0');
+                minutesCol.appendChild(btn);
+            }
+        }
+
+        updateTimePickerActiveStates(picker);
+    }
+
+    function updateTimePickerActiveStates(picker) {
+        const valueInput = picker.querySelector('.timepicker-value');
+        const textLabel = picker.querySelector('.timepicker-text');
+        if (!valueInput || !textLabel) return;
+        
+        const val = valueInput.value || "12:00 PM";
+        const matches = val.match(/^(\d+):(\d+)\s*(AM|PM)$/i);
+        if (!matches) return;
+
+        const hr = parseInt(matches[1]);
+        const min = matches[2];
+        const ampm = matches[3].toUpperCase();
+
+        picker.querySelectorAll('.timepicker-btn-hour').forEach(btn => {
+            if (parseInt(btn.textContent) === hr) {
+                btn.className = 'timepicker-btn-hour block w-full py-1.5 text-xs bg-indigo-600 text-white font-bold rounded-md';
+            } else {
+                btn.className = 'timepicker-btn-hour block w-full py-1.5 text-xs hover:bg-accent hover:text-accent-foreground transition text-slate-350 font-bold rounded-md';
+            }
+        });
+
+        picker.querySelectorAll('.timepicker-btn-minute').forEach(btn => {
+            if (btn.textContent === min) {
+                btn.className = 'timepicker-btn-minute block w-full py-1.5 text-xs bg-indigo-600 text-white font-bold rounded-md';
+            } else {
+                btn.className = 'timepicker-btn-minute block w-full py-1.5 text-xs hover:bg-accent hover:text-accent-foreground transition text-slate-350 font-bold rounded-md';
+            }
+        });
+
+        picker.querySelectorAll('.timepicker-ampm-btn').forEach(btn => {
+            if (btn.textContent.toUpperCase() === ampm) {
+                btn.className = 'timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold bg-indigo-650 text-white';
+            } else {
+                btn.className = 'timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-accent hover:text-accent-foreground transition text-slate-400';
+            }
+        });
+
+        textLabel.textContent = `${hr}:${min} ${ampm}`;
+    }
+
+    document.querySelectorAll('.custom-timepicker').forEach(picker => {
+        initTimePicker(picker);
+    });
+
+    document.addEventListener('click', (event) => {
+        const trigger = event.target.closest('.timepicker-trigger');
+        if (trigger) {
+            const picker = trigger.closest('.custom-timepicker');
+            const popover = picker.querySelector('.timepicker-popover');
+            
+            document.querySelectorAll('.datepicker-popover, .timepicker-popover').forEach(pop => {
+                if (pop !== popover) pop.classList.add('hidden');
+            });
+
+            popover.classList.toggle('hidden');
+            
+            if (!popover.classList.contains('hidden')) {
+                setTimeout(() => {
+                    const activeHour = picker.querySelector('.timepicker-btn-hour.bg-indigo-600');
+                    const activeMin = picker.querySelector('.timepicker-btn-minute.bg-indigo-600');
+                    if (activeHour) activeHour.scrollIntoView({ block: 'center', behavior: 'auto' });
+                    if (activeMin) activeMin.scrollIntoView({ block: 'center', behavior: 'auto' });
+                }, 10);
+            }
+            return;
+        }
+
+        const btnHour = event.target.closest('.timepicker-btn-hour');
+        const btnMinute = event.target.closest('.timepicker-btn-minute');
+        const btnAmpm = event.target.closest('.timepicker-ampm-btn');
+
+        if (btnHour || btnMinute || btnAmpm) {
+            const picker = event.target.closest('.custom-timepicker');
+            if (!picker) return;
+
+            const valueInput = picker.querySelector('.timepicker-value');
+            let val = valueInput.value || "12:00 PM";
+            const matches = val.match(/^(\d+):(\d+)\s*(AM|PM)$/i);
+            if (!matches) return;
+
+            let hr = matches[1];
+            let min = matches[2];
+            let ampm = matches[3];
+
+            if (btnHour) hr = btnHour.textContent;
+            if (btnMinute) min = btnMinute.textContent;
+            if (btnAmpm) ampm = btnAmpm.textContent;
+
+            valueInput.value = `${hr}:${min} ${ampm}`;
+            updateTimePickerActiveStates(picker);
+            valueInput.dispatchEvent(new Event('change', { bubbles: true }));
+            return;
+        }
+
+        const openTimePopover = document.querySelector('.timepicker-popover:not(.hidden)');
+        if (openTimePopover && !event.target.closest('.custom-timepicker')) {
+            openTimePopover.classList.add('hidden');
+        }
+    });
+
+    // --- INTERACTIVE TABS LOGIC ---
+    document.addEventListener('click', (event) => {
+        const tabTrigger = event.target.closest('[data-tab-target]');
+        if (tabTrigger) {
+            const tabGroup = tabTrigger.getAttribute('data-tab-group');
+            const targetId = tabTrigger.getAttribute('data-tab-target');
+            if (!tabGroup || !targetId) return;
+            
+            // Deactivate all tab triggers in the same group
+            document.querySelectorAll(`[data-tab-group="${tabGroup}"]`).forEach(trig => {
+                trig.classList.remove('border-sky-500', 'text-sky-400');
+                trig.classList.add('border-transparent', 'text-slate-400', 'hover:text-slate-200');
+            });
+            
+            // Activate selected tab trigger
+            tabTrigger.classList.remove('border-transparent', 'text-slate-400', 'hover:text-slate-200');
+            tabTrigger.classList.add('border-sky-500', 'text-sky-400');
+            
+            // Hide all tab content panes in the same group
+            document.querySelectorAll(`[data-tab-content-group="${tabGroup}"]`).forEach(pane => {
+                pane.classList.add('hidden');
+            });
+            
+            // Show the targeted pane
+            const targetPane = document.getElementById(targetId);
+            if (targetPane) targetPane.classList.remove('hidden');
+        }
+    });
+
+    // --- ACCORDION LOGIC ---
+    document.addEventListener('click', (event) => {
+        const header = event.target.closest('.accordion-trigger');
+        if (header) {
+            const container = header.closest('.accordion-item');
+            const content = container.querySelector('.accordion-content');
+            const chevron = header.querySelector('.accordion-chevron');
+            if (!content) return;
+            
+            const isCollapsed = content.classList.contains('hidden');
+            
+            // Toggle Accordion Content
+            if (isCollapsed) {
+                content.classList.remove('hidden');
+                if (chevron) chevron.classList.add('rotate-180');
+            } else {
+                content.classList.add('hidden');
+                if (chevron) chevron.classList.remove('rotate-180');
+            }
+        }
+    });
+
+    // --- SHEET / DRAWER LOGIC ---
+    window.openSheet = function(sheetId) {
+        const sheet = document.getElementById(sheetId);
+        if (!sheet) return;
+        sheet.classList.remove('hidden');
+        setTimeout(() => {
+            const content = sheet.querySelector('.sheet-content');
+            const backdrop = sheet.querySelector('.sheet-backdrop');
+            if (backdrop) backdrop.classList.remove('opacity-0');
+            if (content) {
+                content.classList.remove('translate-x-full');
+                content.classList.add('translate-x-0');
+            }
+        }, 10);
+    };
+
+    window.closeSheet = function(sheet) {
+        if (typeof sheet === 'string') sheet = document.getElementById(sheet);
+        if (!sheet) return;
+        const content = sheet.querySelector('.sheet-content');
+        const backdrop = sheet.querySelector('.sheet-backdrop');
+        if (backdrop) backdrop.classList.add('opacity-0');
+        if (content) {
+            content.classList.remove('translate-x-0');
+            content.classList.add('translate-x-full');
+        }
+        setTimeout(() => {
+            sheet.classList.add('hidden');
+        }, 300);
+    };
+
+    document.addEventListener('click', (event) => {
+        // Open Sheet Triggers
+        const trigger = event.target.closest('[data-sheet-target]');
+        if (trigger) {
+            const targetId = trigger.getAttribute('data-sheet-target');
+            window.openSheet(targetId);
+        }
+
+        // Close Sheet Triggers
+        if (event.target.closest('.sheet-close') || event.target.closest('.sheet-backdrop')) {
+            const sheet = event.target.closest('.sheet-dialog');
+            window.closeSheet(sheet);
+        }
+    });
+
+    // --- SIDEBAR NAVIGATION ACTIVE HIGHLIGHTING ---
+    const currentPath = window.location.pathname;
+    const sidebar = document.getElementById('wiki-sidebar');
+    if (sidebar) {
+        sidebar.querySelectorAll('a[data-wiki-path]').forEach(link => {
+            const path = link.getAttribute('data-wiki-path');
+            if (currentPath === path) {
+                link.className = 'flex items-center px-3 py-2 text-xs font-semibold rounded-lg bg-indigo-600/20 text-indigo-400 border border-indigo-500/10 transition';
+            } else {
+                link.className = 'flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-accent hover:text-accent-foreground transition';
+            }
+        });
+    }
+
+    // --- CUSTOM SELECT DROPDOWN LOGIC ---
+    document.addEventListener('click', (event) => {
+        const trigger = event.target.closest('.select-trigger');
+        const item = event.target.closest('.select-item');
+        
+        // Close all other select dropdowns when clicking trigger or outside
+        if (trigger || !event.target.closest('.custom-select')) {
+            document.querySelectorAll('.custom-select').forEach(select => {
+                const popover = select.querySelector('.select-popover');
+                const chevron = select.querySelector('.select-chevron');
+                if (popover && (!trigger || select !== trigger.closest('.custom-select'))) {
+                    popover.classList.add('hidden');
+                    if (chevron) chevron.classList.remove('rotate-180');
+                }
+            });
+        }
+
+        // Toggle dropdown open state
+        if (trigger) {
+            const select = trigger.closest('.custom-select');
+            const popover = select.querySelector('.select-popover');
+            const chevron = select.querySelector('.select-chevron');
+            if (popover) {
+                const isHidden = popover.classList.toggle('hidden');
+                if (chevron) {
+                    if (isHidden) {
+                        chevron.classList.remove('rotate-180');
+                    } else {
+                        chevron.classList.add('rotate-180');
+                    }
+                }
+            }
+        }
+
+        // Handle item selection
+        if (item) {
+            const select = item.closest('.custom-select');
+            const triggerBtn = select.querySelector('.select-trigger');
+            const valueInput = select.querySelector('.select-value');
+            const textLabel = select.querySelector('.select-text');
+            const popover = select.querySelector('.select-popover');
+            const chevron = select.querySelector('.select-chevron');
+            
+            const value = item.getAttribute('data-value');
+            const labelText = item.textContent.trim();
+            
+            if (valueInput) valueInput.value = value;
+            if (textLabel) textLabel.textContent = labelText;
+            
+            // Mark selected item visually
+            select.querySelectorAll('.select-item').forEach(i => {
+                i.classList.remove('bg-accent', 'text-accent-foreground', 'font-semibold');
+            });
+            item.classList.add('bg-accent', 'text-accent-foreground', 'font-semibold');
+            
+            // Close dropdown
+            if (popover) popover.classList.add('hidden');
+            if (chevron) chevron.classList.remove('rotate-180');
+            if (triggerBtn) triggerBtn.focus();
+            
+            // Trigger change event on input
+            if (valueInput) {
+                valueInput.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        }
+    });
+
+    // Keyboard support for custom select triggers
+    document.addEventListener('keydown', (event) => {
+        const trigger = event.target.closest('.select-trigger');
+        const item = event.target.closest('.select-item');
+        
+        if (trigger) {
+            const select = trigger.closest('.custom-select');
+            const popover = select.querySelector('.select-popover');
+            
+            if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                if (popover) {
+                    popover.classList.remove('hidden');
+                    const chevron = select.querySelector('.select-chevron');
+                    if (chevron) chevron.classList.add('rotate-180');
+                }
+                const firstItem = select.querySelector('.select-item');
+                if (firstItem) firstItem.focus();
+            }
+            return;
+        }
+        
+        if (item) {
+            const select = item.closest('.custom-select');
+            const triggerBtn = select.querySelector('.select-trigger');
+            const items = Array.from(select.querySelectorAll('.select-item'));
+            const index = items.indexOf(item);
+            
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                const next = items[index + 1] || items[0];
+                if (next) next.focus();
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                const prev = items[index - 1] || items[items.length - 1];
+                if (prev) prev.focus();
+            } else if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                item.click();
+            } else if (event.key === 'Escape') {
+                event.preventDefault();
+                const popover = select.querySelector('.select-popover');
+                const chevron = select.querySelector('.select-chevron');
+                if (popover) popover.classList.add('hidden');
+                if (chevron) chevron.classList.remove('rotate-180');
+                if (triggerBtn) triggerBtn.focus();
+            }
+        }
+    });
+
+    // Global keydown listener for Escape to dismiss modals
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            const openDialog = document.querySelector('.modal-dialog:not(.hidden)');
+            if (openDialog) {
+                window.closeModal(openDialog);
+            }
+        }
+    });
+
+    // --- COPY CODE SNIPPETS HELPER ---
+    window.copyCodeSnippet = function(button) {
+        const pre = button.closest('.relative').querySelector('pre');
+        if (!pre) return;
+        const code = pre.querySelector('code');
+        const text = code ? code.innerText : pre.innerText;
+        
+        navigator.clipboard.writeText(text).then(() => {
+            const originalText = button.innerHTML;
+            button.innerHTML = `
+                <svg class="h-3 w-3 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
+                <span class="text-sky-400">Copied!</span>
+            `;
+            button.classList.add('border-sky-500/30', 'bg-sky-500/5');
+            if (window.showToast) {
+                window.showToast('Snippet copied to clipboard!');
+            }
+            setTimeout(() => {
+                button.innerHTML = originalText;
+                button.classList.remove('border-sky-500/30', 'bg-sky-500/5');
+            }, 2000);
+        }).catch(err => {
+            console.error('Failed to copy text: ', err);
+            if (window.showToast) {
+                window.showToast('Failed to copy to clipboard', 'error');
+            }
+        });
+    };
+});
+
+
+

templates/auth/login.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+
+{% block title %}Sign In - Stick{% endblock %}
+
+{% block content %}
+<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-400 via-blue-500 to-indigo-600"></div>
+        
+        <div class="text-center mb-8">
+            <h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Welcome Back</h2>
+            <p class="mt-2 text-sm text-slate-400">Sign in to manage your tasks</p>
+        </div>
+
+        {% if let Some(err) = error %}
+            <div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+                </svg>
+                <span>{{ err }}</span>
+            </div>
+        {% endif %}
+
+        <form class="space-y-5" action="/auth/login" method="post">
+            <div>
+                <label for="username" class="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
+                <input id="username" name="username" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Enter username">
+            </div>
+            
+            <div>
+                <label for="password" class="block text-sm font-medium text-slate-400 mb-1.5">Password</label>
+                <input id="password" name="password" type="password" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="••••••••">
+            </div>
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:ring-offset-[#0f172a] shadow-lg shadow-sky-500/10">
+                    Sign In
+                </button>
+            </div>
+        </form>
+
+        <div class="mt-6 text-center text-sm text-slate-400">
+            Don't have an account? 
+            <a href="/auth/register" class="font-medium text-sky-400 hover:underline">Sign up now</a>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/auth/register.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+
+{% block title %}Sign Up - Stick{% endblock %}
+
+{% block content %}
+<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-600"></div>
+        
+        <div class="text-center mb-8">
+            <h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Create Account</h2>
+            <p class="mt-2 text-sm text-slate-400">Join us to start planning your tasks</p>
+        </div>
+
+        {% if let Some(err) = error %}
+            <div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+                </svg>
+                <span>{{ err }}</span>
+            </div>
+        {% endif %}
+
+        {% if let Some(msg) = success %}
+            <div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-start gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+                </svg>
+                <span>{{ msg }}</span>
+            </div>
+        {% endif %}
+
+        <form class="space-y-5" action="/auth/register" method="post">
+            <div>
+                <label for="username" class="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
+                <input id="username" name="username" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition duration-200 text-sm" placeholder="Choose a username">
+            </div>
+            
+            <div>
+                <label for="password" class="block text-sm font-medium text-slate-400 mb-1.5">Password</label>
+                <input id="password" name="password" type="password" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition duration-200 text-sm" placeholder="••••••••">
+            </div>
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-emerald-500 to-teal-600 hover:opacity-95 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 focus:ring-offset-[#0f172a] shadow-lg shadow-emerald-500/10">
+                    Sign Up
+                </button>
+            </div>
+        </form>
+
+        <div class="mt-6 text-center text-sm text-slate-400">
+            Already have an account? 
+            <a href="/auth/login" class="font-medium text-emerald-400 hover:underline">Log in here</a>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full" style="color-scheme: dark;">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="dark">
+    <title>{% block title %}Stick Template{% endblock %}</title>
+    <!-- Compiled Tailwind CSS stylesheet -->
+    <link rel="stylesheet" href="/static/tailwind.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- HTMX & Hyperscript CDN -->
+    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+    <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+    <!-- Consolidated Combobox Script -->
+    <script src="/static/js/combobox.js" defer></script>
+    <!-- Consolidated Components Script -->
+    <script src="/static/js/components.js" defer></script>
+    <!-- Style adjustments -->
+    <style>
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: hsl(var(--background));
+            background-image: 
+                radial-gradient(at 50% 0%, hsla(240, 5%, 26%, 0.04) 0%, transparent 60%);
+        }
+    </style>
+</head>
+<body class="flex flex-col min-h-screen text-foreground selection:bg-sky-500 selection:text-white">
+    <!-- Toast notifications container -->
+    <div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"></div>
+
+    <!-- Header / Navbar -->
+    <header class="border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <!-- Logo -->
+                <div class="flex items-center space-x-3">
+                    <a href="/" class="flex items-center space-x-2.5 group">
+                        <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-sky-400 to-indigo-600 flex items-center justify-center shadow-lg shadow-sky-500/20 group-hover:scale-105 transition-all duration-300">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5 text-white">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
+                            </svg>
+                        </div>
+                        <span class="text-xl font-bold tracking-tight bg-gradient-to-r from-slate-100 to-slate-300 bg-clip-text text-transparent group-hover:from-white group-hover:to-slate-200 transition duration-300">
+                            stick
+                        </span>
+                    </a>
+                </div>
+
+                <!-- Navigation Links -->
+                <nav class="flex items-center space-x-4">
+                    <a href="/components" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
+                        Design Wiki
+                    </a>
+                    {% if authenticated %}
+                        <a href="/tasks" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
+                            Dashboard
+                        </a>
+                        <a href="/developers" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
+                            Developers
+                        </a>
+                        <div class="h-4 w-px bg-secondary"></div>
+                        <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-secondary border border-border text-sky-400">
+                            {{ username }}
+                        </span>
+                        <form action="/auth/logout" method="post" class="inline">
+                            <button type="submit" class="text-sm font-medium text-rose-400 hover:text-rose-300 transition py-2 px-3 rounded-lg hover:bg-rose-950/20">
+                                Logout
+                            </button>
+                        </form>
+                    {% else %}
+                        <a href="/auth/login" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
+                            Log In
+                        </a>
+                        <a href="/auth/register" class="text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-90 transition px-4 py-2 rounded-xl shadow-md shadow-sky-500/10">
+                            Sign Up
+                        </a>
+                    {% endif %}
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="grow flex flex-col">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-slate-950 bg-card/50 py-6 text-center text-xs text-slate-500">
+        <div class="max-w-7xl mx-auto px-4">
+            <p>&copy; 2026 Stick Template. Built with Axum, Askama, and MongoDB. Styled with Tailwind CSS.</p>
+        </div>
+    </footer>
+
+</body>
+</html>

templates/components/buttons.html

@@ -0,0 +1,135 @@
+{% extends "base.html" %}
+
+{% block title %}Buttons - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Actions / Navigation</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Buttons</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Standard button variants including primary, secondary, outlines, and statuses, completed with focus ring outlines, scale transformations on hover, and loading spinner designs.
+            </p>
+        </div>
+
+        <!-- Section Buttons -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Button Variants & Interactive Demos</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'btn-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'btn-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="btn-sandbox" class="wiki-pane flex flex-wrap gap-4 py-2">
+                    <button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95">
+                        Primary
+                    </button>
+                    
+                    <button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95">
+                        Secondary
+                    </button>
+                    
+                    <button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95">
+                        Outline
+                    </button>
+                    
+                    <button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-background bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 shadow-md active:scale-95">
+                        Destructive
+                    </button>
+
+                    <!-- Icon Button -->
+                    <button class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 active:scale-95">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+                        </svg>
+                        Create Task
+                    </button>
+
+                    <!-- Loading State -->
+                    <button disabled class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold bg-secondary text-slate-500 cursor-not-allowed px-4 py-2.5">
+                        <svg class="animate-spin h-3.5 w-3.5 text-slate-500" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        Processing...
+                    </button>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="btn-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Primary Button --&gt;
+&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95"&gt;
+    Primary
+&lt;/button&gt;
+
+&lt;!-- Secondary Button --&gt;
+&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95"&gt;
+    Secondary
+&lt;/button&gt;
+
+&lt;!-- Outline Button --&gt;
+&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95"&gt;
+    Outline
+&lt;/button&gt;
+
+&lt;!-- Destructive Button --&gt;
+&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 active:scale-95"&gt;
+    Destructive
+&lt;/button&gt;
+
+&lt;!-- Create Button (Icon + Text) --&gt;
+&lt;button class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 bg-indigo-650 hover:bg-indigo-600 text-white px-4 py-2.5 active:scale-95"&gt;
+    &lt;svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
+        &lt;path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/&gt;
+    &lt;/svg&gt;
+    Create Task
+&lt;/button&gt;
+
+&lt;!-- Spinner Loading Button --&gt;
+&lt;button disabled class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold bg-secondary text-slate-500 cursor-not-allowed px-4 py-2.5"&gt;
+    &lt;svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24"&gt;
+        &lt;circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"&gt;&lt;/circle&gt;
+        &lt;path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"&gt;&lt;/svg&gt;
+    Processing...
+&lt;/button&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/combobox.html

@@ -0,0 +1,216 @@
+{% extends "base.html" %}
+
+{% block title %}Autocomplete (Combobox) - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Forms & Inputs</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Autocomplete (Combobox)</h1>
+            <p class="text-slate-405 text-sm mt-2 leading-relaxed">
+                Asynchronous search dropdown inputs driven by HTMX requests with fully integrated keyboard navigation, focus overlays, selection, and hidden inputs for form validation.
+            </p>
+        </div>
+
+        <!-- Section Combobox -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Autocomplete Showcase & Integration</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'combo-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'combo-client-code')">Client-Side HTML</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'combo-server-code')">Server-Side HTML</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="combo-sandbox" class="wiki-pane grid grid-cols-1 md:grid-cols-2 gap-8 py-2">
+                    
+                    <!-- Left: Client-side Demo -->
+                    <div class="space-y-2 max-w-xs w-full">
+                        <span class="text-[10px] font-bold text-indigo-400 uppercase tracking-wider block mb-1">Client-Side Filtering</span>
+                        <div class="autocomplete-combobox relative">
+                            <label class="block text-xs font-semibold text-muted-foreground mb-1.5">Local Developer List</label>
+                            <input type="hidden" id="wiki-assignee-id" class="combobox-value">
+                            <input type="text" id="wiki-assignee-search" placeholder="Type name e.g. Bob..." autocomplete="off" class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500">
+                            
+                            <div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden">
+                                <div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="1" data-name="Alice Vance" tabindex="0">Alice Vance (Lead)</div>
+                                <div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="2" data-name="Bob Carter" tabindex="0">Bob Carter (Senior)</div>
+                                <div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="3" data-name="Charlie Smith" tabindex="0">Charlie Smith (Junior)</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Right: Server-side Demo -->
+                    <div class="space-y-2 max-w-xs w-full">
+                        <span class="text-[10px] font-bold text-emerald-400 uppercase tracking-wider block mb-1">Server-Side HTMX Search</span>
+                        
+                        {% if authenticated %}
+                            <div class="autocomplete-combobox relative">
+                                <label class="block text-xs font-semibold text-muted-foreground mb-1.5">Live MongoDB Query</label>
+                                <input type="hidden" name="assignee_id" class="combobox-value">
+                                <input type="text" name="q" placeholder="Query developers database..." autocomplete="off" 
+                                       class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
+                                       hx-get="/developers/search" hx-trigger="input changed delay:200ms" hx-target="next .combobox-results">
+                                <div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"></div>
+                            </div>
+                        {% else %}
+                            <div class="rounded-2xl border border-border bg-[#09090b]/40 p-4 space-y-2 text-xs">
+                                <div class="flex items-center gap-1.5 text-amber-500 font-bold">
+                                    <svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+                                    Authentication Required
+                                </div>
+                                <p class="text-muted-foreground leading-normal">
+                                    To query the MongoDB database on the server, you must sign in to an active session first.
+                                </p>
+                                <a href="/auth/login" class="inline-flex items-center text-xs font-semibold text-sky-400 hover:text-sky-350 gap-1 mt-1">
+                                    Log in to query database
+                                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
+                                </a>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <!-- Client-Side Code Snippet Area -->
+                <div id="combo-client-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Client-Side Combobox Container (Filtered Locally) --&gt;
+&lt;div class="autocomplete-combobox relative"&gt;
+    &lt;!-- Holds the final value submitted to forms --&gt;
+    &lt;input type="hidden" name="developer_id" class="combobox-value"&gt;
+    
+    &lt;!-- Input box handles local filtering --&gt;
+    &lt;input type="text" placeholder="Type name e.g. Bob..." autocomplete="off" 
+           class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"&gt;
+           
+    &lt;!-- Dropdown lists all options, filtered on input/focus dynamically --&gt;
+    &lt;div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"&gt;
+        &lt;div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="1" data-name="Alice Vance" tabindex="0"&gt;Alice Vance (Lead)&lt;/div&gt;
+        &lt;div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="2" data-name="Bob Carter" tabindex="0"&gt;Bob Carter (Senior)&lt;/div&gt;
+        &lt;div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="3" data-name="Charlie Smith" tabindex="0"&gt;Charlie Smith (Junior)&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+
+                <!-- Server-Side Code Snippet Area -->
+                <div id="combo-server-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Server-Side Combobox Container (Asynchronous Query via HTMX) --&gt;
+&lt;div class="autocomplete-combobox relative"&gt;
+    &lt;!-- Holds the final value submitted to forms --&gt;
+    &lt;input type="hidden" name="assignee_id" class="combobox-value"&gt;
+    
+    &lt;!-- Input box triggers search query. Submits with parameter 'q' --&gt;
+    &lt;input type="text" name="q" placeholder="Search developers..." autocomplete="off" 
+           class="combobox-input block w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-sky-500"
+           hx-get="/developers/search" hx-trigger="input changed delay:250ms" hx-target="next .combobox-results"&gt;
+           
+    &lt;!-- Dropdown container receives swapped HTML markup from server --&gt;
+    &lt;div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Global JS Bindings Documentation -->
+        <section class="space-y-4 border-t border-border/60 pt-6">
+            <h2 class="text-lg font-bold text-slate-200">How the Global Combobox JS Works</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                The global script <code>combobox.js</code> runs automatically on page load and hooks onto the class names listed below. Ensure your markup uses these selectors to integrate keyboard selection and local/remote filtering:
+            </p>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/4">Selector / Class</th>
+                            <th class="pb-2.5 w-1/4">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.autocomplete-combobox</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Wraps all input elements, hidden inputs, and search result list containers.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-value</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to the <code>&lt;input type="hidden"&gt;</code> element that holds the final selection key (e.g. database ID) for form validation and submission.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-input</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to the visible <code>&lt;input type="text"&gt;</code> element. Captures typing, trigger clicks, and keyboard arrow navigation events.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-results</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The overlay list container. Starts with the class <code>hidden</code>. Toggled open on focus, click, or when query results return.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-item</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to option elements. Must contain <code>tabindex="0"</code> (for keyboard focus), <code>data-id="..."</code> (database value), and <code>data-name="..."</code> (display value).
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
+                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
+                <p class="text-slate-400 leading-normal">
+                    You can customize the visual appearance of the options list <code>.combobox-results</code>, option heights, text alignment, input styles, borders, icons, and colors. The functional classes (like <code>.combobox-input</code>, <code>.combobox-value</code>, <code>.combobox-item</code>) must remain intact, and each item must include the <code>data-id</code>, <code>data-name</code>, and <code>tabindex="0"</code> attributes so they participate in keyboard selection cycling and updates.
+                </p>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/date_time.html

@@ -0,0 +1,392 @@
+{% extends "base.html" %}
+
+{% block title %}Date & Time Pickers - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Pickers</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Date & Time Pickers</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Custom popup calendars and hour/minute scroll menus constructed using DOM components to prevent relying on native browser-system calendar windows. Designed for optimal styling consistency.
+            </p>
+        </div>
+
+        <!-- Section Pickers -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Date & Time Popovers</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'picker-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'picker-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="picker-sandbox" class="wiki-pane grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-lg py-2">
+                    <!-- Date Picker -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-slate-405">Date Picker</label>
+                        <div class="custom-datepicker relative inline-block w-full" id="wiki-datepicker" data-year="2026" data-month="4">
+                            <input type="hidden" name="wiki_date" class="datepicker-value" value="2026-05-30">
+                            <button type="button" class="datepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary transition focus:outline-none focus:ring-2 focus:ring-sky-500">
+                                <span class="datepicker-label flex items-center gap-2">
+                                    <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                                    </svg>
+                                    <span class="datepicker-text">May 30, 2026</span>
+                                </span>
+                                <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+                            </button>
+                            <div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
+                                <div class="flex items-center justify-between mb-3.5">
+                                    <button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
+                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
+                                    </button>
+                                    <span class="datepicker-month-year text-xs font-bold text-slate-200">May 2026</span>
+                                    <button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
+                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
+                                    </button>
+                                </div>
+                                <div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
+                                    <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
+                                </div>
+                                <div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Time Picker -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-slate-405">Time Picker</label>
+                        <div class="custom-timepicker relative inline-block w-full" id="wiki-timepicker">
+                            <input type="hidden" name="wiki_time" class="timepicker-value" value="12:00 PM">
+                            <button type="button" class="timepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary transition focus:outline-none focus:ring-2 focus:ring-sky-500">
+                                <span class="timepicker-label flex items-center gap-2">
+                                    <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                    </svg>
+                                    <span class="timepicker-text">12:00 PM</span>
+                                </span>
+                                <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+                            </button>
+                            <div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
+                                <div class="flex gap-2 justify-center items-center">
+                                    <div class="flex flex-col items-center">
+                                        <span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
+                                        <div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"></div>
+                                    </div>
+                                    <span class="text-slate-500 font-bold self-end mb-12">:</span>
+                                    <div class="flex flex-col items-center">
+                                        <span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Min</span>
+                                        <div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"></div>
+                                    </div>
+                                    <div class="flex flex-col items-center ml-1">
+                                        <span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Am/Pm</span>
+                                        <div class="flex flex-col gap-1 w-12">
+                                            <button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">AM</button>
+                                            <button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">PM</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="picker-code" class="wiki-pane hidden space-y-4">
+                    <!-- Date Picker Code -->
+                    <div class="space-y-2">
+                        <span class="text-xs font-bold text-muted-foreground block">Date Picker HTML Structure</span>
+                        <div class="relative group">
+                            <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                                Copy Date Picker Code
+                            </button>
+                            <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Custom Date Picker Container
+     - class "custom-datepicker": required for JavaScript target binding
+     - data-year / data-month: initializes the calendar viewport (month is 0-indexed: 4 = May) --&gt;
+&lt;div class="custom-datepicker relative inline-block w-full" id="unique-datepicker-id" data-year="2026" data-month="4"&gt;
+    &lt;!-- Hidden input that holds the actual selected date (YYYY-MM-DD) to submit with the form --&gt;
+    &lt;input type="hidden" name="date_value" class="datepicker-value" value="2026-05-30"&gt;
+    
+    &lt;!-- Trigger Button: opens/closes the dropdown calendar popover --&gt;
+    &lt;button type="button" class="datepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
+        &lt;span class="datepicker-label flex items-center gap-2"&gt;
+            &lt;svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
+                &lt;path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/&gt;
+            &lt;/svg&gt;
+            &lt;!-- text-label: will be dynamically updated by components.js when a day is selected --&gt;
+            &lt;span class="datepicker-text"&gt;Pick a date&lt;/span&gt;
+        &lt;/span&gt;
+        &lt;svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="6 9 12 15 18 9"/&gt;&lt;/svg&gt;
+    &lt;/button&gt;
+
+    &lt;!-- Popover: holds month controls and calendar grids --&gt;
+    &lt;div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
+        &lt;!-- Navigation Controls --&gt;
+        &lt;div class="flex items-center justify-between mb-3.5"&gt;
+            &lt;button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white"&gt;
+                &lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="15 18 9 12 15 6"/&gt;&lt;/svg&gt;
+            &lt;/button&gt;
+            &lt;!-- Current visible Month/Year label --&gt;
+            &lt;span class="datepicker-month-year text-xs font-bold text-slate-200"&gt;&lt;/span&gt;
+            &lt;button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white"&gt;
+                &lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="9 18 15 12 9 6"/&gt;&lt;/svg&gt;
+            &lt;/button&gt;
+        &lt;/div&gt;
+        &lt;!-- Weekday column labels --&gt;
+        &lt;div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2"&gt;
+            &lt;span&gt;Su&lt;/span&gt;&lt;span&gt;Mo&lt;/span&gt;&lt;span&gt;Tu&lt;/span&gt;&lt;span&gt;We&lt;/span&gt;&lt;span&gt;Th&lt;/span&gt;&lt;span&gt;Fr&lt;/span&gt;&lt;span&gt;Sa&lt;/span&gt;
+        &lt;/div&gt;
+        &lt;!-- Day Grid (filled dynamically with days by components.js on load) --&gt;
+        &lt;div class="datepicker-days grid grid-cols-7 gap-1 text-center"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                        </div>
+                    </div>
+
+                    <!-- Time Picker Code -->
+                    <div class="space-y-2">
+                        <span class="text-xs font-bold text-muted-foreground block">Time Picker HTML Structure</span>
+                        <div class="relative group">
+                            <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                                Copy Time Picker Code
+                            </button>
+                            <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Custom Time Picker Container
+     - class "custom-timepicker": required for JavaScript target binding --&gt;
+&lt;div class="custom-timepicker relative inline-block w-full" id="unique-timepicker-id"&gt;
+    &lt;!-- Hidden input holds selected value (e.g., "12:00 PM") for form submission --&gt;
+    &lt;input type="hidden" name="time_value" class="timepicker-value" value="12:00 PM"&gt;
+    
+    &lt;!-- Trigger Button --&gt;
+    &lt;button type="button" class="timepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
+        &lt;span class="timepicker-label flex items-center gap-2"&gt;
+            &lt;svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
+                &lt;path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/&gt;
+            &lt;/svg&gt;
+            &lt;!-- Time text label updated dynamically on pick --&gt;
+            &lt;span class="timepicker-text"&gt;12:00 PM&lt;/span&gt;
+        &lt;/span&gt;
+        &lt;svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="6 9 12 15 18 9"/&gt;&lt;/svg&gt;
+    &lt;/button&gt;
+    
+    &lt;!-- Time Picker Dropdown Menu --&gt;
+    &lt;div class="timepicker-popover absolute left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
+        &lt;div class="flex gap-2 justify-center items-center"&gt;
+            &lt;!-- Hours Column (filled with &lt;button&gt;s 1 to 12 dynamically by components.js) --&gt;
+            &lt;div class="flex flex-col items-center"&gt;
+                &lt;span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider"&gt;Hr&lt;/span&gt;
+                &lt;div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            
+            &lt;span class="text-slate-500 font-bold self-end mb-12"&gt;:&lt;/span&gt;
+            
+            &lt;!-- Minutes Column (filled with &lt;button&gt;s 00 to 55 in 5m steps dynamically) --&gt;
+            &lt;div class="flex flex-col items-center"&gt;
+                &lt;span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider"&gt;Min&lt;/span&gt;
+                &lt;div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            
+            &lt;!-- AM/PM Selector --&gt;
+            &lt;div class="flex flex-col items-center ml-1"&gt;
+                &lt;span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider"&gt;Am/Pm&lt;/span&gt;
+                &lt;div class="flex flex-col gap-1 w-12"&gt;
+                    &lt;button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground"&gt;AM&lt;/button&gt;
+                    &lt;button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground"&gt;PM&lt;/button&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Global JS Bindings Documentation -->
+        <section class="space-y-6 border-t border-border/60 pt-6">
+            <div>
+                <h2 class="text-lg font-bold text-slate-200">How the Global Date Picker JS Works</h2>
+                <p class="text-xs text-muted-foreground leading-relaxed mt-1">
+                    The custom date picker relies on the following classes and datasets to manage month navigation and update values:
+                </p>
+            </div>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/3">Selector / Class</th>
+                            <th class="pb-2.5 w-1/6">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.custom-datepicker</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Wraps the date picker component. Must declare <code>data-year</code> (e.g. 2026) and <code>data-month</code> (0-indexed, 0 = Jan, 4 = May) to initialize the viewport.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-value</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Hidden input field (<code>&lt;input type="hidden"&gt;</code>) storing the ISO date value (YYYY-MM-DD) for form submission.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-trigger</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Button clicked by user to open or close the calendar popover dropdown.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-text</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Target text element updated dynamically to display the formatted selected date (e.g., "May 30, 2026").
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-popover</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Floating container containing the month navigation buttons and days grids. Starts as <code>hidden</code>.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-prev / .datepicker-next</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Navigational buttons to decrement or increment the active month.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-month-year</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Display title label updated dynamically with current month and year (e.g. "May 2026").
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-days</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Calendar day grid container dynamically populated with clickable day buttons by the JS engine.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Time Picker JS Works</h2>
+                <p class="text-xs text-muted-foreground leading-relaxed mt-1">
+                    The custom time picker scopes dynamic lists of hours and minutes inside scrollable blocks using the following bindings:
+                </p>
+            </div>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/3">Selector / Class</th>
+                            <th class="pb-2.5 w-1/6">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.custom-timepicker</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Wraps the time picker markup structure.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-value</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Hidden input field storing the active text time (e.g. "12:00 PM") for forms.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-trigger</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Clickable button to open the scroll dropdown.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-text</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Text node inside trigger displaying the formatted time.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-popover</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Dropdown overlay panel displaying columns for hour list, minute list, and AM/PM buttons.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-col-hours / .timepicker-col-minutes</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Containers populated automatically with hourly buttons (1-12) and minute buttons (00-55).
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-ampm-btn</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Buttons representing "AM" and "PM" choices toggled on click.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
+                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
+                <p class="text-slate-400 leading-normal">
+                    You can customize the styling of the trigger buttons, chevrons, icons, popover cards, borders, shadows, backgrounds, and the active option buttons (which receive <code>.bg-indigo-600</code>). Ensure you preserve the classes and attributes listed above so the DOM-generation functions and trigger listeners in <code>components.js</code> execute without error.
+                </p>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/feedback.html

@@ -0,0 +1,130 @@
+{% extends "base.html" %}
+
+{% block title %}Toasts & Alerts - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-405">Feedback</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Toasts & Alerts</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Dynamic toast stack notifications triggered from JavaScript, combined with static SVG alert boxes for validation errors or warnings.
+            </p>
+        </div>
+
+        <!-- Section Feedback -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Interactive Toast & Alert Showcase</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'feedback-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'feedback-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="feedback-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
+                    <!-- Toast triggers -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Toast Notifications</span>
+                        <div class="flex gap-2">
+                            <button type="button" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-secondary border border-border text-slate-200 px-4 py-2 hover:bg-secondary active:scale-95 transition" onclick="showToast('Operation finished successfully!')">
+                                Trigger Toast
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Alert callouts -->
+                    <div class="space-y-2.5">
+                        <span class="block text-xs font-semibold text-muted-foreground">Static Callout Banners</span>
+                        
+                        <!-- Info Banner -->
+                        <div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 flex gap-3 text-xs text-sky-400">
+                            <svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                            </svg>
+                            <div>
+                                <span class="font-bold text-slate-100 block">General Information</span>
+                                <span class="text-muted-foreground leading-relaxed block mt-0.5">Please remember to assign the task to an active workspace developer.</span>
+                            </div>
+                        </div>
+
+                        <!-- Warning Banner -->
+                        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 flex gap-3 text-xs text-amber-400">
+                            <svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                            </svg>
+                            <div>
+                                <span class="font-bold text-slate-100 block">Database Sync Issues</span>
+                                <span class="text-muted-foreground leading-relaxed block mt-0.5">Local connections to MongoDB might be interrupted temporarily.</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="feedback-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- 1. Dynamic Toast Trigger from JS --&gt;
+&lt;button onclick="showToast('Action Completed Successfully!')"&gt;
+    Trigger Success Toast
+&lt;/button&gt;
+
+&lt;!-- 2. Static Info Banner Alert --&gt;
+&lt;div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 flex gap-3 text-xs text-sky-400"&gt;
+    &lt;svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
+        &lt;path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/&gt;
+    &lt;/svg&gt;
+    &lt;div&gt;
+        &lt;span class="font-bold text-slate-100 block"&gt;Alert Title&lt;/span&gt;
+        &lt;span class="text-muted-foreground block mt-0.5"&gt;Description of alert information.&lt;/span&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!-- 3. Static Warning Banner Alert --&gt;
+&lt;div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 flex gap-3 text-xs text-amber-400"&gt;
+    &lt;svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
+        &lt;path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/&gt;
+    &lt;/svg&gt;
+    &lt;div&gt;
+        &lt;span class="font-bold text-slate-100 block"&gt;Warning Title&lt;/span&gt;
+        &lt;span class="text-muted-foreground block mt-0.5"&gt;Warning context content details.&lt;/span&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/index.html

@@ -0,0 +1,133 @@
+{% extends "base.html" %}
+
+{% block title %}Design System Wiki - Stick{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Floating Sidebar Navigation -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content Area -->
+    <div class="flex-1 space-y-10">
+        
+        <!-- Intro Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 mb-3 animate-pulse">
+                Stick Design System Wiki
+            </span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Component Reference Manual</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Welcome to the Stick design system Wiki. This documentation serves as a living blueprint detailing HTML structures, Tailwind CSS custom variables, and JavaScript trigger hooks required to build premium, high-fidelity interactive elements using the Shadcn aesthetic.
+            </p>
+        </div>
+
+        <!-- Architecture & Concept -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-400/20 to-indigo-500/20 border border-sky-500/30 flex items-center justify-center">
+                    <svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+                    </svg>
+                </div>
+                <h3 class="text-sm font-bold text-slate-200">Vertical Feature Architecture</h3>
+                <p class="text-xs text-muted-foreground/90 leading-relaxed">
+                    Components are packaged inside feature directories (e.g. <code>src/components/</code>) rather than spread horizontally. Handlers render Askama templates, static JS, and compiled Tailwind assets dynamically.
+                </p>
+            </div>
+            
+            <div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-400/20 to-teal-500/20 border border-emerald-500/30 flex items-center justify-center">
+                    <svg class="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                    </svg>
+                </div>
+                <h3 class="text-sm font-bold text-slate-200">Lightweight & Dependency-Free</h3>
+                <p class="text-xs text-muted-foreground/90 leading-relaxed">
+                    Designed to minimize heavy JS bundles. Using vanilla JavaScript with document-level event delegation (e.g. for Modals, Sheets, Accordions, and Tabs) keeping the interactive shell fast and responsive.
+                </p>
+            </div>
+        </div>
+
+        <!-- Custom Styling tokens -->
+        <div class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-250">Global HSL Tokens</h2>
+            <p class="text-xs text-muted-foreground">
+                The layout relies on standard Tailwind themes mapped onto raw HSL variables, allowing instant utility customization.
+            </p>
+            
+            <div class="border border-border bg-card/50 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5">Variable</th>
+                            <th class="pb-2.5">Raw HSL Mapping</th>
+                            <th class="pb-2.5">Render Example</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground font-mono text-[11px]">
+                        <tr>
+                            <td class="py-2 text-muted-foreground font-sans font-semibold">--background</td>
+                            <td class="py-2">224 71% 4%</td>
+                            <td class="py-2">
+                                <div class="w-4 h-4 rounded bg-[#030712] border border-border"></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-2 text-muted-foreground font-sans font-semibold">--primary</td>
+                            <td class="py-2">210 40% 98%</td>
+                            <td class="py-2">
+                                <div class="w-4 h-4 rounded bg-[#f8fafc]"></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-2 text-muted-foreground font-sans font-semibold">--border / --input</td>
+                            <td class="py-2">216 34% 17%</td>
+                            <td class="py-2">
+                                <div class="w-4 h-4 rounded bg-[#1e293b]"></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-2 text-muted-foreground font-sans font-semibold">--ring</td>
+                            <td class="py-2">216 12.2% 83.9%</td>
+                            <td class="py-2">
+                                <div class="w-4 h-4 rounded ring-2 ring-slate-400"></div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Architecture & Contract Philosophy -->
+        <div class="space-y-4 border-t border-border/60 pt-8">
+            <h2 class="text-lg font-bold text-slate-200">Understanding the JS Binding Architecture</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                Rather than attaching active event listeners to every individual DOM node, the design system utilizes <strong>document-level event delegation</strong> and <strong>global query selector hooks</strong>. This keeps page loads incredibly fast and handles dynamically rendered components automatically.
+            </p>
+            
+            <div class="rounded-2xl border border-indigo-500/20 bg-indigo-500/5 p-5 text-xs space-y-4">
+                <div>
+                    <span class="font-bold text-indigo-400 block mb-1">🔗 The Core Binding Contract</span>
+                    <p class="text-slate-400 leading-normal">
+                        To make components interactive, they must contain specific functional CSS classes or attributes (e.g., <code>.modal-dialog</code>, <code>[data-modal-target]</code>, <code>.custom-select</code>) that the Javascript file uses to query the DOM. If these functional hooks are missing or renamed, the interactivity will fail.
+                    </p>
+                </div>
+                
+                <div>
+                    <span class="font-bold text-indigo-400 block mb-1">🎨 What is Customizable vs. Fixed?</span>
+                    <ul class="list-disc pl-5 space-y-1.5 text-slate-400 leading-normal">
+                        <li>
+                            <strong class="text-slate-200">Fixed (Functional) Hooks:</strong> Standard semantic class names (like <code>.modal-dialog</code>, <code>.modal-content</code>, <code>.modal-backdrop</code>, <code>.modal-close</code>, <code>.select-trigger</code>, and <code>.select-item</code>) are required structure hooks. These must remain unchanged because our JavaScript code expects them to animate opacity, visibility, translation transform stages, and handle keydown events.
+                        </li>
+                        <li>
+                            <strong class="text-slate-200">Customizable (Styling) Rules:</strong> Any Tailwind visual classes (like colors e.g. <code>bg-slate-900</code>, padding/margin <code>p-6 mt-2</code>, border-radius <code>rounded-3xl</code>, drop shadows <code>shadow-xl</code>, borders <code>border-border</code>, and custom fonts) can be modified, replaced, or completely restyled. As long as you maintain the core HTML nesting hierarchy and functional selector names, the component will work perfectly.
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}

templates/components/inputs.html

@@ -0,0 +1,221 @@
+{% extends "base.html" %}
+
+{% block title %}Form Fields & Select - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Forms & Inputs</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Form Fields & Select</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Standard text inputs, passwords, multi-line textareas, and custom styled select dropdown elements overdrawn by vector SVG chevron arrows.
+            </p>
+        </div>
+
+        <!-- Section Fields -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Form Inputs & Select Menu Showcase</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'input-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'input-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="input-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
+                    <!-- Text field -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-muted-foreground">Username Input</label>
+                        <input type="text" placeholder="e.g. dev_alice" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
+                    </div>
+                    
+                    <!-- Password field -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-muted-foreground">Security Password</label>
+                        <input type="password" placeholder="••••••••" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
+                    </div>
+
+                    <!-- Textarea -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-muted-foreground">Task Details</label>
+                        <textarea rows="3" placeholder="Provide a detailed description of the task requirements..." class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"></textarea>
+                    </div>
+                    
+                    <!-- Custom Styled Select Dropdown -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-muted-foreground">Developer Specialization</label>
+                        <div class="custom-select relative inline-block w-full">
+                            <input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer">
+                            <button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary/50 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
+                                <span class="select-text">Senior Rust Engineer</span>
+                                <svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                                    <polyline points="6 9 12 15 18 9"/>
+                                </svg>
+                            </button>
+                            <div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden animate-in fade-in slide-in-from-top-2 duration-150">
+                                <div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5">
+                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Senior Rust Engineer">Senior Rust Engineer</button>
+                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Frontend Architect">Frontend Architect</button>
+                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="DevOps Lead">DevOps Lead</button>
+                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Database Administrator">Database Administrator</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="input-code" class="wiki-pane hidden">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Styled Text Input --&gt;
+&lt;div class="space-y-2"&gt;
+    &lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Username Input&lt;/label&gt;
+    &lt;input type="text" placeholder="e.g. dev_alice"
+           class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200"&gt;
+&lt;/div&gt;
+
+&lt;!-- Styled Textarea --&gt;
+&lt;div class="space-y-2"&gt;
+    &lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Task Details&lt;/label&gt;
+    &lt;textarea rows="3" placeholder="Provide a detailed description..."
+              class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"&gt;&lt;/textarea&gt;
+&lt;/div&gt;
+
+&lt;!-- Custom Styled Select Dropdown (Chevron and Popover managed globally in components.js) --&gt;
+&lt;div class="space-y-2"&gt;
+    &lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Developer Specialization&lt;/label&gt;
+    &lt;div class="custom-select relative inline-block w-full"&gt;
+        &lt;!-- Hidden input holds the actual value for form submissions --&gt;
+        &lt;input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer"&gt;
+        
+        &lt;!-- Toggle trigger button --&gt;
+        &lt;button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
+            &lt;span class="select-text"&gt;Senior Rust Engineer&lt;/span&gt;
+            &lt;svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;
+                &lt;polyline points="6 9 12 15 18 9"/&gt;
+            &lt;/svg&gt;
+        &lt;/button&gt;
+        
+        &lt;!-- Options Popover --&gt;
+        &lt;div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
+            &lt;div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5"&gt;
+                &lt;button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold text-slate-200 text-left" data-value="Senior Rust Engineer"&gt;Senior Rust Engineer&lt;/button&gt;
+                &lt;button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground text-slate-200 text-left" data-value="Frontend Architect"&gt;Frontend Architect&lt;/button&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Global JS Bindings Documentation -->
+        <section class="space-y-4 border-t border-border/60 pt-6">
+            <h2 class="text-lg font-bold text-slate-200">How the Global Custom Select JS Works</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                The global script <code>components.js</code> monitors specific class names to run the premium custom select elements. Ensure your markup uses these selectors to integrate selection, triggers, and keyboard arrow controls:
+            </p>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/4">Selector / Class</th>
+                            <th class="pb-2.5 w-1/4">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.custom-select</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Outer wrapper for the entire select component. Scopes and isolates input values and popovers.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-value</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to the <code>&lt;input type="hidden"&gt;</code> that stores the raw value submitted to forms.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-trigger</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The visible button that user clicks. Toggles popover visibility and chevron rotation on click.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-text</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Inner text element inside trigger button that dynamically changes its text content to match the selected option.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-chevron</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Arrow SVG icon. Rotates 180 degrees (adds <code>rotate-180</code>) when the menu opens.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-popover</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Floating list container. Starts with the class <code>hidden</code>. Positioned absolutely.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-item</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to choices inside popover (usually buttons). Must have <code>data-value="..."</code> containing the raw option value.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
+                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
+                <p class="text-slate-400 leading-normal">
+                    You can customize the button trigger layout (paddings, chevrons, fonts, sizing), borders, shadows, options listing alignment, and checkmark icons. Ensure you preserve the classes <code>.custom-select</code>, <code>.select-value</code>, <code>.select-trigger</code>, <code>.select-popover</code>, and <code>.select-item</code> with its <code>data-value</code> attribute so that mouse selections and keyboard arrows function correctly.
+                </p>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/modals.html

@@ -0,0 +1,169 @@
+{% extends "base.html" %}
+
+{% block title %}Dialog Modals - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Overlays</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Dialog Modals</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Overlay window popups centering inside the viewport with scale animations, hardware blur filters, and document-level listeners for escape-key/backdrop dismissals.
+            </p>
+        </div>
+
+        <!-- Section Modals -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Modal Showcase & Integration</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'modal-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'modal-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="modal-sandbox" class="wiki-pane py-2">
+                    <button data-modal-target="wiki-demo-modal" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
+                        Open Modal Dialog
+                    </button>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="modal-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Trigger Button (points to modal element ID) --&gt;
+&lt;button data-modal-target="my-modal-id" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-xl"&gt;
+    Open Modal
+&lt;/button&gt;
+
+&lt;!-- Modal Overlay Element --&gt;
+&lt;div id="my-modal-id" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true"&gt;
+    &lt;!-- Backdrop shadow with blur --&gt;
+    &lt;div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"&gt;&lt;/div&gt;
+    
+    &lt;!-- Modal Panel with scale / opacity transition --&gt;
+    &lt;div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl"&gt;
+        &lt;h3 class="text-sm font-bold text-slate-100"&gt;Confirmation Title&lt;/h3&gt;
+        &lt;p class="text-xs text-muted-foreground mt-2 leading-relaxed"&gt;Are you sure you want to proceed?&lt;/p&gt;
+        
+        &lt;!-- Close triggers require class 'modal-close' --&gt;
+        &lt;button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border text-slate-200 text-xs font-semibold"&gt;
+            Cancel
+        &lt;/button&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Global JS Bindings Documentation -->
+        <section class="space-y-4 border-t border-border/60 pt-6">
+            <h2 class="text-lg font-bold text-slate-200">How the Global Modal JS Works</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                The global script <code>components.js</code> runs automatically on page load and monitors specific attributes and classes. Here is what makes the modal operational:
+            </p>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/4">Selector / Class</th>
+                            <th class="pb-2.5 w-1/4">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">[data-modal-target]</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to buttons or triggers. The value must match the ID of the modal dialog (e.g., <code>data-modal-target="my-modal"</code>). Clicking it triggers <code>openModal("my-modal")</code>.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-dialog</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The outer wrapper container. Starts with the class <code>hidden</code>. The JS removes/adds <code>hidden</code> to show/hide the popup.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-content</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The inner dialog panel card. The JS looks for this class to toggle transitions (adds <code>scale-100 opacity-100</code> on show; resets to <code>scale-95 opacity-0</code> on hide).
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-backdrop</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The dark blur overlay. The JS toggles its opacity and registers clicks on it to automatically close the modal.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-close</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to any close button (e.g., "Cancel", "Confirm", or an "X" icon). Clicking any element containing this class triggers modal closure.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
+                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
+                <p class="text-slate-400 leading-normal">
+                    You can customize the styling, colors, layout, and sizing of the <code>.modal-content</code> card freely. You must preserve the classes listed above so the Javascript code can target them and apply animations correctly.
+                </p>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<!-- Interactive Modal Sandbox Element -->
+<div id="wiki-demo-modal" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
+    <div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
+    <div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
+        <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
+            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+        </div>
+        <h3 class="text-sm font-bold text-slate-100">Wiki Sandbox Modal</h3>
+        <p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
+        <button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border hover:bg-secondary transition text-xs font-semibold text-slate-200">Dismiss Modal</button>
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/scrollbars.html

@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+
+{% block title %}Custom Scrollbars - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Styles</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Custom Scrollbars</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Thin custom scrollbars replacing chunky default native OS scrollbars using modern cross-browser CSS rules.
+            </p>
+        </div>
+
+        <!-- Section Scrollbars -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Scrollbar Customization Showcase</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'scroll-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'scroll-code')">CSS Rules</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="scroll-sandbox" class="wiki-pane max-w-sm py-2">
+                    <div class="max-h-28 overflow-y-auto pr-1.5 border border-border rounded-xl p-2 bg-card/50 space-y-1.5">
+                        <div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 1</div>
+                        <div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 2</div>
+                        <div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 3</div>
+                        <div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 4</div>
+                        <div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 5</div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="scroll-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy CSS Rules
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>/* Custom Webkit scrollbar rules (applied in input.css) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; 
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border)); 
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground)); 
+}</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/sheets.html

@@ -0,0 +1,180 @@
+{% extends "base.html" %}
+
+{% block title %}Slide-over Drawers (Sheets) - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Overlays</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Slide-over Drawers (Sheets)</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Right-anchored slide-out sheets designed for detail inspections, metadata lists, settings panels, and form workflows.
+            </p>
+        </div>
+
+        <!-- Section Sheets -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Drawer Showcase & Integration</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'sheet-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'sheet-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="sheet-sandbox" class="wiki-pane py-2">
+                    <button data-sheet-target="wiki-demo-sheet" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
+                        Open Right Drawer
+                    </button>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="sheet-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Trigger Button (points to sheet element ID) --&gt;
+&lt;button data-sheet-target="my-sheet-id" class="px-4 py-2 bg-indigo-650 text-white text-xs font-bold rounded-xl"&gt;
+    Open Drawer
+&lt;/button&gt;
+
+&lt;!-- Slide Drawer Sheet Element --&gt;
+&lt;div id="my-sheet-id" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true"&gt;
+    &lt;!-- Backdrop --&gt;
+    &lt;div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300"&gt;&lt;/div&gt;
+    
+    &lt;div class="absolute inset-y-0 right-0 max-w-full flex pl-10"&gt;
+        &lt;!-- Panel with transition translate-x-full --&gt;
+        &lt;div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 bg-popover/95 border-l border-border p-6 flex flex-col justify-between"&gt;
+            &lt;div class="space-y-4"&gt;
+                &lt;div class="flex items-center justify-between pb-3 border-b border-border"&gt;
+                    &lt;h3 class="text-sm font-bold text-slate-100"&gt;Settings&lt;/h3&gt;
+                    &lt;button class="sheet-close text-slate-500 hover:text-white"&gt;
+                        &lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;&lt;path d="M6 18L18 6M6 6l12 12"/&gt;&lt;/svg&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+                &lt;p class="text-xs text-muted-foreground"&gt;Drawer Body Content&lt;/p&gt;
+            &lt;/div&gt;
+            &lt;button class="sheet-close w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-xl"&gt;
+                Save
+            &lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Global JS Bindings Documentation -->
+        <section class="space-y-4 border-t border-border/60 pt-6">
+            <h2 class="text-lg font-bold text-slate-200">How the Global Sheet JS Works</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                The global script <code>components.js</code> monitors specific attributes and classes on page load. Here is the operational contract for sheets:
+            </p>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/4">Selector / Class</th>
+                            <th class="pb-2.5 w-1/4">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">[data-sheet-target]</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to buttons or triggers. The value must match the ID of the sheet container (e.g., <code>data-sheet-target="my-sheet"</code>). Clicking it triggers <code>openSheet("my-sheet")</code>.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-dialog</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The outer wrapper sheet container. Starts with the class <code>hidden</code>. Toggled by the script.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-content</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The inner slide-over panel card. The JS toggles transition translation classes (removes <code>translate-x-full</code> and adds <code>translate-x-0</code> on show).
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-backdrop</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                The backdrop overlay. The JS toggles its opacity and registers clicks on it to automatically close the sheet.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-close</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to close trigger buttons. Clicking any element with this class closes the sheet.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
+                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
+                <p class="text-slate-400 leading-normal">
+                    You can freely style the placement, width, colors, borders, and contents of the <code>.sheet-content</code> slide-out panel. The functional slide classes (<code>translate-x-full</code> and <code>translate-x-0</code>) and semantic structure class names must be preserved so the script can locate and slide the sheets dynamically.
+                </p>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<!-- Interactive Sheet Sandbox Element -->
+<div id="wiki-demo-sheet" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
+    <div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
+    <div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
+        <div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 ease-in-out border-l border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col justify-between">
+            <div class="space-y-4">
+                <div class="flex items-center justify-between pb-3 border-b border-border">
+                    <h3 class="text-sm font-bold text-slate-100">Drawer Panel Properties</h3>
+                    <button class="sheet-close text-slate-500 hover:text-white rounded-lg p-1.5 hover:bg-secondary transition">
+                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+                    </button>
+                </div>
+                <p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
+            </div>
+            <button class="sheet-close w-full py-2.5 rounded-xl bg-indigo-650 hover:bg-indigo-600 transition text-xs font-bold text-white shadow-lg shadow-indigo-650/10">Save Properties</button>
+        </div>
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/sidebar.html

@@ -0,0 +1,27 @@
+<aside class="lg:w-64 shrink-0">
+    <div class="sticky top-24 space-y-1.5 p-4 rounded-3xl border border-border bg-card/50 backdrop-blur-xl" id="wiki-sidebar">
+        <span class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Wiki Navigation</span>
+        <a href="/components" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components">Introduction</a>
+        <div class="h-px bg-secondary my-1 mx-2"></div>
+        <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Actions</span>
+        <a href="/components/buttons" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/buttons">Buttons</a>
+        
+        <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Forms & Inputs</span>
+        <a href="/components/inputs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/inputs">Form Fields & Select</a>
+        <a href="/components/date-time" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/date-time">Date & Time Pickers</a>
+        <a href="/components/combobox" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/combobox">Autocomplete (Combobox)</a>
+        <a href="/components/toggles" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/toggles">Switches & Checkboxes</a>
+
+        <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Overlays</span>
+        <a href="/components/modals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/modals">Dialog Modals</a>
+        <a href="/components/sheets" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/sheets">Slide-over Drawers</a>
+
+        <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
+        <a href="/components/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/tabs-accordion">Tabs & Accordions</a>
+        <a href="/components/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/scrollbars">Custom Scrollbars</a>
+
+        <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
+        <a href="/components/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/visuals">Avatars & Badges</a>
+        <a href="/components/feedback" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/feedback">Toasts & Alerts</a>
+    </div>
+</aside>

templates/components/tabs_accordion.html

@@ -0,0 +1,238 @@
+{% extends "base.html" %}
+
+{% block title %}Tabs & Accordions - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Layout & Navigation</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tabs & Accordions</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Horizontal tab groups and collapsible vertical headers with animated rotation chevrons, powered by lightweight document-level event delegation.
+            </p>
+        </div>
+
+        <!-- Section Tabs/Accordion -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Interactive Navigation Elements</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'tabs-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'tabs-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="tabs-sandbox" class="wiki-pane space-y-6 max-w-md py-2">
+                    <!-- Tabs Showcase -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Switch Tabs</span>
+                        <div class="flex border-b border-border">
+                            <button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-1" class="px-4 py-2 text-xs font-semibold border-b-2 border-sky-500 text-sky-400 focus:outline-none">Overview</button>
+                            <button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-2" class="px-4 py-2 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-slate-250 focus:outline-none">Config Settings</button>
+                        </div>
+                        <div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-[5rem]">
+                            <div id="wiki-pane-1" data-tab-content-group="wiki-tabs">
+                                Overview parameters content pane. You can place statistics, graphs, or summary tables here.
+                            </div>
+                            <div id="wiki-pane-2" data-tab-content-group="wiki-tabs" class="hidden">
+                                Settings updates pane. Configuration toggles, environment variables, or webhook URLs live here.
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Accordion Showcase -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Accordion Collapsible</span>
+                        <div class="space-y-2">
+                            <div class="accordion-item border border-border rounded-xl overflow-hidden bg-card/30">
+                                <button type="button" class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50 transition focus:outline-none">
+                                    <span>Is this library dependency-free?</span>
+                                    <svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+                                </button>
+                                <div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border leading-relaxed">
+                                    Yes! The template does not rely on Alpine.js or React. JavaScript toggles run via vanilla click listeners listening on specific class selectors.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="tabs-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- 1. Tabs Layout Markup --&gt;
+&lt;div class="space-y-2"&gt;
+    &lt;!-- Tabs Trigger Header --&gt;
+    &lt;div class="flex border-b border-border"&gt;
+        &lt;!-- Include class 'border-sky-500 text-sky-400' on the active trigger --&gt;
+        &lt;button data-tab-group="my-tabs-group" data-tab-target="my-pane-1" class="px-4 py-2 border-b-2 border-sky-500 text-sky-400 text-xs font-semibold"&gt;
+            Tab 1
+        &lt;/button&gt;
+        &lt;button data-tab-group="my-tabs-group" data-tab-target="my-pane-2" class="px-4 py-2 border-b-2 border-transparent text-muted-foreground hover:text-slate-200 text-xs font-semibold"&gt;
+            Tab 2
+        &lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;!-- Content Panes --&gt;
+    &lt;div class="p-4 bg-card/50 rounded-xl border border-border text-xs"&gt;
+        &lt;div id="my-pane-1" data-tab-content-group="my-tabs-group"&gt;
+            Overview content...
+        &lt;/div&gt;
+        &lt;div id="my-pane-2" data-tab-content-group="my-tabs-group" class="hidden"&gt;
+            Settings content...
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!-- 2. Accordion Markup --&gt;
+&lt;div class="accordion-item border border-border rounded-xl bg-card/30 overflow-hidden"&gt;
+    &lt;!-- Accordion Button Trigger --&gt;
+    &lt;button class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50"&gt;
+        &lt;span&gt;Section Title&lt;/span&gt;
+        &lt;svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;
+            &lt;polyline points="6 9 12 15 18 9"/&gt;
+        &lt;/svg&gt;
+    &lt;/button&gt;
+    
+    &lt;!-- Content Panel (Hidden by default) --&gt;
+    &lt;div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border"&gt;
+        Collapsible description content.
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Global JS Bindings Documentation -->
+        <section class="space-y-6 border-t border-border/60 pt-6">
+            <div>
+                <h2 class="text-lg font-bold text-slate-200">How the Global Tabs JS Works</h2>
+                <p class="text-xs text-muted-foreground leading-relaxed mt-1">
+                    The global script <code>components.js</code> handles click switches for tabs via specific dataset variables. Here is the contract:
+                </p>
+            </div>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/3">Attribute</th>
+                            <th class="pb-2.5 w-1/6">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-group</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to buttons and triggers. Isolates tab groups on the same page. Tab buttons in the same group toggle together (e.g., <code>data-tab-group="group1"</code>).
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-target</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
+                            <td class="py-3 text-slate-400">
+                                Specifies the ID of the content element pane that should be revealed when this tab is clicked (e.g., <code>data-tab-target="my-pane-1"</code>).
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-content-group</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
+                            <td class="py-3 text-slate-400">
+                                Applied to the content elements. Must match the <code>data-tab-group</code> string. Click triggers hide all content elements in this group and show the target.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Accordion JS Works</h2>
+                <p class="text-xs text-muted-foreground leading-relaxed mt-1">
+                    Accordions are toggled through click delegation looking for the following class tree:
+                </p>
+            </div>
+            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
+                <table class="w-full border-collapse text-left text-xs">
+                    <thead>
+                        <tr class="border-b border-border text-muted-foreground font-bold">
+                            <th class="pb-2.5 w-1/3">Selector / Class</th>
+                            <th class="pb-2.5 w-1/6">Type</th>
+                            <th class="pb-2.5">Behavior & Purpose</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-item</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Surrounds the single collapsible item container (trigger header + content block).
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-trigger</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Clickable header button. Toggles display classes on the sibling content element.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-content</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Contained collapsible item body text. Starts with the class <code>hidden</code>. Toggled by the script.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-chevron</td>
+                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
+                            <td class="py-3 text-slate-400">
+                                Optional vector arrow icon inside trigger. The JS applies <code>rotate-180</code> animation classes on show.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
+                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
+                <p class="text-slate-400 leading-normal">
+                    For <strong>Tabs</strong>, you can style the tab list buttons (direction, active borders, colors) and content layout freely. Just ensure <code>data-tab-group</code> matches between triggers and active panes, and <code>data-tab-target</code> matches the pane ID.
+                    For <strong>Accordions</strong>, you can design the headers, chevron SVGs, background panels, and borders. You must maintain the <code>.accordion-item</code>, <code>.accordion-trigger</code>, and <code>.accordion-content</code> class selectors so the script can toggle the collapsed state.
+                </p>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/toggles.html

@@ -0,0 +1,124 @@
+{% extends "base.html" %}
+
+{% block title %}Switches & Checkboxes - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-405">Toggles</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Switches & Checkboxes</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Premium animated toggle elements, range sliders, and custom styled checkboxes that mask standard hidden inputs with custom animations.
+            </p>
+        </div>
+
+        <!-- Section Toggles -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Interactive Toggles & Checkbox Demos</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'toggle-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'toggle-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="toggle-sandbox" class="wiki-pane space-y-5 max-w-xs py-2">
+                    <!-- Toggle Switch -->
+                    <div class="flex items-center justify-between">
+                        <span class="text-xs text-muted-foreground font-medium">Toggle Status</span>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" class="sr-only peer">
+                            <div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
+                        </label>
+                    </div>
+
+                    <!-- Custom Checkbox -->
+                    <div class="flex flex-col gap-3">
+                        <label class="flex items-center gap-3 cursor-pointer group">
+                            <input type="checkbox" class="sr-only peer" checked>
+                            <div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&_svg]:opacity-100 transition">
+                                <svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+                            </div>
+                            <span class="text-xs text-muted-foreground peer-checked:text-slate-200">Enable Email notifications</span>
+                        </label>
+                    </div>
+
+                    <!-- Range Slider -->
+                    <div class="space-y-2">
+                        <label class="block text-xs font-semibold text-muted-foreground">Range Slider (0-100%)</label>
+                        <div class="flex items-center gap-4">
+                            <input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'">
+                            <span class="text-xs font-mono font-bold text-sky-400 w-10 text-right">50%</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="toggle-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- 1. Toggle Switch Variant --&gt;
+&lt;label class="relative inline-flex items-center cursor-pointer"&gt;
+    &lt;!-- sr-only: visually hides native input; peer: lets siblings styled with 'peer-checked:' react to its state --&gt;
+    &lt;input type="checkbox" class="sr-only peer"&gt;
+    &lt;!-- bg-secondary: base slider bg; peer-checked:bg-indigo-600: checked slider bg;
+         after: absolute round knob dot; peer-checked:after:translate-x-4: moves knob when checked --&gt;
+    &lt;div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"&gt;&lt;/div&gt;
+&lt;/label&gt;
+
+&lt;!-- 2. Custom Checkbox --&gt;
+&lt;label class="flex items-center gap-3 cursor-pointer group"&gt;
+    &lt;!-- sr-only peer hides checkbox input globally but exposes its state --&gt;
+    &lt;input type="checkbox" class="sr-only peer"&gt;
+    &lt;!-- peer-checked:[&amp;_svg]:opacity-100: uses a descendant selector to show the checkmark when checked --&gt;
+    &lt;div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&amp;_svg]:opacity-100 transition"&gt;
+        &lt;svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"&gt;
+            &lt;path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/&gt;
+        &lt;/svg&gt;
+    &lt;/div&gt;
+    &lt;span class="text-xs text-muted-foreground peer-checked:text-slate-200 select-none"&gt;Label Option&lt;/span&gt;
+&lt;/label&gt;
+
+&lt;!-- 3. Custom Range Slider (accent-indigo-600 styles input thumb in modern browsers) --&gt;
+&lt;div class="flex items-center gap-4"&gt;
+    &lt;!-- oninput: updates text element sibling content to display slider value --&gt;
+    &lt;input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'"&gt;
+    &lt;span class="text-xs font-mono font-bold text-sky-400 w-10 text-right"&gt;50%&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/components/visuals.html

@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+
+{% block title %}Avatars & Badges - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "components/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Visuals</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Avatars & Badges</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Circular user avatars featuring fallback initials text, combined with status badges in sky, emerald, amber, and rose variants.
+            </p>
+        </div>
+
+        <!-- Section Visuals -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Avatars & Badges Showcase</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'visual-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'visual-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="visual-sandbox" class="wiki-pane space-y-4 py-2">
+                    <!-- Avatars -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Fallback Avatars</span>
+                        <div class="flex items-center gap-3">
+                            <div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none">AV</div>
+                            <div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-emerald-400 leading-none">BC</div>
+                            <div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-indigo-400 leading-none">JD</div>
+                            <span class="text-xs text-muted-foreground/90">Textual initials fallback inside boundaries</span>
+                        </div>
+                    </div>
+
+                    <!-- Badges -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Status Badges</span>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none">In Progress</span>
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none">Completed</span>
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none">Reviewing</span>
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none">Blocked</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="visual-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Initials Fallback Avatar --&gt;
+&lt;div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none"&gt;AV&lt;/div&gt;
+
+&lt;!-- Status Badges --&gt;
+&lt;!-- Info / Sky --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none"&gt;In Progress&lt;/span&gt;
+
+&lt;!-- Success / Emerald --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none"&gt;Completed&lt;/span&gt;
+
+&lt;!-- Warning / Amber --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none"&gt;Reviewing&lt;/span&gt;
+
+&lt;!-- Destructive / Rose --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none"&gt;Blocked&lt;/span&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}

templates/developers/edit.html

@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+
+{% block title %}Edit Developer - Stick{% endblock %}
+
+{% block content %}
+<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-lg mx-auto w-full">
+    <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-400 via-blue-500 to-indigo-600"></div>
+        
+        <div class="text-center mb-8">
+            <h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Edit Developer</h2>
+            <p class="mt-2 text-sm text-slate-400">Update the developer's profile and skills</p>
+        </div>
+
+        <form action="/developers/{{ developer.id.unwrap().to_hex() }}/edit" method="post" class="space-y-5">
+            <div>
+                <label for="name" class="block text-sm font-medium text-slate-400 mb-1.5">Name</label>
+                <input id="name" name="name" type="text" value="{{ developer.name }}" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
+            </div>
+            
+            <div>
+                <label for="email" class="block text-sm font-medium text-slate-400 mb-1.5">Email</label>
+                <input id="email" name="email" type="email" value="{{ developer.email }}" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
+            </div>
+
+            <div>
+                <label for="skills" class="block text-sm font-medium text-slate-400 mb-1.5">Skills (Comma-separated)</label>
+                <input id="skills" name="skills" type="text" value='{{ developer.skills.join(", ") }}' class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
+            </div>
+
+            <div class="flex gap-4 pt-2">
+                <a href="/developers" class="flex-1 py-3 px-4 text-center text-sm font-semibold rounded-xl text-slate-300 bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
+                    Cancel
+                </a>
+                <button type="submit" class="flex-1 py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-lg shadow-sky-500/10">
+                    Save Changes
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}

templates/developers/list.html

@@ -0,0 +1,110 @@
+{% extends "base.html" %}
+
+{% block title %}Developers - Stick{% endblock %}
+
+{% block content %}
+<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
+    
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-6 border-b border-slate-900 gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Developers</h1>
+            <p class="text-slate-400 text-sm mt-1">Manage developers to assign them workflow tasks</p>
+        </div>
+        <div class="flex items-center gap-3">
+            <span class="text-xs font-semibold px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-300">
+                Total Developers: {{ developers.len() }}
+            </span>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        
+        <!-- Add Developer Form -->
+        <div class="lg:col-span-1">
+            <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-6 shadow-xl sticky top-24">
+                <h3 class="text-lg font-bold text-slate-100 mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-sky-400">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+                    </svg>
+                    Add Developer
+                </h3>
+                <form action="/developers" method="post" class="space-y-4">
+                    <div>
+                        <label for="name" class="block text-xs font-semibold text-slate-400 mb-1.5">Name</label>
+                        <input id="name" name="name" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="e.g. Alice Smith">
+                    </div>
+                    
+                    <div>
+                        <label for="email" class="block text-xs font-semibold text-slate-400 mb-1.5">Email</label>
+                        <input id="email" name="email" type="email" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="e.g. alice@company.com">
+                    </div>
+
+                    <div>
+                        <label for="skills" class="block text-xs font-semibold text-slate-400 mb-1.5">Skills (Comma-separated)</label>
+                        <input id="skills" name="skills" type="text" class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="e.g. Rust, Axum, MongoDB">
+                    </div>
+
+                    <button type="submit" class="w-full py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10">
+                        Create Developer
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Listing -->
+        <div class="lg:col-span-2 space-y-4">
+            {% if developers.is_empty() %}
+                <div class="bg-slate-900/20 border border-dashed border-slate-800 rounded-3xl p-12 text-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-slate-600 mx-auto mb-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                    </svg>
+                    <h3 class="text-base font-bold text-slate-350 mb-1">No developers added</h3>
+                    <p class="text-sm text-slate-500">Add developers using the form on the left to start assigning tasks.</p>
+                </div>
+            {% else %}
+                {% for dev in developers %}
+                    <div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start justify-between gap-4 transition duration-300 group">
+                        <div class="space-y-2">
+                            <h4 class="text-base font-bold text-slate-200">{{ dev.name }}</h4>
+                            <p class="text-xs text-slate-400 flex items-center gap-1.5">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5 text-slate-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+                                </svg>
+                                {{ dev.email }}
+                            </p>
+                            
+                            <!-- Skills -->
+                            {% if !dev.skills.is_empty() %}
+                                <div class="flex flex-wrap gap-1.5 mt-2">
+                                    {% for skill in dev.skills %}
+                                        <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-slate-900 border border-slate-800 text-sky-400">
+                                            {{ skill }}
+                                        </span>
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <!-- Action Buttons -->
+                        <div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                            <a href="/developers/{{ dev.id.unwrap().to_hex() }}/edit" class="p-2 rounded-lg bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 text-sky-400 transition" title="Edit Developer">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.83 20.013a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                </svg>
+                            </a>
+                            <form action="/developers/{{ dev.id.unwrap().to_hex() }}/delete" method="post" class="inline">
+                                <button type="submit" class="p-2 rounded-lg bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/20 text-rose-400 transition" title="Delete Developer">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.34 9m-4.72 0-.34-9m9.03-3.03-.58 17.5A2.25 2.25 0 0 1 17.11 21H6.9a2.25 2.25 0 0 1-2.18-2.13L4.1 6.57m3.07-7.94h14.98m-14.98 0A1.75 1.75 0 0 1 7.25 1.5H16.75A1.75 1.75 0 0 1 18 3m-12 0h12" />
+                                    </svg>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/developers/search_results.html

@@ -0,0 +1,15 @@
+{% if developers.is_empty() %}
+    <div class="px-3 py-4 text-xs text-muted-foreground text-center">No developers found matching this query</div>
+{% else %}
+    <div class="max-h-60 overflow-y-auto space-y-0.5">
+        {% for dev in developers %}
+            <div tabindex="0"
+                 data-id="{{ dev.id.unwrap().to_hex() }}"
+                 data-name="{{ dev.name }}"
+                 class="combobox-item flex items-center justify-between w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground text-slate-200 cursor-pointer select-none focus:bg-accent focus:text-accent-foreground focus:outline-none transition-colors group">
+                <span class="font-medium text-slate-200 group-hover:text-accent-foreground">{{ dev.name }}</span>
+                <span class="text-[10px] text-muted-foreground/70 group-hover:text-accent-foreground/70">Select</span>
+            </div>
+        {% endfor %}
+    </div>
+{% endif %}

templates/main_view/index.html

@@ -0,0 +1,75 @@
+{% extends "base.html" %}
+
+{% block title %}Stick - Use-Case Oriented Rust Web Template{% endblock %}
+
+{% block content %}
+<div class="grow flex items-center justify-center py-20 px-4">
+    <div class="max-w-4xl w-full text-center">
+        <!-- Badge -->
+        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-sky-500/10 text-sky-400 border border-sky-500/20 mb-6">
+            <span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
+            Axum 0.8 + MongoDB v3 + Askama 0.16
+        </span>
+        
+        <!-- Hero Title -->
+        <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 bg-linear-to-r from-slate-100 via-slate-200 to-slate-400 bg-clip-text text-transparent leading-none">
+            Clean, Use-Case Centric <br class="hidden sm:inline">
+            <span class="bg-linear-to-r from-sky-400 via-blue-500 to-indigo-500 bg-clip-text">Rust Web Development</span>
+        </h1>
+        
+        <!-- Subtitle -->
+        <p class="text-lg text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+            A production-ready template organized around vertical features. Auth, databases, and domain logic are grouped together by use-case for high maintainability.
+        </p>
+
+        <!-- CTA Buttons -->
+        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
+            {% if authenticated %}
+                <a href="/tasks" class="px-8 py-4 rounded-2xl bg-linear-to-r from-sky-500 via-blue-600 to-indigo-600 hover:opacity-95 transition font-semibold text-white shadow-xl shadow-sky-500/10 hover:shadow-sky-500/20 scale-100 hover:scale-[1.02] transform duration-200">
+                    Go to Tasks Dashboard
+                </a>
+            {% else %}
+                <a href="/auth/register" class="px-8 py-4 rounded-2xl bg-linear-to-r from-sky-500 via-blue-600 to-indigo-600 hover:opacity-95 transition font-semibold text-white shadow-xl shadow-sky-500/10 hover:shadow-sky-500/20 scale-100 hover:scale-[1.02] transform duration-200">
+                    Get Started Free
+                </a>
+                <a href="/auth/login" class="px-8 py-4 rounded-2xl bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition font-semibold text-slate-200 scale-100 hover:scale-[1.02] transform duration-200">
+                    Sign In
+                </a>
+            {% endif %}
+        </div>
+
+        <!-- Features Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
+            <div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
+                <div class="w-10 h-10 rounded-lg bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400 mb-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+                    </svg>
+                </div>
+                <h3 class="text-base font-semibold text-slate-200 mb-2">Type-Safe Views</h3>
+                <p class="text-sm text-slate-400 leading-relaxed">Askama renders templates compiled directly into Rust code, catching missing arguments or syntax bugs at compile time.</p>
+            </div>
+            
+            <div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
+                <div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 mb-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+                    </svg>
+                </div>
+                <h3 class="text-base font-semibold text-slate-200 mb-2">Secure Authentication</h3>
+                <p class="text-sm text-slate-400 leading-relaxed">Built-in JWT session verification, cookie storage, bcrypt password hashing, and custom Axum 0.8 guard extractors.</p>
+            </div>
+
+            <div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
+                <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
+                    </svg>
+                </div>
+                <h3 class="text-base font-semibold text-slate-200 mb-2">MongoDB Integration</h3>
+                <p class="text-sm text-slate-400 leading-relaxed">Seamless BSON v3 mapping, index setups, and type-safe `chrono::DateTime` conversion via `serde_with` serialize helpers.</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/tasks/dashboard.html

@@ -0,0 +1,169 @@
+{% extends "base.html" %}
+
+{% block title %}Tasks Dashboard - Stick{% endblock %}
+
+{% block content %}
+<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
+    
+    <!-- Welcome Header -->
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-6 border-b border-slate-900 gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Your Tasks</h1>
+            <p class="text-slate-400 text-sm mt-1">Add and manage your workflow tasks</p>
+        </div>
+        <div class="flex items-center gap-3">
+            <span class="text-xs font-semibold px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-300">
+                Total Tasks: {{ tasks.len() }}
+            </span>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        
+        <!-- Add Task Form Container -->
+        <div class="lg:col-span-1">
+            <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-6 shadow-xl sticky top-24">
+                <h3 class="text-lg font-bold text-slate-100 mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-sky-400">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7-7H5" />
+                    </svg>
+                    New Task
+                </h3>
+                <form action="/tasks/create" method="post" class="space-y-4">
+                    <div>
+                        <label for="title" class="block text-xs font-semibold text-slate-400 mb-1.5">Title</label>
+                        <input id="title" name="title" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Task name">
+                    </div>
+                    
+                    <div>
+                        <label for="description" class="block text-xs font-semibold text-slate-400 mb-1.5">Description (Optional)</label>
+                        <textarea id="description" name="description" rows="3" class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Add some context..."></textarea>
+                    </div>
+
+                    <!-- Interactive Assignee Search -->
+                    <div class="autocomplete-combobox relative">
+                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Assignee (Optional)</label>
+                        
+                        <!-- Hidden input holding the actual developer ID to submit -->
+                        <input type="hidden" id="assignee-id" name="assignee_id" class="combobox-value">
+
+                        <div class="relative">
+                            <input type="text" 
+                                   id="assignee-search" 
+                                   name="q"
+                                   placeholder="Search developer..." 
+                                   autocomplete="off"
+                                   
+                                   hx-get="/developers/search" 
+                                   hx-trigger="input changed delay:250ms, search" 
+                                   hx-target="next .combobox-results" 
+                                   hx-indicator="next .combobox-indicator"
+                                   
+                                   class="combobox-input appearance-none rounded-xl relative block w-full pl-9 pr-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
+                            
+                            <!-- Search Icon & Loading Indicator -->
+                            <div class="absolute left-3 top-3 text-slate-500">
+                                <svg class="combobox-indicator htmx-indicator animate-spin h-4 w-4 text-sky-500 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                                </svg>
+                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                </svg>
+                            </div>
+                        </div>
+
+                        <!-- Search Results Dropdown Popover -->
+                        <div id="search-results" 
+                             class="combobox-results absolute z-10 w-full mt-1.5 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl overflow-hidden hidden">
+                        </div>
+                    </div>
+
+                    <button type="submit" class="w-full py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10">
+                        Create Task
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Tasks Listing -->
+        <div class="lg:col-span-2 space-y-4">
+            {% if tasks.is_empty() %}
+                <div class="bg-slate-900/20 border border-dashed border-slate-800 rounded-3xl p-12 text-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-slate-600 mx-auto mb-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.03 0 1.9.693 2.166 1.638m-7.3 8.35h.008v.008H10v-.008Zm0 3h.008v.008H10v-.008Zm0 3h.008v.008H10v-.008Z" />
+                    </svg>
+                    <h3 class="text-base font-bold text-slate-350 mb-1">No tasks yet</h3>
+                    <p class="text-sm text-slate-500">Your task board is clean. Use the form on the left to add your first task.</p>
+                </div>
+            {% else %}
+                {% for item in tasks %}
+                    <div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start gap-4 transition duration-300 {% if item.task.is_completed %} opacity-60 {% endif %} relative overflow-hidden group">
+                        
+                        <!-- Checkmark Indicator -->
+                        <div class="flex-shrink-0 mt-0.5">
+                            {% if item.task.is_completed %}
+                                <div class="w-5 h-5 rounded-full bg-emerald-500/20 border border-emerald-500/50 flex items-center justify-center text-emerald-400">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
+                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                            {% else %}
+                                <div class="w-5 h-5 rounded-full border border-slate-700"></div>
+                            {% endif %}
+                        </div>
+
+                        <!-- Task Text -->
+                        <div class="grow">
+                            <h4 class="text-sm font-semibold text-slate-200 {% if item.task.is_completed %} line-through text-slate-500 {% endif %}">
+                                {{ item.task.title }}
+                            </h4>
+                            {% if let Some(desc) = item.task.description %}
+                                {% if !desc.is_empty() %}
+                                    <p class="text-xs text-slate-400 mt-1 {% if item.task.is_completed %} line-through text-slate-500 {% endif %}">
+                                        {{ desc }}
+                                    </p>
+                                {% endif %}
+                            {% endif %}
+                            
+                            <div class="flex items-center flex-wrap gap-x-3 gap-y-1.5 mt-3 text-[10px] text-slate-500">
+                                <span>Created {{ item.task.created_at.format("%Y-%m-%d %H:%M") }}</span>
+                                {% if let Some(dev_name) = item.developer_name %}
+                                    <span class="w-1 h-1 rounded-full bg-slate-700"></span>
+                                    <span class="px-2 py-0.5 rounded-full bg-sky-950/40 text-sky-400 border border-sky-900/30 flex items-center gap-1 font-medium">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-2.5 h-2.5">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                                        </svg>
+                                        Assigned to: {{ dev_name }}
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </div>
+
+                        <!-- Action Buttons -->
+                        <div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                            {% if !item.task.is_completed %}
+                                <form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/complete" method="post" class="inline">
+                                    <button type="submit" class="p-2 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 text-emerald-400 transition" title="Mark Completed">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                        </svg>
+                                    </button>
+                                </form>
+                            {% endif %}
+                            <form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/delete" method="post" class="inline">
+                                <button type="submit" class="p-2 rounded-lg bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/20 text-rose-400 transition" title="Delete Task">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.34 9m-4.72 0-.34-9m9.03-3.03-.58 17.5A2.25 2.25 0 0 1 17.11 21H6.9a2.25 2.25 0 0 1-2.18-2.13L4.1 6.57m3.07-7.94h14.98m-14.98 0A1.75 1.75 0 0 1 7.25 1.5H16.75A1.75 1.75 0 0 1 18 3m-12 0h12" />
+                                    </svg>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{% endblock %}