fix: disallow scope-level typed configs (#1271)

Author: ssalbdivad

ark/attest/config.ts

@@ -180,7 +180,7 @@ const parseTsVersions = (aliases: TsVersionAliases): TsVersionData[] => {
 			throw new Error(
 				`Specified TypeScript version ${alias} does not exist.` +
 					` It should probably be specified in package.json like:
-"typescript-${alias}": "npm:typescript@latest"`
+"@ark/attest-ts-${alias}": "npm:typescript@latest"`
 			)
 		}
 		return matching

ark/attest/fixtures.ts

@@ -7,12 +7,9 @@ import { ensureCacheDirs, getConfig, type AttestConfig } from "./config.ts"
 import { forTypeScriptVersions } from "./tsVersioning.ts"
 
 export const setup = (options?: Partial<AttestConfig>): typeof teardown => {
-	if (options) {
-		const existing =
-			process.env.ATTEST_CONFIG ? JSON.parse(process.env.ATTEST_CONFIG) : {}
-		process.env.ATTEST_CONFIG = JSON.stringify(Object.assign(existing, options))
-	}
-	const config = getConfig()
+	const { ...config } = getConfig()
+	if (options) Object.assign(config, options)
+	process.env.ATTEST_CONFIG = JSON.stringify(config)
 	rmSync(config.cacheDir, { recursive: true, force: true })
 	ensureCacheDirs()
 	if (config.skipTypes) return teardown

ark/attest/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ark/attest",
-	"version": "0.40.0",
+	"version": "0.41.0",
 	"license": "MIT",
 	"author": {
 		"name": "David Blass",

ark/docs/app/(home)/page.tsx

@@ -1,17 +1,16 @@
-import { ArkCard, ArkCards } from "../../components/ArkCard.tsx"
-import { CodeBlock } from "../../components/CodeBlock.tsx"
-import { Hero } from "../../components/Hero.tsx"
-import { TsIcon } from "../../components/icons/ts.tsx"
-import { LinkCard } from "../../components/LinkCard.tsx"
-import { RuntimeBenchmarksGraph } from "../../components/RuntimeBenchmarksGraph.tsx"
-
 import {
 	LightbulbIcon,
 	MessageCircleWarning,
 	MessageSquareTextIcon,
 	RocketIcon,
 	SearchIcon
 } from "lucide-react"
+import { ArkCard, ArkCards } from "../../components/ArkCard.tsx"
+import { CodeBlock } from "../../components/CodeBlock.tsx"
+import { Hero } from "../../components/Hero.tsx"
+import { TsIcon } from "../../components/icons/ts.tsx"
+import { LinkCard } from "../../components/LinkCard.tsx"
+import { RuntimeBenchmarksGraph } from "../../components/RuntimeBenchmarksGraph.tsx"
 
 export default () => (
 	<div className="flex-1 pt-40 container relative pb-20">

ark/docs/components/AutoplayDemo.tsx

@@ -2,23 +2,24 @@ export type AutoplayDemoProps = React.DetailedHTMLProps<
 	React.VideoHTMLAttributes<HTMLVideoElement>,
 	HTMLVideoElement
 > & { src: string }
+
+export const MainAutoplayDemo = () => (
+	<AutoplayDemo src="https://github.com/user-attachments/assets/eaace5f0-310e-4fc8-9a95-1c0afc6fd110" />
+)
+
 export const AutoplayDemo = (props: AutoplayDemoProps) => (
-	<div style={{ opacity: 0.8 }}>
+	<div>
 		<video
 			autoPlay
 			loop
 			controls={true}
 			playsInline
 			muted
 			disablePictureInPicture={true}
-			style={{
-				borderRadius: "1rem",
-				boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)"
-			}}
 			{...props}
 		/>
-		<p style={{ fontSize: "1rem" }}>
-			Type-level feedback on keystroke-{" "}
+		<p>
+			Type-level feedback with each keystroke-{" "}
 			<b>no plugins or build steps required</b>.
 		</p>
 	</div>

ark/docs/components/Hero.tsx

@@ -1,32 +1,45 @@
 import { ArrowRightIcon } from "lucide-react"
 import Link from "next/link"
-import { AutoplayDemo } from "./AutoplayDemo.tsx"
+import { MainAutoplayDemo } from "./AutoplayDemo.tsx"
 import { PlatformCloud } from "./PlatformCloud.tsx"
 
 export const Hero = () => (
-	<div className="flex flex-col md:flex-row justify-between">
-		<div className="absolute top-2 left-0 right-0">
-			<div className="flex justify-between">
-				<PlatformCloud main="ts" right="vscode" top="neovim" left="intellij" />
-				<PlatformCloud main="js" right="chromium" top="node" left="bun" />
+	<div>
+		<div className="flex flex-col md:flex-row justify-between">
+			<div className="absolute top-2 left-0 right-0">
+				<div className="flex justify-between">
+					<PlatformCloud
+						main="ts"
+						right="vscode"
+						top="neovim"
+						left="intellij"
+					/>
+					<PlatformCloud main="js" right="chromium" top="node" left="bun" />
+				</div>
+			</div>
+
+			<div className="relative w-full flex flex-col md:items-start text-center md:text-left">
+				<h1 className="mb-4 text-3xl md:text-8xl">ArkType</h1>
+				<p className="text-fd-muted-foreground text-2xl leading-relaxed">
+					Optimized runtime validation from familiar, type-safe syntax.
+				</p>
+
+				{/* This wrapper grows to fill remaining vertical space, placing the link in the centered area */}
+				<div className="flex-1 flex items-center justify-center md:justify-start mt-6">
+					<Link
+						tabIndex={1}
+						href="/docs/intro/setup"
+						className="bg-highlight text-black focus-within:outline focus-within:outline-2 outline-white hover:bg-highlight/80 p-5 rounded-full flex gap-2 text-sm items-center"
+					>
+						Set Sail
+						<ArrowRightIcon />
+					</Link>
+				</div>
+			</div>
+
+			<div style={{ padding: "2rem", position: "relative" }}>
+				<MainAutoplayDemo />
 			</div>
-		</div>
-		<div className="relative w-full flex flex-col items-center text-center md:items-start md:text-left">
-			<h1 className="mb-4 text-3xl md:text-8xl">ArkType</h1>
-			<p className="text-fd-muted-foreground text-lg">
-				Typescript&apos;s 1:1 validator, optimized from editor to runtime
-			</p>
-			<Link
-				tabIndex={1}
-				href="/docs/intro/setup"
-				className="bg-highlight text-black focus-within:outline focus-within:outline-2 outline-white hover:bg-highlight/80 p-5 rounded-full w-fit flex gap-2 my-3 text-sm items-center"
-			>
-				Set Sail
-				<ArrowRightIcon />
-			</Link>
-		</div>
-		<div style={{ padding: "2rem", position: "relative" }}>
-			<AutoplayDemo src="https://github.com/user-attachments/assets/895c439e-fcd3-4420-93fa-299e829fcf26" />
 		</div>
 	</div>
 )

ark/docs/content/docs/blog/2.0.mdx

@@ -3,7 +3,7 @@ title: Announcing ArkType 2.0
 description: 100x faster validation with DX that will blow your mind
 ---
 
-import { AutoplayDemo } from "../../../components/AutoplayDemo.tsx"
+import { MainAutoplayDemo } from "../../../components/AutoplayDemo.tsx"
 import { CodeBlock } from "../../../components/CodeBlock.tsx"
 import { RuntimeBenchmarksGraph } from "../../../components/RuntimeBenchmarksGraph.tsx"
 
@@ -13,7 +13,7 @@ ArkType 2.0 brings types to runtime JS in a way that, until today, has been a pi
 
 Whether you're a first-time TypeScript dev trying to validate a form or a library author introspecting relationships, ArkType offers fundamentally better tools for navigating the perils of JavaScript.
 
-<AutoplayDemo src="https://github.com/user-attachments/assets/895c439e-fcd3-4420-93fa-299e829fcf26" />
+<MainAutoplayDemo />
 
 ### Unparalleled DX
 

ark/docs/content/docs/configuration/index.mdx

@@ -40,18 +40,22 @@ type.number.allows(Number.NaN)
       <td>all Types parsed in the configured Scope</td>
       <td>
 ```ts
-const closedObjectScope = scope(
-	{ user: {  name: "string" } },
-	{ onUndeclaredKey: "reject" }
+const myScope = scope(
+	{ user: { age: "number < 100" } },
+	{
+		max: {
+			actual: () => "unacceptably large"
+		}
+	}
 )
-const types = closedObjectScope.export()
-// ArkErrors: age must be removed
-types.user({ name: "Alice", age: 99 })
-const parsedAfter = closedObjectScope.type({
-  name: "string"
+const types = myScope.export()
+// ArkErrors: age must be less than 100 (was unacceptably large)
+types.user({ name: "Alice", age: 101 })
+const parsedAfter = myScope.type({
+	age: "number <= 100"
 })
-// ArkErrors: age must be removed
-parsedAfter({ name: "Alice", age: 99 })
+// ArkErrors: age must be at most 100 (was unacceptably large)
+parsedAfter({ age: 101 })
 ```
       </td>
     </tr>

ark/docs/content/docs/scopes/index.mdx

@@ -33,13 +33,33 @@ const coolScope = scope({
 
 `coolScope` is an object with reusable methods like `type` and `generic`. You can use it to create additional `Type`s that can reference your **aliases**- `id`, `user` and `usersById`.
 
+<Callout type="warn" title="Don't wrap your scoped definitions in type!">
+
+Even if you reference it as part of your scope definition, the global 'type' parser only knows about builtin keywords.
+
+```ts
+// @errors: 2322
+const badScope = scope({
+	id: "string",
+	// ❌ wrapping this definition in `type` will fail
+	badEntity: type({
+		id: "id"
+	}),
+	// ✅ reference scoped definitions directly instead of wrapping them
+	goodEntity: {
+		id: "id"
+	}
+})
+```
+
+If you need access to fluent syntax from within a Scope, see [thunks](/docs/scopes#thunks).
+
+</Callout>
+
 ```ts
 const coolScope = scope({
-	// keywords are still available in your scope
 	id: "string",
-	// but you can also reference your own aliases directly!
 	user: { id: "id", friends: "id[]" },
-	// your aliases will be autocompleted and validated alongside ArkType's keywords
 	usersById: {
 		"[id]": "user | undefined"
 	}
@@ -61,11 +81,8 @@ To use the scoped types directly, you must `.export()` your `Scope` to a `Module
 
 ```ts
 const coolScope = scope({
-	// keywords are still available in your scope
 	id: "string",
-	// but you can also reference your own aliases directly!
 	user: { id: "id", friends: "id[]" },
-	// your aliases will be autocompleted and validated alongside ArkType's keywords
 	usersById: {
 		"[id]": "user | undefined"
 	}

ark/docs/lib/shiki.ts

@@ -164,7 +164,7 @@ export const shikiConfig = {
 			}
 		},
 		twoslash,
-		transformerNotationErrorLevel()
+		transformerNotationErrorLevel({ matchAlgorithm: "v3" })
 	]
 } as const satisfies RehypeCodeOptions