create-stitchkit 0.1.0

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

@@ -0,0 +1,101 @@
+'use client';
+
+import {
+  IconActivity,
+  IconChartBar,
+  IconFileText,
+  IconLayoutDashboard,
+  IconUsers,
+} from '@tabler/icons-react';
+import { enUS } from 'date-fns/locale';
+import {
+  AreaChart,
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Sidebar,
+} from '@/components/ui';
+
+const navigation = [
+  { name: 'Overview', href: '/ui/blocks', icon: IconLayoutDashboard },
+  { name: 'Content', href: '/ui/blocks', icon: IconFileText },
+  { name: 'People', href: '/ui/blocks', icon: IconUsers },
+];
+
+const chartData = [
+  { day: '2026-08-01', total: 12 },
+  { day: '2026-08-02', total: 18 },
+  { day: '2026-08-03', total: 15 },
+  { day: '2026-08-04', total: 27 },
+  { day: '2026-08-05', total: 32 },
+];
+
+const activity = [
+  ['Deployment completed', '2 minutes ago'],
+  ['Project contract updated', '18 minutes ago'],
+  ['New collaborator joined', '1 hour ago'],
+];
+
+export function AdminShowcase() {
+  return (
+    <div className='relative flex min-h-[620px] overflow-hidden rounded-2xl border border-border bg-background'>
+      <Sidebar navigation={navigation} logo='Workspace' mobileBreakpoint='md' />
+      <div className='min-w-0 flex-1 p-5 md:p-8'>
+        <div className='mb-8 flex items-center justify-between'>
+          <div>
+            <p className='text-sm text-muted-foreground'>Dashboard</p>
+            <h2 className='text-2xl font-medium'>Overview</h2>
+          </div>
+          <Badge variant='success'>Live</Badge>
+        </div>
+        <div className='grid gap-3 sm:grid-cols-3'>
+          {[
+            { label: 'Requests', value: '12.8k', icon: IconActivity },
+            { label: 'Users', value: '1,284', icon: IconUsers },
+            { label: 'Conversion', value: '18.4%', icon: IconChartBar },
+          ].map((stat) => (
+            <Card key={stat.label}>
+              <CardContent className='flex items-start justify-between pt-4'>
+                <div>
+                  <p className='text-sm text-muted-foreground'>{stat.label}</p>
+                  <p className='mt-2 text-2xl font-medium'>{stat.value}</p>
+                </div>
+                <stat.icon className='text-muted-foreground' />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <Card className='mt-4'>
+          <CardHeader>
+            <CardTitle>Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <AreaChart
+              data={chartData}
+              areas={[{ key: 'total', label: 'Requests', color: 'var(--chart-1)' }]}
+              dateLocale={enUS}
+            />
+          </CardContent>
+        </Card>
+        <Card className='mt-4'>
+          <CardHeader>
+            <CardTitle>Activity feed</CardTitle>
+          </CardHeader>
+          <CardContent className='divide-y divide-border'>
+            {activity.map(([title, time]) => (
+              <div
+                className='flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0'
+                key={title}
+              >
+                <span className='text-sm'>{title}</span>
+                <span className='text-xs text-muted-foreground'>{time}</span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/catalogue-navigation.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { IconArrowLeft, IconBox, IconLayoutDashboard, IconPalette } from '@tabler/icons-react';
+import { useLocale } from 'next-intl';
+import { LanguageSwitcher, ThemeToggle } from '@/components/system-controls';
+import { buttonVariants, Sidebar } from '@/components/ui';
+import { LocaleSchema } from '@/i18n/locales';
+import { Link } from '@/i18n/navigation';
+import { getSeoPage } from '@/lib/seo/pages';
+
+export function CatalogueNavigation() {
+  const locale = LocaleSchema.parse(useLocale());
+  const navigation = [
+    {
+      name: getSeoPage('components', locale).title,
+      href: '/ui/components',
+      icon: IconBox,
+    },
+    {
+      name: getSeoPage('themes', locale).title,
+      href: '/ui/themes',
+      icon: IconPalette,
+    },
+    {
+      name: getSeoPage('blocks', locale).title,
+      href: '/ui/blocks',
+      icon: IconLayoutDashboard,
+    },
+  ];
+  return (
+    <Sidebar
+      collapsible={false}
+      className='top-5 max-h-[calc(100dvh-2.5rem)]'
+      footer={
+        <div className='flex items-center justify-between gap-2 border-t border-border px-1 pt-3'>
+          <Link
+            aria-label='Back to starter home'
+            className={buttonVariants({ variant: 'ghost', size: 'icon' })}
+            href='/'
+            title='Back to starter home'
+          >
+            <IconArrowLeft />
+          </Link>
+          <div className='flex items-center gap-2'>
+            <LanguageSwitcher />
+            <ThemeToggle />
+          </div>
+        </div>
+      }
+      navigation={navigation}
+      logo='UI system'
+      logoHref='/ui/components'
+      variant='floating'
+    />
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/catalogue-shell.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { CatalogueNavigation } from './catalogue-navigation';
+
+export function CatalogueShell({ children }: { children: ReactNode }) {
+  return (
+    <div className='relative flex h-dvh flex-col overflow-hidden bg-background'>
+      <CatalogueNavigation />
+      <main
+        className='min-h-0 flex-1 overflow-y-auto overscroll-contain'
+        data-testid='catalogue-content'
+      >
+        <div className='mx-auto w-full max-w-[96rem] px-5 py-7 pt-16 lg:pl-[18rem] lg:pr-8 lg:pt-10'>
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export function StoryHeader({
+  title,
+  description,
+  eyebrow,
+}: {
+  title: string;
+  description: string;
+  eyebrow: string;
+}) {
+  return (
+    <div className='mb-7 max-w-3xl'>
+      <p className='text-sm text-muted-foreground'>{eyebrow}</p>
+      <h1 className='mt-2 font-display text-4xl font-medium tracking-tight sm:text-5xl'>
+        {title}
+      </h1>
+      <p className='mt-3 text-muted-foreground'>{description}</p>
+    </div>
+  );
+}
+
+export function StorySection({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <details className='group mb-5 rounded-2xl border border-border bg-card/45' open>
+      <summary className='flex list-none items-center justify-between px-5 py-4 text-lg font-medium marker:hidden'>
+        {title}
+        <span className='text-muted-foreground group-open:hidden'>+</span>
+        <span className='hidden text-muted-foreground group-open:inline'>−</span>
+      </summary>
+      <section className='space-y-5 border-t border-border p-5'>{children}</section>
+    </details>
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/code-foundation.tsx

@@ -0,0 +1,35 @@
+import { codeToHtml } from 'shiki';
+
+const example = `const snapshot = await api.repository.read();
+
+await api.repository.refresh();
+// The same operations are available to HTTP, MCP, agents and CLI.`;
+
+export async function CodeFoundationSection() {
+  const html = await codeToHtml(example, {
+    lang: 'ts',
+    themes: {
+      light: 'github-light-high-contrast',
+      dark: 'github-dark-high-contrast',
+    },
+    defaultColor: false,
+  });
+
+  return (
+    <section className='grid gap-8 py-14 md:grid-cols-[0.8fr_1.2fr] md:items-center'>
+      <div>
+        <p className='text-sm text-muted-foreground'>Inspect the foundation</p>
+        <h2 className='mt-2 text-3xl font-medium'>The useful path stays short</h2>
+        <p className='mt-3 text-muted-foreground'>
+          Application code calls a typed client while validation, transport and observability
+          remain framework-owned.
+        </p>
+      </div>
+      <div
+        className='overflow-auto rounded-2xl border border-border bg-card p-5 text-sm [&_pre]:bg-transparent!'
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki renders a static authored code sample.
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui';
+import { DataStory } from './data-story';
+import { MotionStory } from './motion-story';
+import { OverlaysStory } from './overlays-story';
+import { PrimitivesStory } from './primitives-story';
+
+const componentTabs = [
+  { value: 'actions', label: 'Actions' },
+  { value: 'forms', label: 'Forms' },
+  { value: 'feedback', label: 'Feedback' },
+  { value: 'media', label: 'Media & tables' },
+  { value: 'overlays', label: 'Overlays' },
+  { value: 'data', label: 'Data' },
+  { value: 'motion', label: 'Motion' },
+];
+
+export function ComponentsStory() {
+  return (
+    <Tabs defaultValue='actions' className='gap-5'>
+      <div className='overflow-x-auto overscroll-x-contain pb-1'>
+        <TabsList className='min-w-max'>
+          {componentTabs.map((tab) => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </div>
+      <TabsContent value='actions'>
+        <PrimitivesStory category='actions' />
+      </TabsContent>
+      <TabsContent value='forms'>
+        <PrimitivesStory category='forms' />
+      </TabsContent>
+      <TabsContent value='feedback'>
+        <PrimitivesStory category='feedback' />
+      </TabsContent>
+      <TabsContent value='media'>
+        <PrimitivesStory category='media' />
+      </TabsContent>
+      <TabsContent value='overlays'>
+        <OverlaysStory />
+      </TabsContent>
+      <TabsContent value='data'>
+        <DataStory />
+      </TabsContent>
+      <TabsContent value='motion'>
+        <MotionStory />
+      </TabsContent>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,126 @@
+'use client';
+
+import { IconActivity, IconArchive, IconFolders } from '@tabler/icons-react';
+import { createColumnHelper } from '@tanstack/react-table';
+import { useState } from 'react';
+import { Badge, Button } from '@/components/ui';
+import {
+  DataTable,
+  DualInlineStat,
+  InlineStat,
+  SortableHeader,
+  TableError,
+  TableFilters,
+} from '@/features/data-table';
+import type { dataTableFeatures } from '@/features/data-table/table-features';
+import { StorySection } from './catalogue-shell';
+
+interface CatalogueProject {
+  name: string;
+  stage: string;
+  owner: string;
+  updatedAt: string;
+}
+
+const rows: CatalogueProject[] = [
+  { name: 'Stitchkit', stage: 'Shipping', owner: 'Framework', updatedAt: '2026-08-08' },
+  { name: 'Agent workspace', stage: 'Building', owner: 'Product', updatedAt: '2026-08-07' },
+  { name: 'Device control', stage: 'Idea', owner: 'Research', updatedAt: '2026-08-02' },
+  {
+    name: 'Release observatory',
+    stage: 'Shipping',
+    owner: 'Platform',
+    updatedAt: '2026-08-01',
+  },
+  { name: 'Contract explorer', stage: 'Building', owner: 'Framework', updatedAt: '2026-07-31' },
+  { name: 'Runtime bench', stage: 'Idea', owner: 'Research', updatedAt: '2026-07-30' },
+];
+
+const columnHelper = createColumnHelper<typeof dataTableFeatures, CatalogueProject>();
+const columns = columnHelper.columns([
+  columnHelper.accessor('name', {
+    header: ({ column }) => <SortableHeader column={column}>Project</SortableHeader>,
+  }),
+  columnHelper.accessor('stage', {
+    header: 'Stage',
+    cell: ({ row }) => <Badge size='sm'>{row.original.stage}</Badge>,
+  }),
+  columnHelper.accessor('owner', { header: 'Owner' }),
+  columnHelper.accessor('updatedAt', { header: 'Updated' }),
+]);
+
+const filters = [
+  {
+    key: 'stage',
+    placeholder: 'Stage',
+    allLabel: 'All stages',
+    options: [
+      { value: 'Building', label: 'Building' },
+      { value: 'Shipping', label: 'Shipping' },
+    ],
+  },
+];
+
+const displayStates: Array<'ready' | 'loading' | 'empty'> = ['ready', 'loading', 'empty'];
+
+export function DataStory() {
+  const [values, setValues] = useState<Record<string, string | undefined>>({});
+  const [state, setState] = useState<'ready' | 'loading' | 'empty'>('ready');
+  const filteredRows = rows.filter((row) => !values.stage || row.stage === values.stage);
+  return (
+    <div>
+      <StorySection title='Operational statistics'>
+        <div className='grid gap-3 sm:grid-cols-3'>
+          <InlineStat icon={IconFolders} label='Projects' value='24' />
+          <InlineStat icon={IconActivity} label='Active' value='18' />
+          <DualInlineStat
+            icon={IconArchive}
+            label='Delivery'
+            items={[
+              { value: '12', suffix: 'shipped', dotColor: 'bg-success' },
+              { value: '3', suffix: 'paused', dotColor: 'bg-warning' },
+            ]}
+          />
+        </div>
+      </StorySection>
+      <StorySection title='Data table'>
+        <div className='overflow-hidden rounded-xl border border-border'>
+          <div className='flex flex-wrap items-center justify-between gap-3 border-b border-border p-3'>
+            <TableFilters
+              filters={filters}
+              values={values}
+              onChange={(key, value) => setValues((current) => ({ ...current, [key]: value }))}
+              onClear={() => setValues({})}
+            />
+            <div className='flex gap-1'>
+              {displayStates.map((value) => (
+                <Button
+                  key={value}
+                  size='sm'
+                  variant={state === value ? 'default' : 'ghost'}
+                  onClick={() => setState(value)}
+                >
+                  {value}
+                </Button>
+              ))}
+            </div>
+          </div>
+          <div className='h-[420px]'>
+            <DataTable<CatalogueProject>
+              columns={columns}
+              data={state === 'empty' ? [] : filteredRows}
+              isLoading={state === 'loading'}
+              searchKey='name'
+              searchPlaceholder='Search projects'
+            />
+          </div>
+        </div>
+      </StorySection>
+      <StorySection title='Failure state'>
+        <div className='h-28 rounded-xl border border-border'>
+          <TableError error={new Error('Example typed transport error')} entity='projects' />
+        </div>
+      </StorySection>
+    </div>
+  );
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/image-preloader.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { preload } from 'react-dom';
+
+export function ImagePreloader({ sources }: { sources: string[] }) {
+  for (const source of sources) preload(source, { as: 'image' });
+  return null;
+}

package/template/packages/frontend/src/app/[locale]/ui/_catalogue/index.ts

@@ -0,0 +1,3 @@
+export { isStoryId, type StoryId, storyIds } from '@/lib/seo/pages';
+export { CatalogueShell, StoryHeader, StorySection } from './catalogue-shell';
+export { StoryPage } from './story-page';