create-stitchkit 0.1.0

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

@@ -0,0 +1,82 @@
+'use client';
+
+import { IconCheck, IconCreditCard } from '@tabler/icons-react';
+import { useState } from 'react';
+import {
+  AdaptiveModal,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Field,
+  Input,
+} from '@/components/ui';
+
+export function PaymentShowcase() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Card className='max-w-lg'>
+        <CardHeader>
+          <div className='flex items-center justify-between'>
+            <div className='grid size-10 place-items-center rounded-xl bg-muted'>
+              <IconCreditCard />
+            </div>
+            <Badge>Secure checkout</Badge>
+          </div>
+          <CardTitle className='pt-4 text-2xl'>Complete your order</CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-5'>
+          <div className='rounded-xl bg-muted p-4'>
+            <div className='flex justify-between'>
+              <span className='text-muted-foreground'>Product foundation</span>
+              <span className='font-medium'>$99</span>
+            </div>
+          </div>
+          <div className='space-y-2 text-sm'>
+            {[
+              'Typed contract surface',
+              'Complete UI source',
+              'Production deployment profiles',
+            ].map((item) => (
+              <div className='flex items-center gap-2' key={item}>
+                <IconCheck className='text-success' size={17} />
+                {item}
+              </div>
+            ))}
+          </div>
+          <Button className='w-full' variant='primary' onClick={() => setOpen(true)}>
+            Continue to payment
+          </Button>
+          <p className='text-center text-xs text-muted-foreground'>
+            Presentation only. Connect your own provider contract.
+          </p>
+        </CardContent>
+      </Card>
+      <AdaptiveModal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        title='Checkout details'
+        desktopWidth='md'
+        mobileVariant='sheet'
+        footer={
+          <Button className='w-full' variant='primary' onClick={() => setOpen(false)}>
+            Confirm example order
+          </Button>
+        }
+      >
+        <div className='grid gap-4 p-4 pt-1'>
+          <Field label='Billing email' htmlFor='checkout-email'>
+            <Input id='checkout-email' type='email' placeholder='builder@example.com' />
+          </Field>
+          <div className='flex justify-between rounded-xl bg-muted p-4 text-sm'>
+            <span>Product foundation</span>
+            <strong>$99</strong>
+          </div>
+        </div>
+      </AdaptiveModal>
+    </>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { LanguageSwitcher, ThemeToggle } from '@/components/system-controls';
+import { Button } from '@/components/ui';
+import { AccountShowcase } from './account-showcase';
+import { AdminShowcase } from './admin-showcase';
+import { StorySection } from './catalogue-shell';
+import { CodeFoundationSection } from './code-foundation';
+import { ImagePreloader } from './image-preloader';
+import {
+  AudienceSection,
+  BuilderSection,
+  DemoModal,
+  FrontendSection,
+  LearningSection,
+  ProblemsSection,
+  TemplatePreviewSection,
+  WhySection,
+} from './landing-sections';
+import {
+  FeatureGrid,
+  HeroSection,
+  LandingFooter,
+  LandingHeader,
+  PortfolioSection,
+  PricingSection,
+} from './landing-showcase';
+import { PaymentShowcase } from './payment-showcase';
+
+export function BlocksStory() {
+  return (
+    <div>
+      <StorySection title='Editorial landing system'>
+        <LandingHeader
+          actions={
+            <>
+              <LanguageSwitcher />
+              <ThemeToggle />
+              <Button size='sm'>Open app</Button>
+            </>
+          }
+        />
+        <HeroSection />
+        <ProblemsSection />
+        <BuilderSection />
+        <WhySection />
+        <CodeFoundationSection />
+        <FeatureGrid />
+        <AudienceSection />
+        <LearningSection />
+        <TemplatePreviewSection />
+        <FrontendSection />
+        <PortfolioSection />
+        <PricingSection />
+        <DemoModal />
+        <LandingFooter />
+        <ImagePreloader sources={['/theme-light.svg', '/theme-dark.svg']} />
+      </StorySection>
+      <StorySection title='Application shell'>
+        <AdminShowcase />
+      </StorySection>
+      <StorySection title='Account flows'>
+        <AccountShowcase />
+      </StorySection>
+      <StorySection title='Checkout presentation'>
+        <PaymentShowcase />
+      </StorySection>
+    </div>
+  );
+}

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

@@ -0,0 +1,267 @@
+'use client';
+
+import { IconCheck, IconMail } from '@tabler/icons-react';
+import { ThemedImage } from '@wrksz/themes/client/themed-image';
+import { useState } from 'react';
+import { BrandMark } from '@/components/brand-mark';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CopyableText,
+  Field,
+  HandDrawnCheck,
+  HandDrawnX,
+  Input,
+  Label,
+  OtpInput,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  Slider,
+  Spinner,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  TriStateCheckbox,
+  toast,
+} from '@/components/ui';
+import { StorySection } from './catalogue-shell';
+
+type PrimitiveCategory = 'actions' | 'forms' | 'feedback' | 'media';
+
+export function PrimitivesStory({ category }: { category: PrimitiveCategory }) {
+  const [otp, setOtp] = useState('');
+  const [enabled, setEnabled] = useState(true);
+
+  return (
+    <div>
+      {category === 'actions' ? (
+        <StorySection title='Actions and status'>
+          <div className='flex flex-wrap gap-3'>
+            <Button>default</Button>
+            <Button variant='primary'>primary</Button>
+            <Button variant='outline'>outline</Button>
+            <Button variant='ghost'>ghost</Button>
+            <Button variant='destructive'>destructive</Button>
+            <Button loading>Working</Button>
+            <Button size='icon' aria-label='Quick action'>
+              <BrandMark className='size-5' />
+            </Button>
+          </div>
+          <div className='flex flex-wrap gap-2'>
+            <Badge icon={<IconCheck />}>default</Badge>
+            <Badge icon={<IconCheck />} variant='primary'>
+              primary
+            </Badge>
+            <Badge icon={<IconCheck />} variant='secondary'>
+              secondary
+            </Badge>
+            <Badge icon={<IconCheck />} variant='outline'>
+              outline
+            </Badge>
+            <Badge icon={<IconCheck />} variant='success'>
+              success
+            </Badge>
+            <Badge icon={<IconCheck />} variant='warning'>
+              warning
+            </Badge>
+            <Badge icon={<IconCheck />} variant='destructive'>
+              destructive
+            </Badge>
+          </div>
+        </StorySection>
+      ) : null}
+
+      {category === 'forms' ? (
+        <StorySection title='Forms'>
+          <Card className='w-full'>
+            <CardHeader>
+              <CardTitle>Project details</CardTitle>
+              <CardDescription>Reusable accessible form primitives.</CardDescription>
+            </CardHeader>
+            <CardContent className='grid gap-4 sm:grid-cols-2'>
+              <Field label='Project name' htmlFor='story-name'>
+                <Input id='story-name' placeholder='Project atlas' />
+              </Field>
+              <Field label='Contact' htmlFor='story-email'>
+                <Input id='story-email' type='email' placeholder='you@example.com' />
+              </Field>
+              <div className='sm:col-span-2'>
+                <Field label='Description' htmlFor='story-description'>
+                  <Textarea id='story-description' placeholder='What are you building?' />
+                </Field>
+              </div>
+              <div className='space-y-2'>
+                <Label htmlFor='story-select'>Stage</Label>
+                <Select defaultValue='building'>
+                  <SelectTrigger id='story-select'>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Planning</SelectLabel>
+                      <SelectItem value='idea'>Idea</SelectItem>
+                    </SelectGroup>
+                    <SelectSeparator />
+                    <SelectGroup>
+                      <SelectLabel>Delivery</SelectLabel>
+                      <SelectItem value='building'>Building</SelectItem>
+                      <SelectItem value='shipping'>Shipping</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className='space-y-3'>
+                <Label htmlFor='story-progress'>Progress</Label>
+                <Slider
+                  id='story-progress'
+                  aria-label='Project progress'
+                  defaultValue={[68]}
+                  max={100}
+                />
+              </div>
+              <Checkbox defaultChecked label='Public roadmap' />
+              <div className='flex items-center gap-2 text-sm'>
+                <Switch id='story-realtime' checked={enabled} onCheckedChange={setEnabled} />
+                <Label htmlFor='story-realtime'>Realtime updates</Label>
+              </div>
+              <TriStateCheckbox checked='indeterminate' label='Select visible rows' />
+            </CardContent>
+          </Card>
+        </StorySection>
+      ) : null}
+
+      {category === 'feedback' ? (
+        <StorySection title='Identity, verification and feedback'>
+          <div className='grid gap-6 md:grid-cols-2'>
+            <Card>
+              <CardContent className='flex items-center gap-4 pt-4'>
+                <Avatar>
+                  <AvatarImage src='https://github.com/github.png' alt='Example user avatar' />
+                  <AvatarFallback>PB</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className='font-medium'>Product builder</p>
+                  <CopyableText value='builder@example.com'>
+                    <span className='flex items-center gap-1'>
+                      <IconMail size={14} /> builder@example.com
+                    </span>
+                  </CopyableText>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className='pt-4 text-sm text-muted-foreground'>
+                Card content
+              </CardContent>
+              <CardFooter>
+                <Button
+                  size='sm'
+                  variant='outline'
+                  onClick={() => toast.info('Project opened')}
+                >
+                  Open project
+                </Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardContent className='space-y-4 pt-4'>
+                <OtpInput value={otp} onChange={setOtp} />
+                <div className='grid grid-cols-2 gap-2'>
+                  <Button onClick={() => toast.success('Changes saved')}>Success toast</Button>
+                  <Button variant='outline' onClick={() => toast.info('Sync is running')}>
+                    Info toast
+                  </Button>
+                  <Button variant='outline' onClick={() => toast.warning('Review required')}>
+                    Warning toast
+                  </Button>
+                  <Button variant='destructive' onClick={() => toast.error('Action failed')}>
+                    Error toast
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+          <div className='flex items-center gap-5'>
+            <HandDrawnCheck className='size-12 text-success' />
+            <HandDrawnX className='size-12 text-destructive' />
+            <Spinner />
+            <Skeleton className='h-10 w-40' />
+          </div>
+        </StorySection>
+      ) : null}
+
+      {category === 'media' ? (
+        <StorySection title='Tabs and theme-aware media'>
+          <Tabs defaultValue='preview'>
+            <TabsList>
+              <TabsTrigger value='preview'>Preview</TabsTrigger>
+              <TabsTrigger value='details'>Details</TabsTrigger>
+            </TabsList>
+            <TabsContent value='preview' className='pt-4'>
+              <ThemedImage
+                src={{ light: '/theme-light.svg', dark: '/theme-dark.svg' }}
+                alt='Theme-aware application shell preview'
+                width={640}
+                height={360}
+                className='w-full max-w-2xl rounded-2xl'
+              />
+            </TabsContent>
+            <TabsContent value='details' className='pt-4 text-sm text-muted-foreground'>
+              The same component switches assets with semantic theme state.
+            </TabsContent>
+          </Tabs>
+        </StorySection>
+      ) : null}
+      {category === 'media' ? (
+        <StorySection title='Semantic table primitives'>
+          <div className='overflow-hidden rounded-xl border border-border'>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Surface</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>HTTP</TableCell>
+                  <TableCell>Ready</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>MCP</TableCell>
+                  <TableCell>Ready</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        </StorySection>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+import type { StoryId } from '@/lib/seo/pages';
+import { ComponentsStory } from './components-story';
+import { BlocksStory } from './presentation-story';
+import { ThemeStory } from './theme-story';
+
+export function StoryPage({ story }: { story: StoryId }) {
+  if (story === 'components') {
+    return <ComponentsStory />;
+  }
+  if (story === 'themes') {
+    return <ThemeStory />;
+  }
+  return <BlocksStory />;
+}

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

@@ -0,0 +1,208 @@
+'use client';
+
+import { IconCheck, IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react';
+import { ClientThemeProvider } from '@wrksz/themes/client/provider';
+import { ThemedImage } from '@wrksz/themes/client/themed-image';
+import { useHydrated } from '@wrksz/themes/client/use-hydrated';
+import { useTheme } from '@wrksz/themes/client/use-theme';
+import { useThemeEffect } from '@wrksz/themes/client/use-theme-effect';
+import { useThemeValue } from '@wrksz/themes/client/use-theme-value';
+import { useCallback, useState } from 'react';
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui';
+import { type AppTheme, appThemes } from '@/theme/config';
+import {
+  runThemeTransition,
+  type ThemeTransitionConfig,
+  type ThemeTransitionStyle,
+} from '@/theme/transition';
+import { StorySection } from './catalogue-shell';
+
+type ThemeSelection = AppTheme | 'system';
+
+const themeChoices = [
+  { value: 'light', label: 'Light', icon: IconSun },
+  { value: 'dark', label: 'Dark', icon: IconMoon },
+  { value: 'system', label: 'System', icon: IconDeviceDesktop },
+] satisfies ReadonlyArray<{
+  value: ThemeSelection;
+  label: string;
+  icon: typeof IconSun;
+}>;
+
+const themeImages = {
+  light: '/theme-light.svg',
+  dark: '/theme-dark.svg',
+} satisfies Record<AppTheme, string>;
+
+const transitionStyles = [
+  { value: 'crossfade', label: 'Crossfade' },
+  { value: 'radial', label: 'Radial reveal' },
+] satisfies ReadonlyArray<{ value: ThemeTransitionStyle; label: string }>;
+
+const transitionDurations = [150, 250, 400];
+
+function ScopedThemeCard({ theme }: { theme: AppTheme }) {
+  const { resolvedTheme } = useTheme<AppTheme>();
+
+  return (
+    <div
+      id={`theme-scope-${theme}`}
+      className='rounded-2xl border border-border bg-background p-5 text-foreground'
+    >
+      <div className='flex items-center justify-between gap-4'>
+        <div>
+          <p className='font-medium'>{theme === 'light' ? 'Forced light' : 'Forced dark'}</p>
+          <p className='mt-1 text-sm text-muted-foreground'>Independent client provider</p>
+        </div>
+        <Badge variant='secondary'>{resolvedTheme ?? 'hydrating'}</Badge>
+      </div>
+    </div>
+  );
+}
+
+export function ThemeStoryClient({ serverTheme }: { serverTheme: ThemeSelection }) {
+  const hydrated = useHydrated();
+  const { theme, resolvedTheme, systemTheme, setTheme } = useTheme<AppTheme>();
+  const surfaceLabel = useThemeValue({
+    light: 'Paper surface',
+    dark: 'Midnight surface',
+    default: 'Resolving surface',
+  });
+  const [lastChange, setLastChange] = useState('No client change yet');
+  const [transitionStyle, setTransitionStyle] = useState<ThemeTransitionStyle>('crossfade');
+  const [transitionDuration, setTransitionDuration] = useState(250);
+  const transitionConfig = {
+    style: transitionStyle,
+    durationMs: transitionDuration,
+    easing: 'ease-out',
+  } satisfies ThemeTransitionConfig;
+  const captureThemeChange = useCallback(
+    (selected: string | undefined, resolved: string | undefined) => {
+      setLastChange(`${selected ?? 'unknown'} → ${resolved ?? 'unknown'}`);
+    },
+    [],
+  );
+  useThemeEffect(captureThemeChange);
+
+  const selectTheme = (selection: ThemeSelection, trigger: HTMLButtonElement) => {
+    const bounds = trigger.getBoundingClientRect();
+    runThemeTransition(() => setTheme(selection), transitionConfig, {
+      x: bounds.left + bounds.width / 2,
+      y: bounds.top + bounds.height / 2,
+    });
+  };
+
+  return (
+    <div>
+      <StorySection title='Native transition lab'>
+        <div className='grid gap-5 rounded-2xl border border-border bg-card p-5 sm:grid-cols-2'>
+          <div>
+            <p className='text-sm font-medium'>Effect</p>
+            <div className='mt-3 flex flex-wrap gap-2'>
+              {transitionStyles.map((option) => (
+                <Button
+                  key={option.value}
+                  size='sm'
+                  variant={transitionStyle === option.value ? 'primary' : 'outline'}
+                  aria-pressed={transitionStyle === option.value}
+                  onClick={() => setTransitionStyle(option.value)}
+                >
+                  {option.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+          <div>
+            <p className='text-sm font-medium'>Duration</p>
+            <div className='mt-3 flex flex-wrap gap-2'>
+              {transitionDurations.map((duration) => (
+                <Button
+                  key={duration}
+                  size='sm'
+                  variant={transitionDuration === duration ? 'primary' : 'outline'}
+                  aria-pressed={transitionDuration === duration}
+                  onClick={() => setTransitionDuration(duration)}
+                >
+                  {duration} ms
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <p className='text-sm text-muted-foreground'>
+          Theme state still belongs to @wrksz/themes. This page only configures the native
+          snapshot animation used by the controls below.
+        </p>
+      </StorySection>
+
+      <StorySection title='Global typed theme state'>
+        <div className='grid gap-3 sm:grid-cols-3'>
+          {themeChoices.map((choice) => (
+            <Button
+              key={choice.value}
+              variant={theme === choice.value ? 'primary' : 'outline'}
+              aria-pressed={theme === choice.value}
+              onClick={(event) => selectTheme(choice.value, event.currentTarget)}
+            >
+              <choice.icon />
+              {choice.label}
+              {theme === choice.value ? <IconCheck aria-hidden /> : null}
+            </Button>
+          ))}
+        </div>
+        <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-4'>
+          {[
+            ['Selected', hydrated ? (theme ?? 'unknown') : 'hydrating'],
+            ['Resolved', hydrated ? (resolvedTheme ?? 'unknown') : 'hydrating'],
+            ['Operating system', hydrated ? (systemTheme ?? 'unknown') : 'hydrating'],
+            ['Server cookie', serverTheme],
+          ].map(([label, value]) => (
+            <Card
+              key={label}
+              data-testid={`theme-state-${label.toLowerCase().replaceAll(' ', '-')}`}
+            >
+              <CardHeader>
+                <CardTitle className='text-sm text-muted-foreground'>{label}</CardTitle>
+              </CardHeader>
+              <CardContent className='font-medium'>{value}</CardContent>
+            </Card>
+          ))}
+        </div>
+        <p className='text-sm text-muted-foreground'>
+          {surfaceLabel} · Last observed change: {lastChange}
+        </p>
+      </StorySection>
+
+      <StorySection title='Theme-aware media'>
+        <ThemedImage
+          src={themeImages}
+          alt='Application shell selected by the resolved theme'
+          width={1280}
+          height={720}
+          className='w-full rounded-2xl border border-border'
+        />
+      </StorySection>
+
+      <StorySection title='Independent scoped themes'>
+        <div className='grid gap-4 md:grid-cols-2'>
+          <ClientThemeProvider<AppTheme>
+            themes={appThemes}
+            forcedTheme='light'
+            target='#theme-scope-light'
+            storage='none'
+          >
+            <ScopedThemeCard theme='light' />
+          </ClientThemeProvider>
+          <ClientThemeProvider<AppTheme>
+            themes={appThemes}
+            forcedTheme='dark'
+            target='#theme-scope-dark'
+            storage='none'
+          >
+            <ScopedThemeCard theme='dark' />
+          </ClientThemeProvider>
+        </div>
+      </StorySection>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { getTheme } from '@wrksz/themes/next';
+import { appThemes, themeStorageKey } from '@/theme/config';
+import { ThemeStoryClient } from './theme-story-client';
+
+export async function ThemeStory() {
+  const serverTheme = await getTheme({
+    themes: appThemes,
+    defaultTheme: 'system',
+    storageKey: themeStorageKey,
+  });
+
+  return <ThemeStoryClient serverTheme={serverTheme} />;
+}

package/template/packages/frontend/src/app/[locale]/ui/layout.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { CatalogueShell } from './_catalogue';
+
+export default function UiLayout({ children }: { children: ReactNode }) {
+  return <CatalogueShell>{children}</CatalogueShell>;
+}

package/template/packages/frontend/src/app/[locale]/ui/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from '@/i18n/navigation';
+
+export default async function UiCataloguePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  redirect({ href: '/ui/components', locale });
+}