fimo 2.1.0 → 2.2.0-staging.10

package/assets/starters/fimo-site/template/src/forms/contact.json

@@ -1,14 +0,0 @@
-{
-  "name": "contact",
-  "label": "Start a conversation",
-  "fields": {
-    "name": { "type": "text", "label": "Your name", "required": true },
-    "email": { "type": "email", "label": "Email address", "required": true },
-    "message": {
-      "type": "textarea",
-      "label": "What are you building?",
-      "required": true,
-      "validation": { "minLength": 10, "maxLength": 2000 }
-    }
-  }
-}

package/assets/starters/fimo-site/template/src/forms/contact.ts

@@ -1,46 +0,0 @@
-// AUTO-GENERATED ⚠️ — do not edit by hand
-// Source: src/forms/contact.json
-// The CLI replaces the placeholder form id while seeding the starter. `fimo
-// validate` regenerates this file from the JSON spec on later edits.
-
-import { z } from 'zod';
-
-export const FORM_ID = '__FIMO_FORM_ID__';
-
-export const ContactSchema = z.object({
-  name: z.string().min(1, 'Your name is required'),
-  email: z.string().min(1, 'Email address is required').email('Invalid email address'),
-  message: z.string().min(1, 'What are you building? is required').min(10).max(2000),
-});
-
-export type ContactData = z.infer<typeof ContactSchema>;
-
-// @ts-ignore - meta.env is a vite feature
-const base = import.meta.env.VITE_API_URL;
-
-export async function submitContact(data: ContactData): Promise<{
-  success: boolean;
-  errors?: Record<string, string>;
-}> {
-  let response: Response;
-  try {
-    response = await fetch(`${base}/forms/${FORM_ID}/submit`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data),
-    });
-  } catch {
-    return { success: false };
-  }
-
-  if (response.ok) {
-    return { success: true };
-  }
-
-  if (response.status === 422) {
-    const json = (await response.json()) as { errors?: Record<string, string> };
-    return { success: false, errors: json.errors };
-  }
-
-  return { success: false };
-}

package/assets/starters/fimo-site/template/src/pages/Contact.tsx

@@ -1,193 +0,0 @@
-import { type FimoString, Text, useLabels } from 'fimo-react';
-import { ArrowUpRight, Check } from 'lucide-react';
-import { type FormEvent, type ReactNode, useState } from 'react';
-
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { Textarea } from '@/components/ui/textarea';
-import { ContactSchema, submitContact } from '@/forms/contact';
-import { cn } from '@/lib/utils';
-import type { HomePage } from '@/schemas/HomePage';
-
-import { Bar } from './SiteContent';
-
-export function Contact({ page, loading }: { page?: HomePage; loading: boolean }) {
-  return (
-    <section id="contact" className="dark bg-background text-foreground scroll-mt-16">
-      <div className="mx-auto grid w-full max-w-6xl gap-12 px-6 py-20 lg:grid-cols-12 lg:gap-16 lg:px-10 lg:py-28">
-        <div className="lg:col-span-5">
-          {page ? (
-            <>
-              <Text
-                value={page.contactHeading}
-                as="h2"
-                className="text-4xl font-semibold tracking-[-0.03em] text-balance lg:text-5xl"
-              />
-              <Text value={page.contactIntro} as="p" className="text-muted-foreground mt-6 max-w-md leading-relaxed" />
-            </>
-          ) : (
-            <div aria-hidden>
-              <div className="grid gap-3">
-                <Bar loading={loading} className="h-10 w-4/5" />
-                <Bar loading={loading} className="h-10 w-2/5" />
-              </div>
-              <div className="mt-8 grid gap-2">
-                <Bar loading={loading} className="h-4 w-full max-w-md" />
-                <Bar loading={loading} className="h-4 w-11/12 max-w-md" />
-                <Bar loading={loading} className="h-4 w-2/3 max-w-md" />
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="lg:col-span-7">
-          <ContactForm />
-        </div>
-      </div>
-    </section>
-  );
-}
-
-type SubmitState = 'idle' | 'submitting' | 'sent' | 'invalid' | 'failed';
-
-function ContactForm() {
-  const { t } = useLabels();
-  const [state, setState] = useState<SubmitState>('idle');
-  const [errors, setErrors] = useState<Record<string, string>>({});
-
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    // `currentTarget` is cleared once the handler yields, so keep the node.
-    const form = event.currentTarget;
-    setErrors({});
-
-    const parsed = ContactSchema.safeParse(Object.fromEntries(new FormData(form)));
-    if (!parsed.success) {
-      const fieldErrors: Record<string, string> = {};
-      for (const issue of parsed.error.issues) {
-        fieldErrors[issue.path[0] as string] = issue.message;
-      }
-      setErrors(fieldErrors);
-      setState('invalid');
-      return;
-    }
-
-    setState('submitting');
-    const result = await submitContact(parsed.data);
-    if (result.success) {
-      form.reset();
-      setState('sent');
-      return;
-    }
-
-    // A rejected submission comes back with per-field messages; a network or
-    // server failure has nothing to attach to a field, so it needs its own.
-    const fieldErrors = result.errors ?? {};
-    setErrors(fieldErrors);
-    setState(Object.keys(fieldErrors).length > 0 ? 'invalid' : 'failed');
-  };
-
-  const busy = state === 'submitting';
-  const sent = state === 'sent';
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      noValidate
-      aria-busy={busy}
-      className="border-border bg-card rounded-xl border p-6 sm:p-8"
-    >
-      <div className="grid gap-6 sm:grid-cols-2">
-        <FormField id="contact-name" label={t('contact.name')} error={errors.name}>
-          <Input
-            id="contact-name"
-            name="name"
-            type="text"
-            autoComplete="name"
-            disabled={busy || sent}
-            aria-invalid={Boolean(errors.name)}
-            aria-describedby={errors.name ? 'contact-name-error' : undefined}
-          />
-        </FormField>
-
-        <FormField id="contact-email" label={t('contact.email')} error={errors.email}>
-          <Input
-            id="contact-email"
-            name="email"
-            type="email"
-            autoComplete="email"
-            disabled={busy || sent}
-            aria-invalid={Boolean(errors.email)}
-            aria-describedby={errors.email ? 'contact-email-error' : undefined}
-          />
-        </FormField>
-
-        <div className="sm:col-span-2">
-          <FormField id="contact-message" label={t('contact.message')} error={errors.message}>
-            <Textarea
-              id="contact-message"
-              name="message"
-              rows={5}
-              disabled={busy || sent}
-              aria-invalid={Boolean(errors.message)}
-              aria-describedby={errors.message ? 'contact-message-error' : undefined}
-            />
-          </FormField>
-        </div>
-      </div>
-
-      <div className="mt-8 flex flex-wrap items-center gap-x-4 gap-y-3">
-        <Button
-          type="submit"
-          size="lg"
-          disabled={busy || sent}
-          className={cn('group', state === 'invalid' && 'ring-destructive/40 ring-[3px]')}
-        >
-          {busy ? <Spinner /> : null}
-          {sent ? <Check /> : null}
-          <Text value={t('contact.submit')} />
-          {!busy && !sent ? (
-            <ArrowUpRight className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
-          ) : null}
-        </Button>
-
-        {/* Both regions stay mounted and empty: a live region inserted at the same
-            moment as its text is announced unreliably. */}
-        <p role="status" className="text-muted-foreground text-sm">
-          {sent ? <Text value={t('contact.sent')} /> : null}
-        </p>
-        <p role="alert" className="text-destructive text-sm">
-          {state === 'failed' ? <Text value={t('contact.failed')} /> : null}
-        </p>
-      </div>
-    </form>
-  );
-}
-
-function FormField({
-  id,
-  label,
-  error,
-  children,
-}: {
-  id: string;
-  label: FimoString;
-  error?: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className="grid gap-2">
-      <Label htmlFor={id} className="text-muted-foreground text-[11px] font-medium tracking-[0.16em] uppercase">
-        <Text value={label} />
-      </Label>
-      {children}
-      {error ? (
-        <p id={`${id}-error`} role="alert" className="text-destructive text-xs">
-          {error}
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/assets/starters/fimo-site/template/src/pages/Index.tsx

@@ -1,27 +0,0 @@
-import HomePageContent from '@/schemas/HomePage';
-
-import { Contact } from './Contact';
-import { ContentFallback, Hero, SiteHeader, Stories } from './SiteContent';
-
-const Index = () => {
-  const { data: page, isLoading } = HomePageContent.useGet();
-
-  return (
-    <div className="bg-background text-foreground min-h-screen">
-      <SiteHeader />
-      <main>
-        {page ? (
-          <>
-            <Hero page={page} />
-            <Stories items={page.featured ?? []} />
-          </>
-        ) : (
-          <ContentFallback loading={isLoading} />
-        )}
-        <Contact page={page} loading={isLoading} />
-      </main>
-    </div>
-  );
-};
-
-export default Index;

package/assets/starters/fimo-site/template/src/pages/SiteContent.tsx

@@ -1,191 +0,0 @@
-import { RichText, Text, useLabels } from 'fimo-react';
-import { ArrowDown, ArrowUpRight } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { cn } from '@/lib/utils';
-import type { HomePage } from '@/schemas/HomePage';
-
-export function SiteHeader() {
-  const { t } = useLabels();
-
-  return (
-    <header className="border-border/70 bg-background/85 sticky top-0 z-30 border-b backdrop-blur">
-      <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-6 px-6 lg:px-10">
-        <Mark />
-        <nav className="flex min-w-0 items-center gap-5">
-          <a
-            href="#stories"
-            className="text-muted-foreground hover:text-foreground hidden truncate text-sm transition-colors sm:inline"
-          >
-            <Text value={t('nav.stories')} />
-          </a>
-          <Button asChild size="sm" variant="outline" className="min-w-0 shrink">
-            <a href="#contact">
-              <Text value={t('nav.contact')} className="truncate" />
-            </a>
-          </Button>
-        </nav>
-      </div>
-    </header>
-  );
-}
-
-export function Hero({ page }: { page: HomePage }) {
-  const { t } = useLabels();
-
-  return (
-    <section className="border-border/70 border-b">
-      <div className="mx-auto w-full max-w-6xl px-6 py-20 lg:px-10 lg:py-32">
-        <p className="text-muted-foreground flex items-center gap-4 text-[11px] font-semibold tracking-[0.24em] uppercase">
-          <span aria-hidden className="bg-primary h-px w-10 shrink-0" />
-          <Text value={page.eyebrow} />
-        </p>
-
-        <div className="mt-10 grid gap-12 lg:mt-14 lg:grid-cols-12 lg:gap-16">
-          <Text
-            value={page.title}
-            as="h1"
-            className="text-5xl leading-[0.95] font-semibold tracking-[-0.04em] text-balance sm:text-6xl lg:col-span-7 lg:text-7xl"
-          />
-
-          <div className="lg:col-span-5 lg:pt-3">
-            <RichText
-              value={page.intro}
-              className="text-muted-foreground max-w-md text-lg leading-relaxed [&>p+p]:mt-4"
-            />
-
-            <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-4">
-              <Button asChild size="lg" className="group">
-                <a href={String(page.primaryCtaHref)}>
-                  <Text value={page.primaryCtaLabel} />
-                  <ArrowUpRight className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
-                </a>
-              </Button>
-              <a
-                href="#stories"
-                className="text-muted-foreground hover:text-foreground group inline-flex items-center gap-2 text-sm transition-colors"
-              >
-                <Text value={t('hero.scroll')} />
-                <ArrowDown className="size-4 transition-transform group-hover:translate-y-0.5" />
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export function Stories({ items }: { items: HomePage['featured'] }) {
-  const { t } = useLabels();
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return (
-    <section id="stories" aria-labelledby="stories-title" className="border-border/70 scroll-mt-16 border-b">
-      <div className="mx-auto w-full max-w-6xl px-6 lg:px-10">
-        <Text
-          value={t('nav.stories')}
-          as="h2"
-          id="stories-title"
-          className="text-muted-foreground pt-16 text-[11px] font-semibold tracking-[0.24em] uppercase lg:pt-24"
-        />
-        <ul className="divide-border/70 border-border/70 mt-8 divide-y border-t">
-          {items.map((item, index) => (
-            <li key={item._key}>
-              <a
-                href={item.href}
-                className="focus-visible:ring-ring/50 group grid gap-5 rounded-md py-10 outline-none focus-visible:ring-[3px] md:grid-cols-12 md:gap-8 md:py-14"
-              >
-                <div className="flex items-baseline gap-4 md:col-span-4">
-                  <span className="text-primary font-mono text-xs tabular-nums">
-                    {String(index + 1).padStart(2, '0')}
-                  </span>
-                  <Text value={item.label} className="text-sm font-medium" />
-                </div>
-
-                <div className="flex items-start gap-6 md:col-span-8">
-                  <div className="min-w-0 transition-transform duration-300 group-hover:translate-x-1">
-                    <Text
-                      value={item.title}
-                      as="h3"
-                      className="text-2xl font-semibold tracking-[-0.02em] text-balance md:text-3xl"
-                    />
-                    <Text
-                      value={item.summary}
-                      as="p"
-                      className="text-muted-foreground mt-3 max-w-xl leading-relaxed whitespace-pre-line"
-                    />
-                  </div>
-                  <ArrowUpRight className="text-muted-foreground/40 group-hover:text-foreground ml-auto size-5 shrink-0 transition-all duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
-                </div>
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
-
-export function ContentFallback({ loading }: { loading: boolean }) {
-  return (
-    <>
-      <section aria-hidden className="border-border/70 border-b">
-        <div className="mx-auto w-full max-w-6xl px-6 py-20 lg:px-10 lg:py-32">
-          <Bar loading={loading} className="h-3 w-40" />
-          <div className="mt-10 grid gap-12 lg:mt-14 lg:grid-cols-12 lg:gap-16">
-            <div className="grid gap-4 lg:col-span-7">
-              <Bar loading={loading} className="h-14 w-full lg:h-16" />
-              <Bar loading={loading} className="h-14 w-5/6 lg:h-16" />
-              <Bar loading={loading} className="h-14 w-2/3 lg:h-16" />
-            </div>
-            <div className="grid gap-3 lg:col-span-5 lg:pt-3">
-              <Bar loading={loading} className="h-4 w-full max-w-md" />
-              <Bar loading={loading} className="h-4 w-11/12 max-w-md" />
-              <Bar loading={loading} className="h-4 w-3/4 max-w-md" />
-              <Bar loading={loading} className="mt-7 h-10 w-48" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section aria-hidden className="border-border/70 border-b">
-        <div className="mx-auto w-full max-w-6xl px-6 lg:px-10">
-          <Bar loading={loading} className="mt-16 h-3 w-28 lg:mt-24" />
-          <ul className="divide-border/70 border-border/70 mt-8 divide-y border-t">
-            {[0, 1, 2].map((row) => (
-              <li key={row} className="grid gap-5 py-10 md:grid-cols-12 md:gap-8 md:py-14">
-                <Bar loading={loading} className="h-4 w-32 md:col-span-4" />
-                <div className="grid gap-3 md:col-span-8">
-                  <Bar loading={loading} className="h-8 w-3/4" />
-                  <Bar loading={loading} className="h-4 w-full max-w-xl" />
-                  <Bar loading={loading} className="h-4 w-2/3 max-w-xl" />
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </section>
-    </>
-  );
-}
-
-/** Pulses while the request is in flight; settles into a static block once it is not. */
-export function Bar({ loading, className }: { loading: boolean; className: string }) {
-  return loading ? <Skeleton className={className} /> : <div className={cn('bg-muted rounded-md', className)} />;
-}
-
-function Mark() {
-  return (
-    <span aria-hidden className="grid size-5 shrink-0 grid-cols-2 gap-[3px]">
-      <span className="bg-foreground rounded-[2px]" />
-      <span className="bg-foreground/25 rounded-[2px]" />
-      <span className="bg-foreground/25 rounded-[2px]" />
-      <span className="bg-primary rounded-[2px]" />
-    </span>
-  );
-}

package/assets/starters/fimo-site/template/src/schemas/HomePage.json

@@ -1,28 +0,0 @@
-{
-  "uid": "HomePage",
-  "name": "Home page",
-  "isSingleton": true,
-  "i18n": { "enabled": false },
-  "fields": {
-    "eyebrow": { "type": "string", "required": true },
-    "title": { "type": "string", "required": true },
-    "intro": { "type": "richtext", "required": true },
-    "primaryCtaLabel": { "type": "string", "required": true },
-    "primaryCtaHref": { "type": "string", "required": true },
-    "featured": {
-      "type": "blocks",
-      "min": 1,
-      "max": 3,
-      "schema": {
-        "fields": {
-          "label": { "type": "string", "required": true },
-          "title": { "type": "string", "required": true },
-          "summary": { "type": "text", "required": true },
-          "href": { "type": "string", "required": true }
-        }
-      }
-    },
-    "contactHeading": { "type": "string", "required": true },
-    "contactIntro": { "type": "text", "required": true }
-  }
-}

package/assets/starters/fimo-site/template/src/schemas/HomePage.ts

@@ -1,29 +0,0 @@
-// AUTO-GENERATED by `fimo` from src/schemas/HomePage.json - DO NOT EDIT.
-// Change content fields in the schema, then run `fimo validate`.
-// Runtime implementation lives in the project-local fimo-react package.
-import { createSingletonClient } from 'fimo-react';
-import type { ContentSchema, SingletonContentClient } from 'fimo-react';
-
-import schema from './HomePage.json';
-import type { HomePage, HomePageInput } from './HomePage.types';
-
-export type {
-  HomePage,
-  HomePageFields,
-  HomePageFimoMeta,
-  HomePageInput,
-  HomePagePopulate,
-  HomePageQuery,
-  HomePageReferences,
-  HomePageResult,
-  HomePageSort,
-  HomePageWhere,
-} from './HomePage.types';
-
-const client: SingletonContentClient<HomePage, HomePageInput> = createSingletonClient<HomePage, HomePageInput>({
-  schema: schema as unknown as ContentSchema,
-});
-
-export const { get, update, useGet, useSuspenseGet, useUpdate, wrapWithSource, meta } = client;
-
-export default client;

package/assets/starters/fimo-site/template/src/schemas/HomePage.types.ts

@@ -1,64 +0,0 @@
-// AUTO-GENERATED ⚠️ – do not edit by hand
-import {
-  type Fields,
-  type FimoRichText,
-  type FimoRichTextContent,
-  type FimoString,
-  type Populate,
-  type PopulatedResult,
-  type ProjectedWithPopulate,
-  type Query,
-  type Sort,
-  type Where,
-  type WithReferences,
-} from 'fimo-react';
-
-export interface HomePageFimoMeta {
-  contentType: string;
-}
-
-export interface HomePage extends WithReferences<HomePageReferences> {
-  id: string;
-  entryId: string;
-  documentId: string;
-  slug: FimoString;
-  locale?: string;
-  createdAt: string;
-  updatedAt: string;
-  __fimo: HomePageFimoMeta;
-  eyebrow: FimoString;
-  title: FimoString;
-  intro: FimoRichText;
-  primaryCtaLabel: FimoString;
-  primaryCtaHref: FimoString;
-  featured: { _key: string; label: string; title: string; summary: string; href: string }[];
-  contactHeading: FimoString;
-  contactIntro: FimoString;
-}
-
-export interface HomePageInput {
-  slug?: string;
-  eyebrow: string;
-  title: string;
-  intro: FimoRichTextContent;
-  primaryCtaLabel: string;
-  primaryCtaHref: string;
-  featured: { _key?: string; label: string; title: string; summary: string; href: string }[];
-  contactHeading: string;
-  contactIntro: string;
-}
-
-export interface HomePageReferences {}
-
-export type HomePagePopulate = Populate<HomePage>;
-export type HomePageWhere = Where<HomePage>;
-export type HomePageSort = Sort<HomePage>;
-export type HomePageFields = Fields<HomePage>;
-export type HomePageQuery<
-  TFields extends HomePageFields | undefined = HomePageFields | undefined,
-  TPopulate extends HomePagePopulate | undefined = HomePagePopulate | undefined,
-> = Query<HomePage, TFields, TPopulate>;
-export type HomePageResult<
-  TFields extends HomePageFields | undefined = undefined,
-  TPopulate extends HomePagePopulate | undefined = undefined,
-> = ProjectedWithPopulate<PopulatedResult<HomePage, TPopulate>, TFields, TPopulate>;

package/dist/runtime/shared/env-identity.d.ts

@@ -1,43 +0,0 @@
-/**
- * How a local checkout names and addresses a Fimo env — runtime-safe copy.
- *
- * TRAP: this looks like a duplicate of `@fimo/api-contracts` and it is, on
- * purpose. `dist/runtime/` and `dist/build/` ship UNBUNDLED inside the `fimo`
- * npm package and can only import published dependencies; `@fimo/api-contracts`
- * is a private workspace package, so a runtime import of it breaks every user
- * project (`ERR_MODULE_NOT_FOUND` from `vite.config.ts`). The CLI binary is
- * bundled and may import contracts freely — the runtime may not.
- *
- * The two copies must agree byte-for-byte or a checkout computes a different
- * tenant host than the API hands out. `env-identity.test.ts` pins them
- * together against a corpus; change one, and that test tells you to change the
- * other.
- */
-export declare const DEFAULT_ENV = "main";
-export declare const PROD_ENV_PREFIX = "release/";
-/** Mirror of `isValidEnv` in `@fimo/api-contracts`. */
-export declare function isValidEnv(env: string): boolean;
-/** Mirror of `envResourceKey` in `@fimo/api-contracts`. */
-export declare function envResourceKey(env: string): string;
-/** Mirror of `buildTenantApiUrl` in `@fimo/api-contracts`. */
-export declare function buildTenantApiUrl(projectId: string, env: string, tenantApiBaseUrl: string): string;
-/**
- * Content-API aliases a local checkout exposes — one per framework family
- * that has a Fimo startup hook (Vite/React Router, Next, Astro, SvelteKit).
- * Add a key when its framework's hook lands, not before: an alias no runtime
- * reads is one more line to reason about when a site talks to the wrong env.
- */
-export declare const LOCAL_CONTENT_API_ENV_KEYS: readonly ['FIMO_CONTENT_API_URL', 'VITE_API_URL', 'NEXT_PUBLIC_FIMO_API_URL', 'PUBLIC_FIMO_API_URL'];
-/** Env selectors a runtime turns into the `X-Fimo-Env` request header. */
-export declare const LOCAL_ENV_SELECTOR_KEYS: readonly ['FIMO_ENV', 'NEXT_PUBLIC_FIMO_ENV'];
-/**
- * Both halves move together. The tenant URL selects the env for content reads
- * (each env has its own host); the selectors select it for every service that
- * reads `X-Fimo-Env`. Setting one without the other points a checkout at two
- * different envs.
- */
-export declare function buildLocalRuntimeEnv(options: {
-    readonly tenantApiUrl: string;
-    readonly env: string;
-}): Record<string, string>;
-//# sourceMappingURL=env-identity.d.ts.map