docs: fix arktype.io copy button, improve arkdark README

ark/dark/README.md

@@ -10,30 +10,34 @@
 
 We're building a 1:1 validator for TypeScript! Check out our core project [on GitHub](https://github.com/arktypeio/arktype)!
 
-## Syntax Highlighting
+## Features
 
-This extension provides syntax highlighting for strings that are part of an ArkType definition:
+- syntax highlighting for strings that are part of an ArkType definition
 
 ![syntax highlighting](/ark/dark/highlighting.png)
 
-## ArkDark Theme
+- inline type error summaries optimized for ArkType via [ErrorLens](https://github.com/usernamehw/vscode-error-lens)
 
-It also includes an editor theme based on ArkType and optimized for type syntax:
+![errorLens](/ark/dark/errorLens.png)
+
+- optional editor theme based on ArkType palette and optimized for type syntax
 
 ![theme](/ark/dark/theme.png)
 
+The low-poly animal backgrounds from these images are not part of the theme but are images from [this theme](https://apps.microsoft.com/detail/9pbdb440swlc?hl=en-tc&gl=TC) rendered using the excellent [Background](https://github.com/KatsuteDev/Background) extension by [@Katsute](https://github.com/Katsute).
+
 ## Contributing
 
 **Run > Debugger** (`F5` by default) will launch the extension in another window, allowing you to see the effects of your changes on whatever code you open in it.
 
-### Update the ArkDark theme palette
+#### Update the ArkDark theme palette
 
 See [color-theme.json](/ark/dark/color-theme.json)
 
 > [!NOTE]  
 > Changes will be immediately reflected in the extension host window
 
-### Update syntax highlighting rules
+#### Update syntax highlighting rules
 
 See [injected.tmLanguage.json](/ark/dark/injected.tmLanguage.json)
 

ark/dark/arktype.scratch.ts

@@ -41,6 +41,11 @@ factor("foo|bar")
 // not highglighted
 or("foo|bar")
 
+// THIS SHOULD NOT BE HIGHLIGHTED
+// 	const t = type({
+// 		[optional(s)]: "number"
+// 	})
+
 const ff = type("string").or("foobar|baz")
 
 const types = scope({ notASpace: { a: type("string") } }).export()

ark/dark/injected.tmLanguage.json

@@ -2,7 +2,7 @@
 	"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
 	"name": "InjectedArkTypeScript",
 	"scopeName": "source.arktype.injection.ts",
-	"injectionSelector": "L:source.ts, L:source.tsx, L:source.js, L:source.jsx, L:source.mdx, L:meta.embedded.block.typescript, L:meta.embedded.block.typescriptreact, L:meta.embedded.block.javascript - comment",
+	"injectionSelector": "L:source.ts - comment, L:source.tsx - comment, L:source.js - comment, L:source.jsx - comment, L:source.mdx - comment, L:meta.embedded.block.typescript - comment, L:meta.embedded.block.typescriptreact - comment, L:meta.embedded.block.javascript - comment",
 	"patterns": [
 		{
 			"include": "#arkDefinition"

ark/dark/package.json

@@ -2,7 +2,7 @@
 	"name": "arkdark",
 	"displayName": "ArkDark",
 	"description": "ArkType syntax highlighting and theme⛵",
-	"version": "5.2.1",
+	"version": "5.2.2",
 	"publisher": "arktypeio",
 	"type": "module",
 	"scripts": {

ark/docs/astro.config.js

@@ -26,12 +26,6 @@ export default defineConfig({
 				{
 					tag: "script",
 					content: `localStorage.setItem("starlight-theme", "dark")`
-				},
-				{
-					tag: "script",
-					attrs: {
-						src: "/src/components/addCopyButtonListeners.js"
-					}
 				}
 			],
 			social: {

ark/docs/src/components/addCopyButtonListeners.js

@@ -23,23 +23,25 @@ const distillTwoslashCode = container => {
 	return src.trim()
 }
 
-globalThis.addCopyButtonListeners = () => {
-	document.querySelectorAll(".code-container").forEach(codeContainer => {
-		const copyButton = codeContainer.querySelector(".copy-button")
-		const icon = codeContainer.querySelector(".copy-icon")
+document.querySelectorAll(".code-container").forEach(codeContainer => {
+	const src = codeContainer.querySelector(".code-source")
+	const copyButton = codeContainer.querySelector(".copy-button")
+	const icon = codeContainer.querySelector(".copy-icon")
 
-		copyButton.addEventListener("click", async () => {
-			const textToCopy = distillTwoslashCode(codeContainer)
-			await navigator.clipboard.writeText(textToCopy)
+	if ("hasListener" in copyButton) return
+	copyButton.hasListener = true
 
-			icon.setAttribute("src", "/src/assets/check.svg")
-			copyButton.setAttribute("disabled", "1")
-			copyButton.setAttribute("style", "opacity: .6;")
-			setTimeout(() => {
-				icon.setAttribute("src", "/src/assets/copy.svg")
-				copyButton.removeAttribute("disabled")
-				copyButton.removeAttribute("style")
-			}, 2000)
-		})
+	copyButton.addEventListener("click", async () => {
+		const textToCopy = distillTwoslashCode(src)
+		await navigator.clipboard.writeText(textToCopy)
+
+		icon.setAttribute("src", "/check.svg")
+		copyButton.setAttribute("disabled", "1")
+		copyButton.setAttribute("style", "opacity: .6;")
+		setTimeout(() => {
+			icon.setAttribute("src", "/copy.svg")
+			copyButton.removeAttribute("disabled")
+			copyButton.removeAttribute("style")
+		}, 2000)
 	})
-}
+})

ark/docs/src/components/shiki.config.js

@@ -1,10 +1,10 @@
 // @ts-check
-
 import { transformerTwoslash } from "@shikijs/twoslash"
 import arkdarkColors from "arkdark/color-theme.json"
 import arkdarkPackageJson from "arkdark/package.json"
 import arktypeTextmate from "arkdark/tsWithArkType.tmLanguage.json"
 import { defaultCompilerOptions } from "twoslash"
+import addCopyButtonListenersSrc from "./addCopyButtonListeners.js?raw"
 
 // Theme adjustments
 
@@ -100,39 +100,19 @@ export const twoslash = transformerTwoslash({
 	}
 })
 
-const hoverSelector = ".twoslash-popup-code"
-const errorSelector = ".twoslash-error-line"
-const completionSelector = ".twoslash-completion-cursor"
-const metaSelector = `${hoverSelector}, ${errorSelector}, ${completionSelector}`
-
-const distillTwoslashCode = (/** @type {Element} */ container) => {
-	const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)
-
-	let src = ""
-	while (walker.nextNode()) {
-		const parentNode = walker.currentNode.parentNode
-		if (!(parentNode instanceof Element)) continue
-		if (parentNode.closest(errorSelector)) {
-			// if a twoslash error was rendered in this position, we need an additional newline
-			src += "\n"
-		}
-		if (!parentNode?.closest(metaSelector)) {
-			// if the node is not a meta node (hover, error or completion) add its textContent
-			src += walker.currentNode.textContent ?? ""
-		}
-	}
-
-	return src.trim()
-}
-
 /** @type {import("shiki").ShikiTransformer} */
 export const addCopyButton = {
 	name: "addCopyButton",
 	postprocess(html) {
 		return `<div class="code-container">
-	${html}
+	<div class="code-source">
+		${html}
+	</div>
     <button class="copy-button">
-        <img class="copy-icon" src= "/src/assets/copy.svg" onload="addCopyButtonListeners()"/>
+        <img class="copy-icon" src="/copy.svg"/>
+		<script type="module">
+			${addCopyButtonListenersSrc}
+		</script>
     </button>
 </div>`
 	}