create-stitchkit 0.1.0

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/landing-sections.tsx

@@ -0,0 +1,269 @@
+'use client';
+
+import {
+  IconArrowUpRight,
+  IconBooks,
+  IconBox,
+  IconBrandReact,
+  IconCode,
+  IconDatabase,
+  IconDeviceDesktop,
+  IconRoute,
+  IconServer,
+  IconShieldCheck,
+  IconUsers,
+} from '@tabler/icons-react';
+import { ThemedImage } from '@wrksz/themes/client/themed-image';
+import { useState } from 'react';
+import {
+  AdaptiveModal,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui';
+
+const problems = [
+  ['Schema drift', 'One named Zod schema drives server validation and every client.'],
+  ['Transport duplication', 'HTTP, tools and CLI share the same implementation.'],
+  ['Frontend plumbing', 'Queries, realtime cache updates and errors arrive composed.'],
+];
+
+export function ProblemsSection() {
+  return (
+    <section className='space-y-6 py-14'>
+      <div className='max-w-2xl'>
+        <p className='text-sm text-muted-foreground'>The repetitive work</p>
+        <h2 className='text-3xl font-medium'>Keep infrastructure from becoming the product</h2>
+      </div>
+      <div className='grid gap-3 md:grid-cols-3'>
+        {problems.map(([title, copy], index) => (
+          <Card key={title}>
+            <CardHeader>
+              <Badge className='w-fit'>{String(index + 1).padStart(2, '0')}</Badge>
+              <CardTitle className='pt-4'>{title}</CardTitle>
+            </CardHeader>
+            <CardContent className='text-sm text-muted-foreground'>{copy}</CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function BuilderSection() {
+  return (
+    <section className='grid gap-8 border-y border-border py-14 md:grid-cols-[0.8fr_1.2fr] md:items-center'>
+      <div className='grid aspect-square max-w-sm place-items-center rounded-3xl bg-muted'>
+        <IconCode className='size-20 text-muted-foreground' stroke={1.25} />
+      </div>
+      <div className='space-y-4'>
+        <Badge variant='secondary'>Built for product teams</Badge>
+        <h2 className='text-3xl font-medium'>A neutral foundation, not a sample business</h2>
+        <p className='text-muted-foreground'>
+          Replace the example domain while retaining contracts, runtime boundaries, operational
+          tooling and the complete component vocabulary.
+        </p>
+        <div className='flex items-center gap-2 text-sm'>
+          <IconUsers /> Solo developers and teams
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const foundations = [
+  {
+    icon: IconShieldCheck,
+    title: 'Validated boundaries',
+    copy: 'Fail-first environment and data parsing.',
+  },
+  {
+    icon: IconDatabase,
+    title: 'Persistent by default',
+    copy: 'Prisma and PostgreSQL with a real migration.',
+  },
+  {
+    icon: IconServer,
+    title: 'Independent backend',
+    copy: 'Long-running work, sockets and MCP stay outside Next.',
+  },
+  {
+    icon: IconRoute,
+    title: 'Typed navigation',
+    copy: 'Contracts build calls and URLs without repeated strings.',
+  },
+];
+
+export function WhySection() {
+  return (
+    <section className='space-y-6 py-14'>
+      <div>
+        <p className='text-sm text-muted-foreground'>Why this topology</p>
+        <h2 className='text-3xl font-medium'>Clear ownership at every boundary</h2>
+      </div>
+      <div className='grid gap-3 sm:grid-cols-2'>
+        {foundations.map((item) => (
+          <Card key={item.title}>
+            <CardContent className='flex gap-4 pt-4'>
+              <div className='grid size-10 shrink-0 place-items-center rounded-xl bg-muted'>
+                <item.icon />
+              </div>
+              <div>
+                <h3 className='font-medium'>{item.title}</h3>
+                <p className='mt-1 text-sm text-muted-foreground'>{item.copy}</p>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function AudienceSection() {
+  return (
+    <section className='grid gap-3 py-14 md:grid-cols-3'>
+      {[
+        ['Start', 'Generate a complete system and learn it through one bounded domain.'],
+        ['Adapt', 'Keep the boundaries and replace fixtures with your own product model.'],
+        ['Scale', 'Split deployments without rewriting the contract or transport surface.'],
+      ].map(([title, copy]) => (
+        <div className='rounded-2xl border border-border p-5' key={title}>
+          <h3 className='text-xl font-medium'>{title}</h3>
+          <p className='mt-2 text-sm text-muted-foreground'>{copy}</p>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export function LearningSection() {
+  return (
+    <section className='grid gap-8 py-14 md:grid-cols-[0.8fr_1.2fr]'>
+      <div>
+        <IconBooks className='mb-4 size-10' />
+        <h2 className='text-3xl font-medium'>Learn by tracing one operation</h2>
+        <p className='mt-3 text-muted-foreground'>
+          Follow a project mutation from schema to contract, service, HTTP client, query cache,
+          Socket.IO event, MCP tool and CLI command.
+        </p>
+      </div>
+      <ol className='space-y-3'>
+        {[
+          'Define a named schema',
+          'Reference it from a thin contract',
+          'Implement the domain once',
+          'Consume the generated surfaces',
+        ].map((step, index) => (
+          <li
+            className='flex items-center gap-4 rounded-xl border border-border p-4'
+            key={step}
+          >
+            <Badge>{index + 1}</Badge>
+            <span>{step}</span>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+export function TemplatePreviewSection() {
+  return (
+    <section className='space-y-6 py-14'>
+      <div className='flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between'>
+        <div>
+          <p className='text-sm text-muted-foreground'>Theme-aware media</p>
+          <h2 className='text-3xl font-medium'>A project shell ready to become yours</h2>
+        </div>
+        <Badge variant='success'>Light + dark</Badge>
+      </div>
+      <ThemedImage
+        src={{ light: '/theme-light.svg', dark: '/theme-dark.svg' }}
+        alt='Theme-aware generic application preview'
+        width={1280}
+        height={720}
+        className='w-full rounded-2xl border border-border'
+      />
+    </section>
+  );
+}
+
+export function FrontendSection() {
+  return (
+    <section className='space-y-6 py-14'>
+      <h2 className='text-3xl font-medium'>Frontend foundations included</h2>
+      <div className='grid gap-3 sm:grid-cols-3'>
+        {[
+          {
+            icon: IconBrandReact,
+            title: 'React 19',
+            copy: 'Server-first composition and isolated client islands.',
+          },
+          {
+            icon: IconDeviceDesktop,
+            title: 'Responsive UI',
+            copy: 'Touch, keyboard and desktop interaction patterns.',
+          },
+          {
+            icon: IconBox,
+            title: 'Source components',
+            copy: 'Own and adapt every primitive without a black box.',
+          },
+        ].map((item) => (
+          <Card key={item.title}>
+            <CardContent className='pt-4'>
+              <item.icon className='mb-5 size-8' />
+              <h3 className='font-medium'>{item.title}</h3>
+              <p className='mt-2 text-sm text-muted-foreground'>{item.copy}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function DemoModal() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant='outline' onClick={() => setOpen(true)}>
+        Explore starter <IconArrowUpRight />
+      </Button>
+      <AdaptiveModal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        title='Choose a surface'
+        desktopWidth='2xl'
+        mobileVariant='sheet'
+      >
+        <div className='p-4 pt-1'>
+          <Tabs defaultValue='http'>
+            <TabsList>
+              <TabsTrigger value='http'>HTTP</TabsTrigger>
+              <TabsTrigger value='tools'>Tools</TabsTrigger>
+              <TabsTrigger value='realtime'>Realtime</TabsTrigger>
+            </TabsList>
+            <TabsContent className='pt-5 text-sm text-muted-foreground' value='http'>
+              Typed browser and server clients consume the same contract.
+            </TabsContent>
+            <TabsContent className='pt-5 text-sm text-muted-foreground' value='tools'>
+              MCP, Agent and CLI surfaces reuse the service runner and validation.
+            </TabsContent>
+            <TabsContent className='pt-5 text-sm text-muted-foreground' value='realtime'>
+              Socket.IO events update the TanStack Query cache through Stitchkit.
+            </TabsContent>
+          </Tabs>
+        </div>
+      </AdaptiveModal>
+    </>
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/landing-showcase.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { IconArrowRight, IconBraces, IconDatabase, IconWorld } from '@tabler/icons-react';
+import type { ReactNode } from 'react';
+import { BrandMark } from '@/components/brand-mark';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDeck,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui';
+
+const features = [
+  {
+    icon: IconBraces,
+    title: 'Contract first',
+    copy: 'Schemas, clients and transports stay aligned.',
+  },
+  {
+    icon: IconDatabase,
+    title: 'Production data',
+    copy: 'Prisma and PostgreSQL are ready from day one.',
+  },
+  {
+    icon: IconWorld,
+    title: 'Every surface',
+    copy: 'HTTP, realtime, MCP, agents and CLI share one service.',
+  },
+];
+
+export function LandingHeader({ actions }: { actions?: ReactNode }) {
+  return (
+    <header className='flex items-center justify-between border-b border-border py-4'>
+      <div className='flex items-center gap-2 font-medium'>
+        <BrandMark priority />
+        Stitchkit Starter
+      </div>
+      <div className='flex items-center gap-2'>{actions}</div>
+    </header>
+  );
+}
+
+export function HeroSection() {
+  return (
+    <section className='grid gap-8 py-20 lg:grid-cols-[1.2fr_0.8fr] lg:items-end'>
+      <div className='space-y-6'>
+        <Badge variant='primary'>Production starter</Badge>
+        <h1 className='max-w-3xl font-display text-5xl font-medium tracking-tight sm:text-7xl'>
+          Build the product, not its plumbing.
+        </h1>
+        <p className='max-w-2xl text-lg text-muted-foreground'>
+          A precise fullstack base with a complete UI system and one contract across every
+          interface.
+        </p>
+        <div className='flex flex-wrap gap-3'>
+          <Button variant='primary'>
+            Start building <IconArrowRight />
+          </Button>
+          <Button variant='outline'>Read the architecture</Button>
+        </div>
+      </div>
+      <CardDeck
+        items={features}
+        overlap={-28}
+        rotationStep={4}
+        keyExtractor={(feature) => feature.title}
+        renderCard={(feature) => (
+          <Card className='w-48 bg-card/95 backdrop-blur'>
+            <CardHeader>
+              <feature.icon />
+              <CardTitle>{feature.title}</CardTitle>
+            </CardHeader>
+            <CardContent className='text-sm text-muted-foreground'>{feature.copy}</CardContent>
+          </Card>
+        )}
+      />
+    </section>
+  );
+}
+
+export function FeatureGrid() {
+  return (
+    <section className='grid gap-3 py-10 md:grid-cols-3'>
+      {features.map((feature) => (
+        <Card key={feature.title}>
+          <CardHeader>
+            <div className='mb-5 grid size-10 place-items-center rounded-xl bg-muted'>
+              <feature.icon />
+            </div>
+            <CardTitle>{feature.title}</CardTitle>
+          </CardHeader>
+          <CardContent className='text-sm text-muted-foreground'>{feature.copy}</CardContent>
+        </Card>
+      ))}
+    </section>
+  );
+}
+
+export function PortfolioSection() {
+  return (
+    <section className='space-y-6 py-16'>
+      <div>
+        <p className='text-sm text-muted-foreground'>Composable sections</p>
+        <h2 className='text-3xl font-medium'>From landing page to application shell</h2>
+      </div>
+      <div className='grid gap-4 md:grid-cols-2'>
+        {[
+          'Editorial landing',
+          'Operational dashboard',
+          'Account workspace',
+          'Data-heavy admin',
+        ].map((title, index) => (
+          <div
+            className='aspect-[16/9] rounded-2xl border border-border bg-gradient-to-br from-muted to-background p-5'
+            key={title}
+          >
+            <Badge>{String(index + 1).padStart(2, '0')}</Badge>
+            <p className='mt-auto pt-20 text-lg font-medium'>{title}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function PricingSection() {
+  return (
+    <section className='grid gap-4 py-16 md:grid-cols-3'>
+      {['Foundation', 'Product', 'Scale'].map((name, index) => (
+        <Card className={index === 1 ? 'border-primary' : undefined} key={name}>
+          <CardHeader>
+            <Badge variant={index === 1 ? 'primary' : 'default'}>
+              {index === 1 ? 'Recommended' : 'Flexible'}
+            </Badge>
+            <CardTitle className='pt-4 text-2xl'>{name}</CardTitle>
+          </CardHeader>
+          <CardContent className='space-y-5 text-sm text-muted-foreground'>
+            <p>A reusable layout demonstrating pricing, comparison and conversion patterns.</p>
+            <Button className='w-full' variant={index === 1 ? 'primary' : 'outline'}>
+              Choose {name}
+            </Button>
+          </CardContent>
+        </Card>
+      ))}
+    </section>
+  );
+}
+
+export function LandingFooter() {
+  return (
+    <footer className='flex flex-col gap-3 border-t border-border py-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between'>
+      <span>Stitchkit Starter · Built with Stitchkit</span>
+      <span>Contracts · UI · Realtime · Tools</span>
+    </footer>
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/motion-story.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  AnimatedCounter,
+  Button,
+  Card,
+  CardContent,
+  CardDeck,
+  CardHeader,
+  CardTitle,
+  SlotDrum,
+} from '@/components/ui';
+import { StorySection } from './catalogue-shell';
+
+const deckItems = [
+  { title: 'Contracts', copy: 'One source of truth' },
+  { title: 'Transport', copy: 'HTTP, MCP and agents' },
+  { title: 'Interface', copy: 'Typed data to polished UI' },
+];
+const stages = ['Idea', 'Building', 'Shipping'];
+
+export function MotionStory() {
+  const [count, setCount] = useState(24);
+  const [stage, setStage] = useState(0);
+  return (
+    <div>
+      <StorySection title='Meaningful motion'>
+        <div className='grid gap-4 md:grid-cols-2'>
+          <Card>
+            <CardHeader>
+              <CardTitle>Delivery count</CardTitle>
+            </CardHeader>
+            <CardContent className='space-y-4'>
+              <AnimatedCounter className='text-4xl font-medium' value={count} suffix='%' />
+              <Button onClick={() => setCount((value) => (value + 13) % 101)}>Advance</Button>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Current stage</CardTitle>
+            </CardHeader>
+            <CardContent className='space-y-4'>
+              <SlotDrum
+                className='text-2xl font-medium'
+                items={stages}
+                activeIndex={stage}
+                getItemKey={(item) => item}
+                renderItem={(item) => item}
+              />
+              <Button onClick={() => setStage((value) => (value + 1) % stages.length)}>
+                Next stage
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </StorySection>
+      <StorySection title='Composed card deck'>
+        <div className='py-8'>
+          <CardDeck
+            items={deckItems}
+            overlap={-24}
+            rotationStep={4}
+            keyExtractor={(item) => item.title}
+            renderCard={(item) => (
+              <Card className='w-52 bg-card'>
+                <CardHeader>
+                  <CardTitle>{item.title}</CardTitle>
+                </CardHeader>
+                <CardContent className='text-sm text-muted-foreground'>{item.copy}</CardContent>
+              </Card>
+            )}
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/overlays-story.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { IconDots, IconSettings, IconTrash } from '@tabler/icons-react';
+import { useState } from 'react';
+import {
+  AdaptiveModal,
+  Button,
+  ConfirmationModal,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  toast,
+} from '@/components/ui';
+import { StorySection } from './catalogue-shell';
+
+export function OverlaysStory() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [notifications, setNotifications] = useState(true);
+
+  return (
+    <div>
+      <StorySection title='Adaptive surfaces'>
+        <div className='flex flex-wrap gap-3'>
+          <Button onClick={() => setModalOpen(true)}>Adaptive modal</Button>
+          <Button variant='destructive' onClick={() => setConfirmOpen(true)}>
+            Confirmation
+          </Button>
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button variant='outline'>Drawer</Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Project settings</DrawerTitle>
+                <DrawerDescription>A composable mobile-first surface.</DrawerDescription>
+              </DrawerHeader>
+              <div className='px-4 text-sm text-muted-foreground'>
+                Use drawers for contextual actions without replacing the current page.
+              </div>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Done</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </div>
+        <AdaptiveModal
+          isOpen={modalOpen}
+          onClose={() => setModalOpen(false)}
+          title='Adaptive modal'
+          mobileVariant='sheet'
+          footer={
+            <Button className='w-full' onClick={() => setModalOpen(false)}>
+              Save changes
+            </Button>
+          }
+        >
+          <div className='px-4 pb-6 text-sm text-muted-foreground'>
+            Centered on desktop, touch-friendly sheet on compact screens.
+          </div>
+        </AdaptiveModal>
+        <ConfirmationModal
+          isOpen={confirmOpen}
+          onClose={() => setConfirmOpen(false)}
+          onConfirm={() => {
+            setConfirmOpen(false);
+            toast.success('Action confirmed');
+          }}
+          title='Archive project?'
+          description='The project remains available in your history.'
+          confirmText='Archive'
+          variant='destructive'
+        />
+      </StorySection>
+
+      <StorySection title='Menus and contextual help'>
+        <div className='flex items-center gap-3'>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size='icon' variant='outline' aria-label='Open project menu'>
+                <IconDots />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='start'>
+              <DropdownMenuLabel>Project</DropdownMenuLabel>
+              <DropdownMenuItem>
+                <IconSettings /> Settings <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuCheckboxItem
+                checked={notifications}
+                onCheckedChange={setNotifications}
+              >
+                Notifications
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className='text-destructive'>
+                <IconTrash /> Archive
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant='ghost'>Why server cache?</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                It protects external rate limits and keeps rendering predictable.
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </StorySection>
+    </div>
+  );
+}