create-warlock 5.2.4 → 5.3.0

package/templates/warlock/src/app/locale/routes.ts

@@ -0,0 +1,4 @@
+import { router } from "@warlock.js/core";
+import { localeController } from "./controllers/locale.controller";
+
+router.post("/api/locale", localeController);

package/templates/warlock/src/shared/contact.schema.ts

@@ -0,0 +1,7 @@
+import { v } from "@warlock.js/seal";
+
+export const contactSchema = v.object({
+  name: v.string().min(2),
+  email: v.email(),
+  message: v.string().min(10),
+});

package/templates/warlock/src/shared/locale.schema.ts

@@ -0,0 +1,11 @@
+import { v, type Infer } from "@warlock.js/seal";
+import { localeCodes } from "./locales";
+
+export const localeSchema = v.object({
+  locale: v
+    .string()
+    .in([...localeCodes])
+    .required(),
+});
+
+export type LocaleSchema = Infer.Output<typeof localeSchema>;

package/templates/warlock/src/shared/locales.ts

@@ -0,0 +1,7 @@
+export const localeCodes = ["en", "ar"] as const;
+
+export type LocaleCode = (typeof localeCodes)[number];
+
+export function isLocaleCode(locale: string): locale is LocaleCode {
+  return localeCodes.includes(locale as LocaleCode);
+}

package/templates/warlock/src/web/404.css

@@ -0,0 +1,113 @@
+.not-found,
+.not-found *,
+.not-found *::before,
+.not-found *::after {
+  box-sizing: border-box;
+}
+
+.not-found {
+  display: grid;
+  min-block-size: 100vh;
+  min-block-size: 100dvb;
+  align-items: center;
+  padding-block: clamp(2rem, 8vh, 6rem);
+  padding-inline: clamp(1.5rem, 7vw, 8rem);
+  background: #fafafa;
+  color: #18181b;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+.not-found__content {
+  inline-size: min(100%, 62rem);
+  margin-inline-start: clamp(0rem, 7vw, 8rem);
+}
+
+.not-found__title,
+.not-found__description {
+  margin: 0;
+}
+
+.not-found h1 {
+  margin: 0;
+  color: #facc15;
+  font-size: clamp(8rem, 25vw, 22rem);
+  font-weight: 800;
+  letter-spacing: -0.09em;
+  line-height: 0.72;
+}
+
+.not-found__title {
+  margin-block-start: clamp(2rem, 6vw, 5rem);
+  font-size: clamp(1.5rem, 3vw, 2.5rem);
+  font-weight: 680;
+  letter-spacing: -0.035em;
+  line-height: 1.1;
+}
+
+.not-found__description {
+  max-inline-size: 30rem;
+  margin-block-start: 0.75rem;
+  color: #52525b;
+  font-size: clamp(1rem, 1.4vw, 1.125rem);
+  line-height: 1.55;
+}
+
+.not-found__action {
+  display: inline-block;
+  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
+  padding-block: 0.65rem;
+  padding-inline: 1rem;
+  background: #facc15;
+  color: #18181b;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.not-found__action:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.not-found__action:focus-visible {
+  outline: 3px solid #18181b;
+  outline-offset: 4px;
+}
+
+:dir(rtl) .not-found__content {
+  margin-inline-start: 0;
+  margin-inline-end: clamp(0rem, 7vw, 8rem);
+}
+
+@media (max-width: 40rem) {
+  .not-found__content {
+    margin-inline-start: 0;
+  }
+
+  :dir(rtl) .not-found__content {
+    margin-inline-end: 0;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .not-found {
+    background: #18181b;
+    color: #fafafa;
+  }
+
+  .not-found__description {
+    color: #d4d4d8;
+  }
+
+  .not-found__action {
+    color: #18181b;
+  }
+
+  .not-found__action:focus-visible {
+    outline-color: #fafafa;
+  }
+}

package/templates/warlock/src/web/404.page.tsx

@@ -0,0 +1,23 @@
+import "./404.css";
+
+export const metadata = {
+  title: "Page not found",
+  robots: "noindex",
+};
+
+export default function NotFoundPage() {
+  return (
+    <main className="not-found">
+      <div className="not-found__content">
+        <h1>404</h1>
+        <p className="not-found__title">Page not found.</p>
+        <p className="not-found__description">
+          The link may be outdated, or the page may have moved.
+        </p>
+        <a className="not-found__action" href="/">
+          Return home
+        </a>
+      </div>
+    </main>
+  );
+}

package/templates/warlock/src/web/app.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+/* Page-level styles live with their pages; this root owns only Tailwind's base layer. */

package/templates/warlock/src/web/home/components/contact-form-controls.tsx

@@ -0,0 +1,42 @@
+import { type FormControlProps, useFormControl, useSubmitButton } from "@mongez/react-form";
+import { type ReactNode } from "react";
+
+type ContactFieldProps = FormControlProps & {
+  label: ReactNode;
+  multiline?: boolean;
+  rows?: number;
+};
+
+export function ContactField({ label, multiline, rows, ...props }: ContactFieldProps) {
+  const { error, getErrorProps, getInputProps, id } = useFormControl(props);
+  const inputProps = getInputProps(rows ? { rows } : undefined);
+
+  return (
+    <label htmlFor={id}>
+      <span>{label}</span>
+      {multiline ? <textarea {...inputProps} /> : <input {...inputProps} />}
+      {error ? (
+        <small className="warlock-field-error" {...getErrorProps()}>
+          {error}
+        </small>
+      ) : null}
+    </label>
+  );
+}
+
+export function ContactSubmitButton({
+  idleLabel,
+  submittingLabel,
+}: {
+  idleLabel: ReactNode;
+  submittingLabel: ReactNode;
+}) {
+  const { disabled, isSubmitting } = useSubmitButton();
+
+  return (
+    <button className="warlock-contact-submit" type="submit" disabled={disabled}>
+      {isSubmitting ? submittingLabel : idleLabel}
+      <span aria-hidden="true">→</span>
+    </button>
+  );
+}

package/templates/warlock/src/web/home/components/contact-section.tsx

@@ -0,0 +1,108 @@
+import { Form } from "@mongez/react-form";
+import { useTrans } from "@warlock.js/web";
+import { contactSchema } from "../../../shared/contact.schema";
+import type { LocaleCode } from "../../../shared/locales";
+import { useContactForm } from "../hooks/use-contact-form";
+import { useLocaleSwitcher } from "../hooks/use-locale-switcher";
+import { ContactField, ContactSubmitButton } from "./contact-form-controls";
+
+type ContactSectionProps = { locale: LocaleCode };
+
+export function ContactSection({ locale }: ContactSectionProps) {
+  const { status: contactStatus, submitContact } = useContactForm();
+  const { error: localeError, isSwitching, switchLocale } = useLocaleSwitcher();
+  const translate = useTrans();
+  return (
+    <section
+      className="warlock-section warlock-contact"
+      id="contact"
+      dir={locale === "ar" ? "rtl" : "ltr"}
+    >
+      <div className="warlock-contact-copy">
+        <p className="warlock-overline">{translate("contact.overline")}</p>
+        <h2>{translate("contact.title")}</h2>
+        <p>{translate("contact.description")}</p>
+        <ol className="warlock-contact-flow">
+          <li>
+            <span>01</span>
+            <div>
+              <strong>React submits</strong>
+              <small>JSON over the same origin</small>
+            </div>
+          </li>
+          <li>
+            <span>02</span>
+            <div>
+              <strong>Seal validates</strong>
+              <small>Name, email, and message</small>
+            </div>
+          </li>
+          <li>
+            <span>03</span>
+            <div>
+              <strong>Warlock responds</strong>
+              <small>Typed controller, structured JSON</small>
+            </div>
+          </li>
+        </ol>
+      </div>
+      <Form
+        id="contact-demo"
+        className="warlock-contact-form"
+        schema={contactSchema}
+        validateOn="blur"
+        focusFirstError
+        onSubmit={submitContact}
+      >
+        <div className="warlock-form-heading">
+          <div>
+            <small>POST</small>
+            <code>/api/contact</code>
+          </div>
+          <button
+            className="warlock-locale-toggle"
+            type="button"
+            disabled={isSwitching}
+            onClick={() => switchLocale(locale === "en" ? "ar" : "en")}
+          >
+            {translate("contact.toggle")}
+          </button>
+        </div>
+        <ContactField
+          name="name"
+          type="text"
+          label={translate("contact.name")}
+          placeholder={translate("contact.namePlaceholder")}
+          required
+        />
+        <ContactField
+          name="email"
+          type="email"
+          label={translate("contact.email")}
+          placeholder={translate("contact.emailPlaceholder")}
+          required
+        />
+        <ContactField
+          name="message"
+          label={translate("contact.message")}
+          placeholder={translate("contact.messagePlaceholder")}
+          multiline
+          rows={5}
+          required
+        />
+        <ContactSubmitButton
+          idleLabel={translate("contact.submit")}
+          submittingLabel={translate("contact.submitting")}
+        />
+        <p className={`warlock-form-status is-${contactStatus.state}`} aria-live="polite">
+          {contactStatus.message || translate("contact.idle")}
+        </p>
+        {localeError ? (
+          <p className="warlock-form-status is-error" aria-live="polite">
+            {localeError}
+          </p>
+        ) : null}
+      </Form>
+    </section>
+  );
+}

package/templates/warlock/src/web/home/components/content-sections.tsx

@@ -0,0 +1,61 @@
+import type { HomePageData } from "app/home/services/home.service";
+
+type ContentSectionsProps = {
+  capabilities: HomePageData["capabilities"];
+  packages: HomePageData["packages"];
+};
+
+export function ContentSections({ capabilities, packages }: ContentSectionsProps) {
+  return (
+    <>
+      <section className="warlock-section warlock-features" id="features">
+        <div className="warlock-section-heading">
+          <p className="warlock-overline">Why Warlock</p>
+          <h2>A sharper way to build the whole product.</h2>
+          <p>
+            Fewer seams, fewer competing conventions, and more of your system expressed in code the
+            compiler can understand.
+          </p>
+        </div>
+        <div className="warlock-feature-grid">
+          {capabilities.map((capability) => (
+            <article className="warlock-feature-card" key={capability.index}>
+              <div className="warlock-feature-meta">
+                <span>{capability.index}</span>
+                <small>{capability.eyebrow}</small>
+              </div>
+              <h3>{capability.title}</h3>
+              <p>{capability.body}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+      <section className="warlock-section warlock-package-section" id="packages">
+        <div className="warlock-package-copy">
+          <p className="warlock-overline">The spellbook</p>
+          <h2>Take the framework. Keep the choice.</h2>
+          <p>
+            Every package owns one concern and composes with the rest. Build a focused HTTP service
+            today, then add persistence, jobs, access control, or agents without replacing the
+            foundation.
+          </p>
+          <a href="https://warlock.js.org/#packages" target="_blank" rel="noreferrer">
+            Browse every package <span aria-hidden="true">→</span>
+          </a>
+        </div>
+        <div className="warlock-package-grid" aria-label="Warlock.js packages">
+          {packages.map((frameworkPackage) => (
+            <article className="warlock-package" key={frameworkPackage.name}>
+              <small>{frameworkPackage.area}</small>
+              <h3>
+                <span>@warlock.js/</span>
+                {frameworkPackage.name}
+              </h3>
+              <p>{frameworkPackage.description}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/hero-section.tsx

@@ -0,0 +1,68 @@
+import { RuntimePreview } from "./runtime-preview";
+type HeroSectionProps = { statusMessage: string };
+export function HeroSection({ statusMessage }: HeroSectionProps) {
+  return (
+    <>
+      <section className="warlock-hero">
+        <div className="warlock-orbit warlock-orbit-one" aria-hidden="true" />
+        <div className="warlock-orbit warlock-orbit-two" aria-hidden="true" />
+        <div className="warlock-hero-copy">
+          <p className="warlock-kicker">
+            <span className="warlock-kicker-dot" />
+            AI-native TypeScript framework
+          </p>
+          <h1>
+            Build with<span> uncommon power.</span>
+          </h1>
+          <p className="warlock-hero-lede">
+            Production backends, server-rendered React, and intelligent agents—built on the same
+            typed primitives, running in one deliberate architecture.
+          </p>
+          <div className="warlock-hero-actions">
+            <a
+              className="warlock-button warlock-button-primary"
+              href="https://warlock.js.org/v/latest/core/getting-started/02-installation/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Start building <span aria-hidden="true">→</span>
+            </a>
+            <a
+              className="warlock-button warlock-button-ghost"
+              href="https://github.com/warlockjs"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Explore the source
+            </a>
+          </div>
+          <dl className="warlock-hero-stats">
+            <div>
+              <dt>28</dt>
+              <dd>focused packages</dd>
+            </div>
+            <div>
+              <dt>120+</dt>
+              <dd>AI-readable skills</dd>
+            </div>
+            <div>
+              <dt>MIT</dt>
+              <dd>open source</dd>
+            </div>
+          </dl>
+        </div>
+        <RuntimePreview statusMessage={statusMessage} />
+      </section>
+      <section className="warlock-trust" aria-label="Framework qualities">
+        <p>Built for teams who expect more from the foundation</p>
+        <div>
+          <span>Type-safe</span>
+          <span>Full-stack</span>
+          <span>AI-native</span>
+          <span>Composable</span>
+          <span>Production-ready</span>
+        </div>
+      </section>
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/home-footer.tsx

@@ -0,0 +1,35 @@
+import { HomeLogo } from "./logo";
+
+export function HomeFooter() {
+  return (
+    <>
+      <section className="warlock-cta">
+        <div className="warlock-cta-mark" aria-hidden="true">
+          W
+        </div>
+        <p className="warlock-overline">Your next system starts here</p>
+        <h2>Build something formidable.</h2>
+        <p>Scaffold a typed Warlock application and make the first request in minutes.</p>
+        <div className="warlock-command">
+          <code>npm create warlock@latest</code>
+          <span>Ready when you are</span>
+        </div>
+      </section>
+      <footer className="warlock-footer">
+        <div className="warlock-brand">
+          <HomeLogo />
+        </div>
+        <p>Backend, web, and AI on the same typed primitives.</p>
+        <div>
+          <a href="https://warlock.js.org" target="_blank" rel="noreferrer">
+            Documentation
+          </a>
+          <a href="https://github.com/warlockjs" target="_blank" rel="noreferrer">
+            GitHub
+          </a>
+          <span>MIT © {new Date().getFullYear()}</span>
+        </div>
+      </footer>
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/home-header.tsx

@@ -0,0 +1,26 @@
+import { HomeLogo } from "./logo";
+
+export function HomeHeader() {
+  return (
+    <header className="warlock-nav">
+      <a className="warlock-brand" href="/" aria-label="Warlock.js home">
+        <HomeLogo showVersion />
+      </a>
+      <nav className="warlock-nav-links" aria-label="Primary navigation">
+        <a href="#features">Features</a>
+        <a href="#packages">Packages</a>
+        <a href="https://warlock.js.org/v/latest/core/" target="_blank" rel="noreferrer">
+          Docs
+        </a>
+      </nav>
+      <a
+        className="warlock-nav-cta"
+        href="https://github.com/warlockjs"
+        target="_blank"
+        rel="noreferrer"
+      >
+        View on GitHub <span aria-hidden="true">↗</span>
+      </a>
+    </header>
+  );
+}

package/templates/warlock/src/web/home/components/logo.tsx

@@ -0,0 +1,19 @@
+type HomeLogoProps = {
+  showVersion?: boolean;
+};
+
+export function HomeLogo({ showVersion = false }: HomeLogoProps) {
+  return (
+    <>
+      <span className="warlock-logo-shell">
+        <img
+          className="warlock-logo"
+          src="https://warlock.js.org/_astro/logo.CdUW31XC.png"
+          alt=""
+        />
+      </span>
+      <span className="warlock-wordmark">Warlock.js</span>
+      {showVersion ? <span className="warlock-version">v5</span> : null}
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/runtime-preview.tsx

@@ -0,0 +1,75 @@
+type RuntimePreviewProps = { statusMessage: string };
+
+export function RuntimePreview({ statusMessage }: RuntimePreviewProps) {
+  return (
+    <div className="warlock-hero-stage" aria-label="Warlock application preview">
+      <div className="warlock-glow" aria-hidden="true" />
+      <div className="warlock-terminal">
+        <div className="warlock-terminal-bar">
+          <div className="warlock-terminal-dots" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+          <span>src/web/index.page.tsx</span>
+          <span className="warlock-terminal-live">Live</span>
+        </div>
+        <div className="warlock-code" aria-label="Example Warlock page code">
+          <div>
+            <span className="code-purple">import type</span> {"{"} PageProps {"}"}{" "}
+            <span className="code-purple">from</span>{" "}
+            <span className="code-green">&quot;@warlock.js/web&quot;</span>;
+          </div>
+          <div className="warlock-code-spacer" aria-hidden="true" />
+          <div>
+            <span className="code-purple">export async function</span>{" "}
+            <span className="code-blue">loader</span>() {"{"}
+          </div>
+          <div className="warlock-code-indent">
+            <span className="code-purple">return</span> {"{"} statusMessage:{" "}
+            <span className="code-green">&quot;Application ready&quot;</span> {"}"};
+          </div>
+          <div>{"}"}</div>
+          <div className="warlock-code-spacer" aria-hidden="true" />
+          <div>
+            <span className="code-purple">type</span>{" "}
+            <span className="code-blue">HomePageProps</span> ={" "}
+            <span className="code-blue">PageProps</span>&lt;
+            <span className="code-purple">typeof</span> loader&gt;;
+          </div>
+          <div className="warlock-code-spacer" aria-hidden="true" />
+          <div>
+            <span className="code-purple">export default function</span>{" "}
+            <span className="code-blue">HomePage</span>({"{"} data {"}"}:{" "}
+            <span className="code-blue">HomePageProps</span>) {"{"}
+          </div>
+          <div className="warlock-code-indent">
+            <span className="code-purple">return</span> &lt;small&gt;{"{"}data.statusMessage{"}"}
+            &lt;/small&gt;;
+          </div>
+          <div>{"}"}</div>
+        </div>
+        <div className="warlock-runtime">
+          <div>
+            <span className="warlock-runtime-pulse" />
+            <div>
+              <strong>Application ready</strong>
+              <small>{statusMessage}</small>
+            </div>
+          </div>
+          <div className="warlock-runtime-marks" aria-label="Runtime capabilities">
+            <span>SSR</span>
+            <span>React</span>
+            <span>HMR</span>
+          </div>
+        </div>
+      </div>
+      <div className="warlock-stage-note warlock-stage-note-top">
+        <span>SSR</span>First response, fully rendered
+      </div>
+      <div className="warlock-stage-note warlock-stage-note-bottom">
+        <span>HMR</span>State survives the edit
+      </div>
+    </div>
+  );
+}

package/templates/warlock/src/web/home/hooks/use-contact-form.ts

@@ -0,0 +1,57 @@
+import { http } from "@mongez/http";
+import { type FormSubmitOptions, type InferFormValues } from "@mongez/react-form";
+import { useState } from "react";
+import type { contactSchema } from "../../../shared/contact.schema";
+import { setFormErrors } from "../../shared/utils/set-form-errors";
+
+type ContactValues = InferFormValues<typeof contactSchema>;
+
+type ContactResponse = {
+  message: string;
+  received: {
+    email: string;
+    characters: number;
+  };
+};
+
+type ContactStatus = {
+  state: "idle" | "submitting" | "success" | "error";
+  message: string;
+};
+
+export function useContactForm() {
+  const [status, setStatus] = useState<ContactStatus>({ state: "idle", message: "" });
+
+  async function submitContact({
+    values,
+    form,
+  }: FormSubmitOptions<typeof contactSchema>): Promise<void> {
+    setStatus({ state: "submitting", message: "Sending to the backend…" });
+
+    try {
+      const result = await http.post<ContactResponse>("/api/contact", values as ContactValues);
+
+      if (result.error) {
+        if (result.error.isValidationError) {
+          setFormErrors(result.error, form);
+        }
+
+        setStatus({
+          state: "error",
+          message: result.error.message || "The request was not accepted.",
+        });
+        return;
+      }
+
+      setStatus({ state: "success", message: result.data?.message });
+      form.reset();
+    } catch (error) {
+      setStatus({
+        state: "error",
+        message: error instanceof Error ? error.message : "Could not reach the backend.",
+      });
+    }
+  }
+
+  return { status, submitContact };
+}