feat: 2.0 (#1256)

.gitignore

@@ -1,5 +1,6 @@
 dist
 out
+*.vsix
 node_modules
 temp
 tmp

ark/attest/package.json

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

ark/dark/README.md

@@ -45,6 +45,20 @@ To determine which scopes need to be changed, you can view scopes applied to any
 
 Changes to `injected.tmLanguage.json` should be mirrored to [tsWithArkType.tmLanguage.json](./tsWithArkType.tmLanguage.json).
 
+#### Testing tsWithArkType.tmLanguage.json
+
+To test the standalone rules for TS w/ ArkType highlighting, replace `grammars` in `package.json` with the following:
+
+```json
+	"grammars": {
+				"scopeName": "source.ts",
+				"language": "typescript",
+				"path": "tsWithArkType.tmLanguage.json"
+			}
+```
+
+Be sure to switch back before publishing!
+
 > [!IMPORTANT]  
 > You must reload the extension host window to see scope changes reflected
 

ark/dark/arktype.scratch.ts

@@ -164,3 +164,6 @@ const highlighted = type({
 	pattern: "/^(?:4[0-9]{12}(?:[0-9]{3,6}))$/",
 	bar: "(string | number)[]"
 })
+
+// chained calls should be highlighted
+highlighted.or("string[]").or({ object: "string[]" })

ark/dark/injected.tmLanguage.json

@@ -40,7 +40,7 @@
 		},
 		"arkChained": {
 			"contentName": "meta.embedded.arktype.definition",
-			"begin": "([^\\)\\(\\s]+)?(\\.)\\b(and|or|when|extends|ifExtends|intersect|merge|exclude|extract|overlaps|subsumes|to)(\\()",
+			"begin": "([^\\)\\(\\s]+)?(\\.)\\b(and|or|when|extends|ifExtends|intersect|merge|exclude|extract|overlaps|subsumes|to|satisfies)(\\()",
 			"beginCaptures": {
 				"2": {
 					"name": "punctuation.accessor.ts"

ark/dark/package.json

@@ -2,7 +2,7 @@
 	"name": "arkdark",
 	"displayName": "ArkDark",
 	"description": "Syntax highlighting, inline errors and theme for ArkType⛵",
-	"version": "5.13.0",
+	"version": "5.14.0",
 	"publisher": "arktypeio",
 	"type": "module",
 	"license": "MIT",

ark/dark/tsWithArkType.tmLanguage.json

@@ -48,7 +48,7 @@
 		},
 		"arkChained": {
 			"contentName": "meta.embedded.arktype.definition",
-			"begin": "([^\\)\\(\\s]+)?(\\.)\\b(and|or|when|extends|ifExtends|intersect|merge|exclude|extract|overlaps|subsumes|to)(\\()",
+			"begin": "([^\\)\\(\\s]+)?(\\.)\\b(and|or|when|extends|ifExtends|intersect|merge|exclude|extract|overlaps|subsumes|to|satisfies)(\\()",
 			"beginCaptures": {
 				"2": {
 					"name": "punctuation.accessor.ts"
@@ -498,6 +498,9 @@
 				{
 					"include": "#arkDefinition"
 				},
+				{
+					"include": "#arkChained"
+				},
 				{
 					"include": "#string"
 				},

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

@@ -9,8 +9,14 @@ export type LayoutProps = {
 
 export default ({ children }: LayoutProps): React.ReactElement => (
 	<HomeLayout
+		style={{
+			paddingTop: 0
+		}}
 		{...baseOptions}
-		nav={{ ...baseOptions.nav, children: <FloatYourBoat /> }}
+		nav={{
+			...baseOptions.nav,
+			children: <FloatYourBoat kind="header" />
+		}}
 	>
 		{children}
 	</HomeLayout>

ark/docs/app/docs/[[...slug]]/page.tsx

@@ -25,10 +25,21 @@ export default async (props: { params: Promise<{ slug?: string[] }> }) => {
 
 	const MDX = page.data.body
 
+	const isApiPage =
+		page.data.title.endsWith("API") || page.data.title.endsWith("Configuration")
+
 	return (
-		<DocsPage toc={page.data.toc} full={page.data.full ?? false}>
-			<DocsTitle>{page.data.title}</DocsTitle>
-			<DocsDescription>{page.data.description}</DocsDescription>
+		<DocsPage
+			toc={isApiPage ? [] : page.data.toc}
+			full={page.data.full ?? false}
+		>
+			<DocsTitle>
+				{page.data.title}
+				<DocsDescription style={{ margin: 0 }}>
+					{page.data.description}
+				</DocsDescription>
+			</DocsTitle>
+
 			<DocsBody>
 				<MDX
 					components={{

ark/docs/app/global.css

@@ -90,16 +90,25 @@ div.twoslash-popup-container {
 
 .error.highlighted {
 	position: relative;
-	background-color: #f8585822;
-	border-left: 3px solid var(--ark-runtime-error);
 	padding: 4px;
+	background-color: var(--twoslash-error-bg);
+	border-left: 3px solid var(--ark-error);
 	padding-right: 16px;
 	margin: 0.2em 0;
 	min-width: 100%;
 	width: max-content;
 }
 
 .error.highlighted > span {
+	color: var(--twoslash-error-color) !important;
+}
+
+.error.highlighted.runtime-error {
+	background-color: #f8585822;
+	border-left: 3px solid var(--ark-runtime-error);
+}
+
+.error.highlighted.runtime-error > span {
 	color: var(--ark-runtime-error) !important;
 }
 
@@ -135,7 +144,7 @@ div.twoslash-popup-container {
 }
 
 .completions-block code {
-	padding-bottom: 3rem;
+	padding-bottom: 2rem;
 }
 
 /** avoid a janky white outline on hovers: 

ark/docs/app/layout.tsx

@@ -3,6 +3,7 @@ import "fumadocs-twoslash/twoslash.css"
 import { RootProvider } from "fumadocs-ui/provider"
 import { Raleway } from "next/font/google"
 import type { ReactNode } from "react"
+import { ReleaseBanner } from "../components/ReleaseBanner.tsx"
 
 const raleway = Raleway({
 	subsets: ["latin"]
@@ -23,6 +24,7 @@ export default ({ children }: { children: ReactNode }) => (
 					defaultTheme: "dark"
 				}}
 			>
+				<ReleaseBanner />
 				{children}
 			</RootProvider>
 		</body>

ark/docs/components/ApiTable.tsx

@@ -1,33 +1,28 @@
-import type { JSX } from "react"
-import type { ApiGroup, ParsedJsDocPart } from "../../repo/jsdocGen.ts"
+import type { ApiGroup, ParsedJsDocPart } from "../../repo/jsDocGen.ts"
 import { apiDocsByGroup } from "./apiData.ts"
 import { CodeBlock } from "./CodeBlock.tsx"
 import { LocalFriendlyUrl } from "./LocalFriendlyUrl.tsx"
 
 export type ApiTableProps = {
 	group: ApiGroup
-	rows: JSX.Element[]
 }
 
 export const ApiTable = ({ group }: ApiTableProps) => (
-	<>
-		<h2>{group}</h2>
-		<div className="w-full overflow-x-auto">
-			<table className="w-full table-fixed border-collapse">
-				<colgroup>
-					<col className="w-28" />
-					<col className="w-1/4" />
-					<col className="w-full" />
-				</colgroup>
-				<ApiTableHeader />
-				<tbody>
-					{apiDocsByGroup[group].map(props => (
-						<ApiTableRow key={props.name} {...props} />
-					))}
-				</tbody>
-			</table>
-		</div>
-	</>
+	<div className="w-full overflow-x-auto">
+		<table className="w-full table-fixed border-collapse">
+			<colgroup>
+				<col className="w-28" />
+				<col className="w-1/4" />
+				<col className="w-full" />
+			</colgroup>
+			<ApiTableHeader />
+			<tbody>
+				{apiDocsByGroup[group].map(props => (
+					<ApiTableRow key={props.name} {...props} />
+				))}
+			</tbody>
+		</table>
+	</div>
 )
 
 const ApiTableHeader = () => (
@@ -37,7 +32,7 @@ const ApiTableHeader = () => (
 				Name
 			</th>
 			<th className="p-2 text-left align-top min-w-[200px]">Summary</th>
-			<th className="p-2 text-left align-top">Example</th>
+			<th className="p-2 text-left align-top">Notes & Examples</th>
 		</tr>
 	</thead>
 )
@@ -51,7 +46,17 @@ interface ApiTableRowProps {
 
 const ApiTableRow = ({ name, summary, example, notes }: ApiTableRowProps) => (
 	<tr key={name}>
-		<td className="p-2 align-top whitespace-nowrap w-auto">{name}</td>
+		<td
+			style={{
+				fontSize:
+					name.length < 12 ? "1rem"
+					: name.length < 16 ? "0.7rem"
+					: "0.6rem"
+			}}
+			className="p-2 align-top whitespace-nowrap w-auto"
+		>
+			{name}
+		</td>
 		<td className="p-2 align-top">{JsDocParts(summary)}</td>
 		<td className="p-2 align-top">
 			{notes.map((note, i) => (
@@ -70,20 +75,18 @@ const JsDocParts = (parts: readonly ParsedJsDocPart[]) =>
 					{part.value}
 				</LocalFriendlyUrl>
 			: part.kind === "reference" ?
-				<a href={`#${part.value}`} key={i}>
+				<a style={{ display: "inline-block" }} href={`#${part.value}`} key={i}>
 					{part.value}
 				</a>
-			: part.kind === "tag" ?
-				<p key={i}>
-					{part.name} {JsDocParts(part.value)}
-				</p>
 			:	<p
 					style={{ display: "inline" }}
 					key={i}
 					dangerouslySetInnerHTML={{
 						__html: part.value
 							.replace(/(\*\*|__)([^*_]+)\1/g, "<strong>$2</strong>")
 							.replace(/(\*|_)([^*_]+)\1/g, "<em>$2</em>")
+							.replace(/`([^`]+)`/g, "<code>$1</code>")
+							.replace(/^-(.*)/g, "• $1")
 					}}
 				/>
 			}