` requests load the application, while asset requests retain normal
404 behavior. No environment variables are needed.
Add `stetkit.com` in the Vercel project's domain settings, then apply the DNS
@@ -101,3 +122,35 @@ The record player is an explicitly imaginary interaction and plays no audio.
**Pause ink** stops boil and future entrance motion; reduced-motion preferences
apply automatically. **To the bottom** is a normal anchor to the collection's end.
There is no loading trigger, endless mode, or add-more control.
+
+## Showcase contracts and verification
+
+`src/showcase/scenarios.ts` owns demo-only intent, perspective and plan metadata.
+Fixtures mount explicit React adapters with shared option objects. Plans are never
+interpreted at runtime. The source panel imports those exact component files as
+text. The Frameworks panel reads generated canonical templates, not another API
+catalog. `tests/agent/showcase.test.ts` validates every bundled plan and its source
+refs; existing template checks compile examples for all five frameworks.
+
+`tests/showcase.spec.ts` covers annotation toggles, live controls, unchanged fixture
+size, distinct viewpoint surfaces and tutorial state preservation, conditional findings,
+canonical code inspection, mobile overflow, automated accessibility and fixed-seed
+viewport screenshots. Screenshots include body overlays. Run without
+`--update-snapshots` to check reviewed baselines. After an intentional visual change,
+inspect desktop/mobile images before accepting replacements.
+
+CI installs both dependency sets, checks generated drift, validates plans, compiles
+canonical templates, builds the static site and runs browser checks. It uploads
+`website/dist` as an ordinary static artifact. Existing Vercel rewrites support
+deep links without a backend. No hosting project or production deployment is
+created by these configuration files.
+
+The playground's pixel nudges are unreleased checkout features; published 0.1.0
+users should query their installed capabilities and omit these options. Use-case
+plans use existing 0.1.0 primitives/options.
+
+Website screenshot baselines use the Ubuntu 24.04 CI runner and the lockfile-pinned
+Playwright browser. Other Linux distributions can render text differently even
+with bundled fonts. When updating baselines, review the CI actual/diff images in
+`website-test-results` and verify the updated images in CI; do not loosen the pixel
+threshold to accommodate an unreviewed difference.
diff --git a/website/public/sitemap.xml b/website/public/sitemap.xml
index bb055f7..ce39eaf 100644
--- a/website/public/sitemap.xml
+++ b/website/public/sitemap.xml
@@ -3,4 +3,12 @@
https://stetkit.com/
https://stetkit.com/docs
https://stetkit.com/playground
+ https://stetkit.com/use-cases
+ https://stetkit.com/agent-workflow
+ https://stetkit.com/use-cases/workspace-deletion
+ https://stetkit.com/use-cases/security-handoff
+ https://stetkit.com/use-cases/form-review
+ https://stetkit.com/use-cases/feature-showcase
+ https://stetkit.com/use-cases/guided-tutorial
+ https://stetkit.com/use-cases/live-documentation
diff --git a/website/src/App.tsx b/website/src/App.tsx
index a8ebf03..c302e20 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -10,6 +10,8 @@ import { Icon } from './components/Icon';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { PlaygroundPage } from './pages/PlaygroundPage';
+import { UseCases } from './pages/UseCases';
+import { AgentWorkflow } from './pages/AgentWorkflow';
import { usePageMeta } from './usePageMeta';
function NotFound() {
usePageMeta('Page not found — stet', '/404');
@@ -35,8 +37,30 @@ const playgroundRoute = createRoute({
path: '/playground',
component: PlaygroundPage,
});
+const casesRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/use-cases',
+ component: UseCases,
+});
+const caseRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/use-cases/$scenario',
+ component: UseCases,
+});
+const workflowRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/agent-workflow',
+ component: AgentWorkflow,
+});
const router = createRouter({
- routeTree: rootRoute.addChildren([indexRoute, docsRoute, playgroundRoute]),
+ routeTree: rootRoute.addChildren([
+ indexRoute,
+ docsRoute,
+ playgroundRoute,
+ casesRoute,
+ caseRoute,
+ workflowRoute,
+ ]),
scrollRestoration: true,
});
declare module '@tanstack/react-router' {
diff --git a/website/src/components/Code.tsx b/website/src/components/Code.tsx
index a97005b..6c3b113 100644
--- a/website/src/components/Code.tsx
+++ b/website/src/components/Code.tsx
@@ -1,6 +1,7 @@
+/* oxlint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/prefer-tag-over-role -- Preformatted code is a keyboard-scrollable region; preserve whitespace semantics and keyboard access. */
export function Code({ text }: { text: string }) {
return (
-
+
{text
.split(
diff --git a/website/src/components/FrameworkCode.tsx b/website/src/components/FrameworkCode.tsx
index 9a72ba9..b403fd8 100644
--- a/website/src/components/FrameworkCode.tsx
+++ b/website/src/components/FrameworkCode.tsx
@@ -2,12 +2,13 @@ import { useState } from 'react';
import { Code } from './Code';
import { CopyButton } from './CopyButton';
import { Icon } from './Icon';
+import { canonicalCode } from '../showcase/canonical';
const snippets = {
- React: `import { useRef } from "react";\nimport { Circle } from "@funsaized/stet/react";\nimport "@funsaized/stet/style.css";\n\nexport default function LittleWin() {\n const button = useRef(null);\n\n return (\n <>\n \n \n \n );\n}`,
- JavaScript: `import { circle } from "@funsaized/stet";\nimport "@funsaized/stet/style.css";\n\nconst button = document.querySelector("#ship");\nconst sketch = circle(button, {\n stroke: "#c84935",\n});\n\n// A fresh sketch, whenever you like.\nsketch.resketch();\n\n// Clean up when the element is removed.\nsketch.destroy();`,
- Vue: `\n\n\n \n`,
- Svelte: `\n\n`,
- Angular: `import { Component } from "@angular/core";\nimport { StetCircleDirective } from "@funsaized/stet/angular";\nimport "@funsaized/stet/style.css";\n\n@Component({\n selector: "app-little-win",\n standalone: true,\n imports: [StetCircleDirective],\n template: \`\n \n \`,\n})\nexport class LittleWin {}`,
+ React: canonicalCode('react'),
+ JavaScript: canonicalCode('vanilla'),
+ Vue: canonicalCode('vue'),
+ Svelte: canonicalCode('svelte'),
+ Angular: canonicalCode('angular'),
};
type Framework = keyof typeof snippets;
export function FrameworkCode() {
@@ -27,11 +28,11 @@ export function FrameworkCode() {
{
{
- React: 'LittleWin.jsx',
- JavaScript: 'little-win.js',
- Vue: 'LittleWin.vue',
- Svelte: 'LittleWin.svelte',
- Angular: 'little-win.component.ts',
+ React: 'AnnotatedAction.tsx',
+ JavaScript: 'annotate.ts',
+ Vue: 'AnnotatedAction.vue',
+ Svelte: 'AnnotatedAction.svelte',
+ Angular: 'annotated-action.component.ts',
}[framework]
}
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index f7b541e..a99356a 100644
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -13,6 +13,8 @@ export function Layout() {
stet•••