@Route("/")
@Title("Welcome")
@Css("themes/default.css")
public class HomePage extends Page {

    @Override
    public Element render() {
        return main_().children(
            h1().text("Hello from JUX"),
            p().text("Built entirely in Java. No templates. No JS. No CSS files.")
        );
    }
}

@SpringBootApplication
@Css(value = "/css/styles.css", order = 1)
@Favicon(value = "/img/favicon.png", type = "image/png")
public class MyApp implements WebApplication {
    public static void main(String... args) {
        SpringApplication.run(MyApp.class, args);
    }
}

package com.example.pages;

import xss.it.jux.annotation.*;
import xss.it.jux.core.*;
import static xss.it.jux.core.Elements.*;

@Route("/")
@Title("Home")
public class HomePage extends Page {

    @Override
    public Element render() {
        return main_().children(
            h1().text("It works."),
            p().text("Your first JUX page.")
        );
    }
}

public class ProductCard extends Component {
    private final String name;
    private final String price;

    public ProductCard(String name, String price) {
        this.name = name;
        this.price = price;
    }

    @Override
    public Element render() {
        return article().cls("card").children(
            h3().text(name),
            span().cls("price").text(price)
        );
    }
}

@Route("/products/{id:long}")
@Title("Product")
public class ProductPage extends Page {

    @PathParam private long id;
    private final ProductService products;

    public ProductPage(ProductService products) {  // Spring injects this
        this.products = products;
    }

    @Override
    public PageMeta pageMeta() {
        var product = products.findById(id);
        return PageMeta.create()
            .title(product.getName())
            .ogImage(product.getImage())
            .htmlLang(locale().getLanguage());
    }

    @Override
    public Element render() {
        var product = products.findById(id);
        return main_().children(
            new ProductCard(product.getName(), product.getPrice()).render(),
            p().text(messages().getString("product.details"))
        );
    }
}

@Route("/about")
@Title("About Us")
public class AboutPage extends Page {

    @Override
    public Element render() {
        return new PageLayout("/about", messages(), aboutContent()).render();
    }

    private Element aboutContent() {
        return section().children(
            h1().text("About Us"),
            p().text("We build things with Java.")
        );
    }
}

public class PageLayout extends Component {
    private final String activePath;
    private final JuxMessages messages;
    private final Element content;

    public PageLayout(String activePath, JuxMessages messages, Element content) {
        this.activePath = activePath;
        this.messages = messages;
        this.content = content;
    }

    @Override
    public Element render() {
        return div().cls("page").children(
            skipNav("main-content", "Skip to main content"),
            new Navbar(activePath, messages).render(),
            main_().id("main-content").children(content),
            new Footer(messages).render()
        );
    }
}

@Route("/blog/{slug}")          // URL mapping with typed params
@Title("#{blog.title}")         // Page title (supports i18n keys)
@Css("pages/blog.css")          // CSS resources
@Js(value = "chart.js", defer = true)  // JS resources
@Meta(name = "robots", content = "index,follow")
@Layout(MainLayout.class)       // Wrapping layout component
@Localized                      // Auto locale-prefixed URLs
@Favicon("/favicon.ico")        // Favicon
@Canonical                      // SEO canonical URL

@PathParam private String slug;           // /blog/{slug}
@QueryParam(defaultValue = "1") int page; // ?page=2
@HeaderParam("Accept-Language") String lang;
@CookieParam("session-id") String session;
@SessionParam("cart") ShoppingCart cart;
@RequestContext JuxRequestContext ctx;     // Full request access
@LocaleParam Locale locale;               // Resolved locale

@JuxComponent(clientSide = true)  // Compiles to JS via TeaVM
@State private int count = 0;     // Reactive — triggers re-render
@On("click") void handle(...);    // DOM event binding
@OnMount void init();             // After hydration
@OnUnmount void cleanup();       // Before removal

public abstract class Component {
    public abstract Element render();  // Build the UI tree
}

public abstract class Page extends Component {
    public PageMeta pageMeta() { ... }     // Optional dynamic metadata

    // Built-in request access — no injection needed
    protected String pathParam(String name) { ... }
    protected String queryParam(String name) { ... }
    protected JuxMessages messages() { ... }
    protected Locale locale() { ... }
    protected String header(String name) { ... }
    protected String cookie(String name) { ... }
    protected <T> T session(String name) { ... }
    protected boolean isPost() { ... }
    protected String formParam(String name) { ... }
    protected void status(int code) { ... }
    protected void redirect(String url) { ... }
    // ... more
}

div().id("card").cls("card", "elevated")
    .style("background", "#fff")
    .aria("label", "Product card")
    .role("article")
    .children(
        h2().text("Product Name"),
        p().text("Description here"),
        a().attr("href", "/buy").text("Buy Now")
    )

import static xss.it.jux.core.Elements.*;

// Semantic structure
header(), nav(), main_(), aside(), footer(), section(), article()

// Headings
h1(), h2(), h3(), h4(), h5(), h6()

// Text
p(), a(), strong(), em(), small(), mark(), code(), pre(), blockquote()

// Lists
ul(), ol(), li(), dl(), dt(), dd()

// Tables
table(), thead(), tbody(), tfoot(), tr(), th(), td(), caption()

// Forms
form(), input(), textarea(), select(), option(), button(), label(), fieldset()

// Media
img(src, alt), imgDecorative(src), video(), audio(), canvas(), svg(), iframe()

// Accessibility helpers
skipNav(targetId, text)     // Skip-to-content link (WCAG 2.4.1)
srOnly(text)                // Screen-reader-only text
liveRegion("polite")        // ARIA live region for dynamic content

PageMeta.create()
    .title("Blog Post Title")
    .titleTemplate("%s | My Site")
    .description("Post excerpt for SEO")

    // OpenGraph
    .ogTitle("Title").ogImage("/img/cover.jpg").ogImageAlt("Cover photo")

    // Twitter Cards
    .twitterCard("summary_large_image").twitterSite("@myhandle")

    // Resources
    .css("vendor/prism.css", 50)
    .js("vendor/prism.js", 50)
    .removeCss("layout/sidebar.css")  // Remove layout CSS on this page

    // HTTP
    .status(404)
    .redirectTo("/new-url", 301)
    .header("X-Custom", "value")
    .cacheControl("public, max-age=3600")

    // HTML root
    .htmlLang("en").htmlDir("ltr")
    .htmlAttr("data-theme", "dark")
    .bodyClass("page-blog", "has-sidebar")

    // Structured data
    .jsonLd(articleSchemaJson)

    // Performance hints
    .preload("/fonts/Inter.woff2", "font")
    .preconnect("https://cdn.example.com")

    // Conditional
    .when(post.hasCode(), meta -> meta.css("prism.css").js("prism.js"))

JuxAccessibilityEngine engine = new JuxAccessibilityEngine();
List<A11yViolation> violations = engine.audit(elementTree);

// Each violation:
// severity: ERROR | WARNING | INFO
// wcagCriterion: "1.1.1"
// rule: "img-alt"
// message: "Image missing alt text"
// elementPath: "main > section:2 > img:1"
// suggestion: "Add alt attribute with descriptive text"

Element fixed = engine.autoFix(elementTree);
// Adds role="presentation" to decorative images
// Converts px font sizes to rem
// Adds aria-hidden to icon-only elements

@MessageBundle
public interface HomeMessages {
    @Message("Welcome to our site")
    String welcome();

    @Message("Hello, {0}")
    String greeting(String name);

    @Message("{0,choice,0#No items|1#1 item|1<{0} items}")
    String itemCount(int count);
}

@MessageBundle @MessageLocale("es")
public interface HomeMessagesEs extends HomeMessages {
    @Override @Message("Bienvenido a nuestro sitio")
    String welcome();

    @Override @Message("Hola, {0}")
    String greeting(String name);

    @Override @Message("{0,choice,0#Sin artículos|1#1 artículo|1<{0} artículos}")
    String itemCount(int count);
}

@Route("/")
@Localized
public class HomePage extends Page {

    @Override
    public Element render() {
        var m = messages();                         // Built into Page
        return div().children(
            h1().text(m.getString("hero.title")),
            p().text(m.getString("greeting", "World")),
            p().text(m.getString("item.count", 5))  // "5 items" / "5 artículos"
        );
    }
}

var m = messages();
m.formatDate(LocalDate.now())      // "Feb 7, 2026" / "7 feb 2026"
m.formatCurrency(29.99, "USD")     // "$29.99" / "29,99 $"
m.formatNumber(1250.5, 2)          // "1,250.50" / "1.250,50"
m.isRtl()                          // true for Arabic, Hebrew, Farsi
m.currentLocale()                  // Locale("es")
m.availableLocales()               // [en, es, fr, ...]

// Static page with caching
@Route(value = "/about", cacheTtl = 3600)
@Title("About Us")

// Typed path parameters
@Route("/users/{id:long}")
@PathParam private long id;

// Search with pagination
@Route("/search")
@QueryParam(required = true) private String q;
@QueryParam(defaultValue = "1") private int page;

// Form handling (programmatic via Page methods)
@Route(value = "/contact", methods = { HttpMethod.GET, HttpMethod.POST })
// In render(): if (isPost()) { var name = formParam("name"); ... }

// Secured route
@Route(value = "/admin", roles = { "ROLE_ADMIN" })

// Profile-restricted (dev-only pages)
@Route(value = "/debug", profiles = { "dev" })

// Internationalized
@Route("/about") @Localized  // → /about, /es/about, /fr/about

// 404 catch-all
@Route(value = "/**", priority = Integer.MAX_VALUE)

// Server resolves theme from cookie → sets data-theme on <html>
// Client switches instantly:
fetch('/api/theme?value=dark', { method: 'POST' })
    .then(() => document.documentElement.setAttribute('data-theme', 'dark'));

import xss.it.jux.theme.*;

// Tabs — role="tablist", arrow key navigation
child(new JuxTabs(List.of(
    new JuxTabs.Tab("Overview", overviewContent),
    new JuxTabs.Tab("Details", detailsContent)
)))

// Accordion — aria-expanded, Enter/Space toggle
child(new JuxAccordion(List.of(
    new JuxAccordion.Section("FAQ 1", answer1),
    new JuxAccordion.Section("FAQ 2", answer2)
)))

// Modal — role="dialog", focus trap, Escape to close
child(new JuxModal("Confirm Delete", confirmContent))

// Toast — role="alert", aria-live="assertive"
child(new JuxToast("Saved successfully", JuxToast.Type.SUCCESS))

// Dropdown — aria-haspopup, arrow keys, role="menu"
child(new JuxDropdown("Actions", menuItems))

// Breadcrumb — nav aria-label, aria-current="page"
child(new JuxBreadcrumb(List.of("Home", "Blog", "Post Title")))

// Pagination — nav, aria-current, aria-disabled
child(new JuxPagination(currentPage, totalPages, "/blog?page="))

// Text field — label, aria-required, aria-invalid, aria-describedby
child(new JuxTextField("email", "Email Address"))

// Progress bar — role="progressbar", aria-valuenow/min/max
child(new JuxProgress(75, "Upload progress"))

// Skip links — visible on focus, WCAG 2.4.1
child(new JuxSkipLinks())

DesignTokens.generateCssVariables(themeProperties)
// Outputs both light and dark mode:
//   :root { --jux-color-primary: #3b82f6; ... }
//   [data-theme="dark"] { --jux-color-primary: #60a5fa; ... }

@Configuration
public class MyWidgets {
    @Bean
    public WidgetRegistration heroWidget(WidgetRegistry registry) {
        return registry.register("hero",
            HeroWidget.class,
            "Hero Banner",
            "image",
            WidgetCategory.HERO,
            PropSchema.builder()
                .prop("heading", PropType.STRING, "Main heading", true)
                .prop("ctaText", PropType.STRING, "Button label", false)
                .prop("ctaUrl", PropType.URL, "Button link", false)
                .build()
        );
    }
}

var name = new SimpleStringProperty("Alice");
var age = new SimpleIntegerProperty(30);

// Listen for changes
name.addListener((obs, oldVal, newVal) ->
    System.out.println("Name changed: " + oldVal + " → " + newVal));

name.set("Bob");  // triggers listener

var firstName = new SimpleStringProperty("Jane");
var lastName = new SimpleStringProperty("Doe");

// Computed binding — updates automatically when either property changes
StringBinding fullName = Bindings.concat(firstName, " ", lastName);
fullName.get();  // "Jane Doe"

firstName.set("John");
fullName.get();  // "John Doe"

ObservableList<String> items = JuxCollections.observableArrayList();

items.addListener((ListChangeListener<String>) change -> {
    while (change.next()) {
        if (change.wasAdded()) System.out.println("Added: " + change.getAddedSubList());
        if (change.wasRemoved()) System.out.println("Removed: " + change.getRemoved());
    }
});

items.addAll("Alpha", "Beta", "Gamma");

// Filtered and sorted views — live, no copying
FilteredList<String> filtered = new FilteredList<>(items, s -> s.startsWith("A"));
SortedList<String> sorted = new SortedList<>(items, Comparator.reverseOrder());

var opacity = new SimpleDoubleProperty(0.0);

Timeline timeline = new Timeline(
    new KeyFrame(Duration.ZERO,
        new KeyValue<>(opacity, 0.0)),
    new KeyFrame(Duration.seconds(1),
        new KeyValue<>(opacity, 1.0, Interpolator.EASE_IN_OUT))
);

timeline.play();  // opacity animates 0 → 1 over 1 second

// Fade in/out
new FadeTransition(Duration.millis(500), opacityProp)
    .setFromValue(0.0).setToValue(1.0).play();

// Scale
new ScaleTransition(Duration.seconds(0.3), scaleProp)
    .setFromValue(0.8).setToValue(1.0).play();

// Slide
new SlideTransition(Duration.millis(400), xProp)
    .setFromValue(-100).setToValue(0).play();

// Rotate
new RotateTransition(Duration.seconds(1), angleProp)
    .setFromValue(0).setToValue(360).play();

// Compose — parallel or sequential
new SequentialTransition(fadeIn, pause, slideOut).play();
new ParallelTransition(fadeIn, scaleUp).play();

@Html("pages/profile.html")
public class ProfileCard extends Component {

    @HtmlId private Element title;    // injected by id="title"
    @HtmlId private Element avatar;   // injected by id="avatar"
    @Slot("content") private Element content;  // injected by data-slot="content"

    @Override
    public Element render() {
        return HtmlLoader.load(this);  // parses, caches, injects, returns wired template
    }
}

@JuxComponent(clientSide = true)
public class Counter extends Component {
    @State private int count = 0;

    @Override
    public Element render() {
        return div().children(
            span().text("Count: " + count),
            button().text("+").on("click", e -> count++)
        );
    }
}

package com.example.pages;

import xss.it.jux.annotation.*;
import xss.it.jux.core.*;
import com.example.service.BlogRepository;
import static xss.it.jux.core.Elements.*;

@Route("/blog/{slug}")
@Localized
@Css(value = "themes/default.css", order = 1)
@Css(value = "pages/blog.css", order = 10)
public class BlogPostPage extends Page {

    @PathParam private String slug;

    private final BlogRepository blogRepo;

    public BlogPostPage(BlogRepository blogRepo) {
        this.blogRepo = blogRepo;
    }

    @Override
    public PageMeta pageMeta() {
        var post = blogRepo.findBySlug(slug).orElse(null);
        if (post == null) {
            return PageMeta.create().status(404).title("Not Found");
        }

        return PageMeta.create()
            .title(post.getTitle())
            .titleTemplate("%s | My Blog")
            .description(post.getExcerpt())
            .ogTitle(post.getTitle())
            .ogImage(post.getCoverImage())
            .ogImageAlt(post.getCoverImageAlt())
            .twitterCard("summary_large_image")
            .htmlLang(locale().getLanguage())
            .autoDir()
            .canonical("https://example.com/blog/" + slug)
            .when(post.hasCodeBlocks(), meta ->
                meta.css("vendor/prism.css", 50).js("vendor/prism.js", 50)
            );
    }

    @Override
    public Element render() {
        var post = blogRepo.findBySlug(slug).orElse(null);
        if (post == null) {
            return main_().children(
                h1().text("404"),
                p().text("Post not found."),
                a().attr("href", "/blog").text("Back to blog")
            );
        }

        return article().cls("blog-post").children(
            header().children(
                h1().text(post.getTitle()),
                time().attr("datetime", post.getDate().toString())
                      .text(messages().formatDate(post.getDate())),
                span().cls("author").text(post.getAuthor())
            ),
            div().cls("content").text(post.getContent()),
            footer().children(
                nav().aria("label", "Post navigation").children(
                    post.getPrevious() != null
                        ? a().attr("href", "/blog/" + post.getPrevious()).text("Previous")
                        : null,
                    post.getNext() != null
                        ? a().attr("href", "/blog/" + post.getNext()).text("Next")
                        : null
                )
            )
        );
    }
}

@Route(value = "/contact", methods = { HttpMethod.GET, HttpMethod.POST })
@Title("Contact Us")
public class ContactPage extends Page {

    private final ContactService contacts;

    public ContactPage(ContactService contacts) {
        this.contacts = contacts;
    }

    @Override
    public Element render() {
        if (isPost()) {
            contacts.submit(formParam("name"), formParam("email"), formParam("message"));
            return div().cls("success").children(h1().text("Thank you!"));
        }

        return form().attr("method", "post").children(
            label().attr("for", "name").text("Name"),
            input().id("name").attr("name", "name").attr("type", "text").ariaRequired(true),
            label().attr("for", "email").text("Email"),
            input().id("email").attr("name", "email").attr("type", "email").ariaRequired(true),
            label().attr("for", "msg").text("Message"),
            textarea().id("msg").attr("name", "message").ariaRequired(true),
            button().attr("type", "submit").text("Send")
        );
    }
}

public class LanguageSwitcher extends Component {
    private final JuxMessages messages;

    public LanguageSwitcher(JuxMessages messages) {
        this.messages = messages;
    }

    @Override
    public Element render() {
        var current = messages.currentLocale();
        return nav().aria("label", "Language selection").children(
            ul().cls("lang-switcher").children(
                messages.availableLocales().stream().map(locale ->
                    li().children(
                        a().attr("href", "/" + locale.getLanguage() + "/")
                           .attr("hreflang", locale.getLanguage())
                           .lang(locale.getLanguage())
                           .ariaCurrent(locale.equals(current) ? "true" : null)
                           .text(locale.getDisplayLanguage(locale))
                    )
                ).toList()
            )
        );
    }
}

@Route("/dashboard")
@Title("Dashboard")
public class DashboardPage extends Page {

    private final UserService users;
    private final AnalyticsService analytics;

    // Spring auto-injects both — no @Autowired needed
    public DashboardPage(UserService users, AnalyticsService analytics) {
        this.users = users;
        this.analytics = analytics;
    }

    @Override
    public Element render() {
        var m = messages();  // Built into Page, no injection
        var user = users.current();
        var stats = analytics.dashboardStats();

        return main_().children(
            h1().text(m.getString("dashboard.welcome", user.getName())),
            new StatsGrid(stats).render(),       // Component — instantiated with new
            new RecentActivity(user.getId()).render()
        );
    }
}