From 113d1d09ddc46aff5b96cd2ebe0d2c8104792635 Mon Sep 17 00:00:00 2001
From: Sampo Kuokkanen <sampo.kuokkanen@gmail.com>
Date: Tue, 18 Aug 2026 16:56:47 +0900
Subject: [PATCH 1/3] Enable GitHub Flavored Markdown extensions.

`Markly.render_html` enables no extensions by default, so tables were
rendered as literal text, `~~strikethrough~~` was left as-is, bare URLs
were not linked, and task lists showed `[ ]`.

Enable the standard set, as most Markdown intended for preview is
GitHub Flavored.
---
 lib/luna/middleware/markdown.rb  |  5 ++++-
 test/luna/middleware/markdown.rb | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/lib/luna/middleware/markdown.rb b/lib/luna/middleware/markdown.rb
index 10bc73a..05feb59 100644
--- a/lib/luna/middleware/markdown.rb
+++ b/lib/luna/middleware/markdown.rb
@@ -16,6 +16,9 @@ module Middleware
 		# Render Markdown files to HTML on-the-fly.
 		# Intercepts requests that target .md/.markdown files.
 		class Markdown < Protocol::HTTP::Middleware
+			# The GitHub Flavored Markdown extensions, which are not enabled by default.
+			EXTENSIONS = [:table, :strikethrough, :autolink, :tagfilter, :tasklist].freeze
+			
 			def initialize(app, root: Dir.pwd, index_candidates: ["index.md", "README.md"]) 
 				super(app)
 				@root = File.expand_path(root)
@@ -56,7 +59,7 @@ def markdown_file?(path)
 			
 			def render_html(markdown)
 				if defined?(::Markly)
-					::Markly.render_html(markdown)
+					::Markly.render_html(markdown, extensions: EXTENSIONS)
 				else
 					# Fallback minimal rendering if markly isn't available:
 					escape = ->(s){s.to_s.gsub("&","&amp;").gsub("<","&lt;").gsub(">","&gt;")}
diff --git a/test/luna/middleware/markdown.rb b/test/luna/middleware/markdown.rb
index 3a59755..d320989 100644
--- a/test/luna/middleware/markdown.rb
+++ b/test/luna/middleware/markdown.rb
@@ -35,4 +35,21 @@ def request(method, path)
 		response = middleware.call(request("GET", "/docs/"))
 		expect(response.status).to be == 200
 	end
+	
+	it "renders tables" do
+		FileUtils.mkdir_p(www_root)
+		File.write(File.join(www_root, "table.md"), "| A | B |\n|---|---|\n| 1 | 2 |\n")
+		response = middleware.call(request("GET", "/table.md"))
+		expect(response.read).to be(:include?, "<table>")
+	end
+	
+	it "renders strikethrough, autolinks and task lists" do
+		FileUtils.mkdir_p(www_root)
+		File.write(File.join(www_root, "gfm.md"), "~~gone~~ https://example.com\n\n- [x] done\n")
+		response = middleware.call(request("GET", "/gfm.md"))
+		body = response.read
+		expect(body).to be(:include?, "<del>gone</del>")
+		expect(body).to be(:include?, "<a href=\"https://example.com\">")
+		expect(body).to be(:include?, "<input type=\"checkbox\"")
+	end
 end

From 9a08178bcabc07688cd8c751670520424716f2fe Mon Sep 17 00:00:00 2001
From: Sampo Kuokkanen <sampo.kuokkanen@gmail.com>
Date: Thu, 20 Aug 2026 17:48:01 +0900
Subject: [PATCH 2/3] Render Markdown and directory listings as complete
 documents.

The Markdown renderer returned a bare fragment, with no doctype, charset
or title, and thus nowhere to attach a stylesheet. The directory listing
built a document of its own, so the two disagreed.

Introduce `Luna::Document`, which both now share, and serve Luna's own
assets from `public/` as the last middleware in the stack, so that files
in the root take precedence and can override them.

Bundle `@socketry/syntax` to highlight code, which can be disabled with
`--no-syntax-highlighting`.
---
 lib/luna.rb                                   |   2 +
 lib/luna/command/serve.rb                     |   6 +-
 lib/luna/document.rb                          |  59 ++
 lib/luna/middleware/markdown.rb               |   8 +-
 lib/luna/middleware/static.rb                 |  15 +-
 lib/luna/server.rb                            |  22 +-
 luna.gemspec                                  |   2 +-
 public/_components/@socketry/syntax/Syntax.js | 356 +++++++
 .../@socketry/syntax/Syntax/CodeElement.js    | 416 +++++++++
 .../@socketry/syntax/Syntax/Errors.js         |  52 ++
 .../@socketry/syntax/Syntax/Language.js       | 279 ++++++
 .../syntax/Syntax/Language/apache.js          |  49 +
 .../syntax/Syntax/Language/applescript.js     | 157 ++++
 .../syntax/Syntax/Language/assembly.js        |  42 +
 .../syntax/Syntax/Language/bash-script.js     | 108 +++
 .../@socketry/syntax/Syntax/Language/bash.js  |  32 +
 .../@socketry/syntax/Syntax/Language/basic.js | 232 +++++
 .../@socketry/syntax/Syntax/Language/c++.js   |   1 +
 .../@socketry/syntax/Syntax/Language/c.js     |   1 +
 .../@socketry/syntax/Syntax/Language/clang.js | 201 ++++
 .../@socketry/syntax/Syntax/Language/cpp.js   |   1 +
 .../syntax/Syntax/Language/csharp.js          | 166 ++++
 .../@socketry/syntax/Syntax/Language/css.js   | 244 +++++
 .../@socketry/syntax/Syntax/Language/diff.js  |  24 +
 .../@socketry/syntax/Syntax/Language/go.js    | 135 +++
 .../syntax/Syntax/Language/haskell.js         | 110 +++
 .../@socketry/syntax/Syntax/Language/html.js  |  69 ++
 .../@socketry/syntax/Syntax/Language/io.js    |  68 ++
 .../@socketry/syntax/Syntax/Language/java.js  | 134 +++
 .../syntax/Syntax/Language/javascript.js      |  89 ++
 .../@socketry/syntax/Syntax/Language/json.js  |  36 +
 .../@socketry/syntax/Syntax/Language/lisp.js  |  38 +
 .../@socketry/syntax/Syntax/Language/lua.js   |  87 ++
 .../syntax/Syntax/Language/markdown.js        | 112 +++
 .../@socketry/syntax/Syntax/Language/nginx.js |  37 +
 .../syntax/Syntax/Language/objective-c.js     |   1 +
 .../@socketry/syntax/Syntax/Language/ocaml.js | 225 +++++
 .../syntax/Syntax/Language/pascal.js          | 166 ++++
 .../@socketry/syntax/Syntax/Language/patch.js |   2 +
 .../@socketry/syntax/Syntax/Language/perl5.js | 317 +++++++
 .../syntax/Syntax/Language/php-script.js      | 112 +++
 .../@socketry/syntax/Syntax/Language/php.js   |  18 +
 .../@socketry/syntax/Syntax/Language/plain.js |  20 +
 .../syntax/Syntax/Language/protobuf.js        |  77 ++
 .../syntax/Syntax/Language/python.js          | 208 +++++
 .../@socketry/syntax/Syntax/Language/ruby.js  | 124 +++
 .../@socketry/syntax/Syntax/Language/scala.js |  81 ++
 .../syntax/Syntax/Language/smalltalk.js       |  30 +
 .../@socketry/syntax/Syntax/Language/sql.js   | 865 ++++++++++++++++++
 .../syntax/Syntax/Language/super-collider.js  |  70 ++
 .../@socketry/syntax/Syntax/Language/swift.js | 176 ++++
 .../@socketry/syntax/Syntax/Language/xml.js   |  76 ++
 .../@socketry/syntax/Syntax/Language/xrb.js   |  33 +
 .../@socketry/syntax/Syntax/Language/yaml.js  |  29 +
 .../@socketry/syntax/Syntax/Loader.js         |  78 ++
 .../@socketry/syntax/Syntax/Match.js          | 552 +++++++++++
 .../@socketry/syntax/Syntax/Rule.js           | 322 +++++++
 .../_components/@socketry/syntax/license.md   |  21 +
 .../_components/@socketry/syntax/package.json |  44 +
 public/_components/@socketry/syntax/readme.md | 190 ++++
 .../@socketry/syntax/themes/base/apache.css   |   1 +
 .../syntax/themes/base/applescript.css        |   1 +
 .../@socketry/syntax/themes/base/assembly.css |   1 +
 .../@socketry/syntax/themes/base/bash.css     |   1 +
 .../@socketry/syntax/themes/base/basic.css    |   1 +
 .../@socketry/syntax/themes/base/c.css        |   1 +
 .../@socketry/syntax/themes/base/clang.css    |   0
 .../@socketry/syntax/themes/base/csharp.css   |   1 +
 .../@socketry/syntax/themes/base/css.css      |  22 +
 .../@socketry/syntax/themes/base/diff.css     |  48 +
 .../@socketry/syntax/themes/base/go.css       |   1 +
 .../@socketry/syntax/themes/base/haskell.css  |   1 +
 .../@socketry/syntax/themes/base/html.css     |   1 +
 .../@socketry/syntax/themes/base/io.css       |   1 +
 .../@socketry/syntax/themes/base/java.css     |   1 +
 .../syntax/themes/base/javascript.css         |   1 +
 .../@socketry/syntax/themes/base/json.css     |  41 +
 .../@socketry/syntax/themes/base/lisp.css     |   1 +
 .../@socketry/syntax/themes/base/lua.css      |   1 +
 .../@socketry/syntax/themes/base/markdown.css |  16 +
 .../@socketry/syntax/themes/base/nginx.css    |   1 +
 .../@socketry/syntax/themes/base/ocaml.css    |   1 +
 .../@socketry/syntax/themes/base/pascal.css   |   1 +
 .../@socketry/syntax/themes/base/perl5.css    |   1 +
 .../syntax/themes/base/php-script.css         |   1 +
 .../@socketry/syntax/themes/base/php.css      |   1 +
 .../@socketry/syntax/themes/base/plain.css    |   1 +
 .../@socketry/syntax/themes/base/protobuf.css |   1 +
 .../@socketry/syntax/themes/base/python.css   |   1 +
 .../@socketry/syntax/themes/base/ruby.css     |  23 +
 .../@socketry/syntax/themes/base/scala.css    |   3 +
 .../syntax/themes/base/smalltalk.css          |   1 +
 .../@socketry/syntax/themes/base/sql.css      |   1 +
 .../syntax/themes/base/super-collider.css     |  33 +
 .../@socketry/syntax/themes/base/swift.css    |   1 +
 .../@socketry/syntax/themes/base/syntax.css   |  74 ++
 .../@socketry/syntax/themes/base/xml.css      |   1 +
 .../@socketry/syntax/themes/base/xrb.css      |  29 +
 .../@socketry/syntax/themes/base/yaml.css     |   1 +
 .../@socketry/syntax/themes/theming.md        | 244 +++++
 public/_static/application.js                 |   6 +
 public/_static/luna.css                       |  39 +
 test/integration/server_integration.rb        |  44 +
 test/luna/document.rb                         |  45 +
 104 files changed, 7905 insertions(+), 18 deletions(-)
 create mode 100644 lib/luna/document.rb
 create mode 100644 public/_components/@socketry/syntax/Syntax.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/CodeElement.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Errors.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/apache.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/applescript.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/assembly.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/bash-script.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/bash.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/basic.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/c++.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/c.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/clang.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/cpp.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/csharp.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/css.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/diff.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/go.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/haskell.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/html.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/io.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/java.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/javascript.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/json.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/lisp.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/lua.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/markdown.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/nginx.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/objective-c.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/ocaml.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/pascal.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/patch.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/perl5.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/php-script.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/php.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/plain.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/protobuf.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/python.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/ruby.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/scala.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/smalltalk.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/sql.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/super-collider.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/swift.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/xml.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/xrb.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Language/yaml.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Loader.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Match.js
 create mode 100644 public/_components/@socketry/syntax/Syntax/Rule.js
 create mode 100644 public/_components/@socketry/syntax/license.md
 create mode 100644 public/_components/@socketry/syntax/package.json
 create mode 100644 public/_components/@socketry/syntax/readme.md
 create mode 100644 public/_components/@socketry/syntax/themes/base/apache.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/applescript.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/assembly.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/bash.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/basic.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/c.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/clang.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/csharp.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/css.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/diff.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/go.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/haskell.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/html.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/io.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/java.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/javascript.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/json.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/lisp.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/lua.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/markdown.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/nginx.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/ocaml.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/pascal.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/perl5.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/php-script.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/php.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/plain.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/protobuf.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/python.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/ruby.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/scala.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/smalltalk.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/sql.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/super-collider.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/swift.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/syntax.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/xml.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/xrb.css
 create mode 100644 public/_components/@socketry/syntax/themes/base/yaml.css
 create mode 100644 public/_components/@socketry/syntax/themes/theming.md
 create mode 100644 public/_static/application.js
 create mode 100644 public/_static/luna.css
 create mode 100644 test/luna/document.rb

diff --git a/lib/luna.rb b/lib/luna.rb
index 151cf0e..440b359 100644
--- a/lib/luna.rb
+++ b/lib/luna.rb
@@ -6,4 +6,6 @@
 require_relative "luna/version"
 
 module Luna
+	# The root directory for Luna's own assets, e.g. stylesheets and scripts.
+	PUBLIC_ROOT = File.expand_path("../public", __dir__)
 end
diff --git a/lib/luna/command/serve.rb b/lib/luna/command/serve.rb
index dfce281..2e9cea9 100644
--- a/lib/luna/command/serve.rb
+++ b/lib/luna/command/serve.rb
@@ -24,6 +24,7 @@ class Serve < Samovar::Command
 				option "-i/--index <filename>", "Directory index", default: "index.html"
 				option "--[no]-directory-listing", "Enable directory listing", default: true
 				option "--[no]-markdown", "Enable Markdown rendering", default: true
+				option "--[no]-syntax-highlighting", "Enable syntax highlighting", default: true
 				option "-v/--[no]-verbose", "Verbose logging", default: false
 			end
 			
@@ -55,7 +56,8 @@ def middleware
 					verbose: @options[:verbose],
 					markdown: @options[:markdown],
 					index: @options[:index],
-					directory_listing: @options[:directory_listing]
+					directory_listing: @options[:directory_listing],
+					syntax_highlighting: @options[:syntax_highlighting]
 				)
 			end
 			
@@ -64,7 +66,7 @@ def call
 					buffer.puts "Luna v#{Luna::VERSION} serving..."
 					buffer.puts "- Root: #{File.expand_path(root_directory)}"
 					buffer.puts "- Bind: #{endpoint}"
-					buffer.puts "- Markdown: #{@options[:markdown]} | Index: #{@options[:index]} | Directory Listing: #{@options[:directory_listing]}"
+					buffer.puts "- Markdown: #{@options[:markdown]} | Index: #{@options[:index]} | Directory Listing: #{@options[:directory_listing]} | Syntax Highlighting: #{@options[:syntax_highlighting]}"
 				end
 				
 				Async do |task|
diff --git a/lib/luna/document.rb b/lib/luna/document.rb
new file mode 100644
index 0000000..4bbf2b0
--- /dev/null
+++ b/lib/luna/document.rb
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2025, by Samuel Williams.
+
+module Luna
+	# Wraps rendered content in a minimal HTML document.
+	#
+	# Both the Markdown renderer and the directory listing use this, so that they
+	# agree on the document structure and share the same stylesheet.
+	class Document
+		# @parameter stylesheet [String | Nil] The stylesheet to link, if any.
+		# @parameter scripts [Array(String)] Module scripts to include.
+		def initialize(stylesheet: "/_static/luna.css", scripts: [])
+			@stylesheet = stylesheet
+			@scripts = scripts
+		end
+		
+		# @attribute [String | Nil] The stylesheet to link, if any.
+		attr :stylesheet
+		
+		# @attribute [Array(String)] Module scripts to include.
+		attr :scripts
+		
+		# @parameter title [String] The title of the document.
+		# @parameter body [String] The rendered content.
+		# @returns [String] A complete HTML document.
+		def call(title, body)
+			<<~HTML
+				<!doctype html>
+				<meta charset="utf-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1">
+				<title>#{escape_html(title)}</title>
+				#{head.join("\n")}
+				#{body}
+			HTML
+		end
+		
+		private
+		
+		def head
+			links = []
+			
+			if @stylesheet
+				links << "<link rel=\"stylesheet\" href=\"#{escape_html(@stylesheet)}\">"
+			end
+			
+			@scripts.each do |script|
+				links << "<script type=\"module\" src=\"#{escape_html(script)}\"></script>"
+			end
+			
+			links
+		end
+		
+		def escape_html(text)
+			text.to_s.gsub("&", "&amp;").gsub("<", "&lt;").gsub(">", "&gt;").gsub('"', "&quot;")
+		end
+	end
+end
diff --git a/lib/luna/middleware/markdown.rb b/lib/luna/middleware/markdown.rb
index 05feb59..48a0e1b 100644
--- a/lib/luna/middleware/markdown.rb
+++ b/lib/luna/middleware/markdown.rb
@@ -5,6 +5,8 @@
 
 require "protocol/http/middleware"
 
+require_relative "../document"
+
 begin
 	require "markly"
 rescue LoadError
@@ -19,14 +21,16 @@ class Markdown < Protocol::HTTP::Middleware
 			# The GitHub Flavored Markdown extensions, which are not enabled by default.
 			EXTENSIONS = [:table, :strikethrough, :autolink, :tagfilter, :tasklist].freeze
 			
-			def initialize(app, root: Dir.pwd, index_candidates: ["index.md", "README.md"]) 
+			def initialize(app, root: Dir.pwd, index_candidates: ["index.md", "README.md"], document: Document.new)
 				super(app)
 				@root = File.expand_path(root)
 				@index_candidates = index_candidates
+				@document = document
 			end
 			
 			attr :root
 			attr :index_candidates
+			attr :document
 			
 			def safe_join(path)
 				full = File.expand_path(File.join(@root, path))
@@ -69,7 +73,7 @@ def render_html(markdown)
 			
 			def render_file(path, head: false)
 				content = File.read(path)
-				html = render_html(content)
+				html = @document.call(File.basename(path), render_html(content))
 				headers = [
 					["content-type", "text/html; charset=utf-8"]
 				]
diff --git a/lib/luna/middleware/static.rb b/lib/luna/middleware/static.rb
index bc214c9..f8892cd 100644
--- a/lib/luna/middleware/static.rb
+++ b/lib/luna/middleware/static.rb
@@ -7,6 +7,8 @@
 require "protocol/http/body/file"
 require "time"
 
+require_relative "../document"
+
 module Luna
 	module Middleware
 		# Serve static files from a root directory, with optional index and directory listing.
@@ -29,16 +31,18 @@ class Static < Protocol::HTTP::Middleware
 				".zip" => "application/zip",
 			}.freeze
 			
-			def initialize(app, root: Dir.pwd, index: "index.html", directory_listing: true)
+			def initialize(app, root: Dir.pwd, index: "index.html", directory_listing: true, document: Document.new)
 				super(app)
 				@root = File.expand_path(root)
 				@index = index
 				@directory_listing = directory_listing
+				@document = document
 			end
 			
 			attr :root
 			attr :index
 			attr :directory_listing
+			attr :document
 			
 			def mime_type_for_extension(ext)
 				MIME_TYPES[ext.downcase] || "application/octet-stream"
@@ -99,13 +103,8 @@ def serve_directory_listing(dir_path, request_path)
 					target += "/" if File.directory?(File.join(dir_path, e)) && !target.end_with?("/")
 					"<li><a href=\"#{escape_html(target)}\">#{escape_html(name)}</a></li>"
 				end.join("\n")
-				html = <<~HTML
-				<!doctype html>
-				<meta charset="utf-8">
-				<title>Index of #{escape_html(request_path)}</title>
-				<h1>Index of #{escape_html(request_path)}</h1>
-				<ul>#{links}</ul>
-			HTML
+				title = "Index of #{request_path}"
+				html = @document.call(title, "<h1>#{escape_html(title)}</h1>\n<ul>#{links}</ul>")
 				
 				headers = [
 					["content-type", "text/html; charset=utf-8"]
diff --git a/lib/luna/server.rb b/lib/luna/server.rb
index 5ae33c4..170e0f5 100644
--- a/lib/luna/server.rb
+++ b/lib/luna/server.rb
@@ -7,6 +7,8 @@
 require "protocol/http/middleware/builder"
 require "protocol/http/content_encoding"
 
+require_relative "../luna"
+require_relative "document"
 require_relative "middleware/verbose"
 require_relative "middleware/static"
 require_relative "middleware/markdown"
@@ -20,16 +22,26 @@ class Server < Async::HTTP::Server
 		# @param markdown [Boolean] Enable markdown rendering.
 		# @param index [String] Index file for directories.
 		# @param directory_listing [Boolean] Enable basic directory listing when no index exists.
-		def self.middleware(root: Dir.pwd, verbose: false, markdown: true, index: "index.html", directory_listing: true)
+		# @param syntax_highlighting [Boolean] Highlight code using Luna's bundled syntax highlighter.
+		def self.middleware(root: Dir.pwd, verbose: false, markdown: true, index: "index.html", directory_listing: true, syntax_highlighting: true)
+			scripts = syntax_highlighting ? ["/_static/application.js"] : []
+			document = Luna::Document.new(scripts: scripts)
+			
 			::Protocol::HTTP::Middleware.build do
 				use Luna::Middleware::Verbose if verbose
 				use ::Protocol::HTTP::ContentEncoding
-				use Luna::Middleware::Markdown, root: root if markdown
-				run Luna::Middleware::Static.new(
-					->(request){Protocol::HTTP::Response[404, {"content-type"=>"text/plain"}, ["Not Found"]]},
+				use Luna::Middleware::Markdown, root: root, document: document if markdown
+				use Luna::Middleware::Static,
 					root: root,
 					index: index,
-					directory_listing: directory_listing
+					directory_listing: directory_listing,
+					document: document
+				
+				# Luna's own assets are served last, so that files in the root take precedence:
+				run Luna::Middleware::Static.new(
+					->(request){Protocol::HTTP::Response[404, {"content-type"=>"text/plain"}, ["Not Found"]]},
+					root: Luna::PUBLIC_ROOT,
+					directory_listing: false
 				)
 			end
 		end
diff --git a/luna.gemspec b/luna.gemspec
index 74d4af6..06f6166 100644
--- a/luna.gemspec
+++ b/luna.gemspec
@@ -21,7 +21,7 @@ Gem::Specification.new do |spec|
 		"source_code_uri" => "https://github.com/socketry/luna.git",
 	}
 	
-	spec.files = Dir.glob(["{bin,examples,lib}/**/*", "*.md"], File::FNM_DOTMATCH, base: __dir__)
+	spec.files = Dir.glob(["{bin,examples,lib,public}/**/*", "*.md"], File::FNM_DOTMATCH, base: __dir__)
 	
 	spec.executables = ["luna"]
 	
diff --git a/public/_components/@socketry/syntax/Syntax.js b/public/_components/@socketry/syntax/Syntax.js
new file mode 100644
index 0000000..b3a1b5d
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax.js
@@ -0,0 +1,356 @@
+/**
+ * Syntax - Core highlighting engine
+ * A modern, framework-agnostic syntax highlighter
+ *
+ * @package @socketry/syntax
+ * @author Samuel G. D. Williams
+ * @license MIT
+ */
+
+import {Loader} from './Syntax/Loader.js';
+import {
+	LanguageNotFoundError,
+	LanguageLoadError,
+	StyleSheetLoadError
+} from './Syntax/Errors.js';
+
+export class Syntax {
+	static #default = null;
+
+	#root = null;
+	#aliases = {};
+	#languages = new Loader((loader, name) => this.#loadLanguage(loader, name));
+	#styleSheets = new Loader((loader, url) => this.#loadStyleSheet(loader, url));
+	#styles = {};
+	#themes = {};
+	#themeRoot = null; // Base URL for theme assets (CSS)
+
+	#defaultOptions = {
+		theme: 'base',
+		linkify: true,
+		strict: false
+	};
+
+	/**
+	 * Get or create the default Syntax instance
+	 */
+	static get default() {
+		if (!this.#default) {
+			this.#default = new Syntax();
+		}
+		return this.#default;
+	}
+
+	/**
+	 * Set a custom default Syntax instance
+	 */
+	static set default(instance) {
+		this.#default = instance;
+	}
+
+	/**
+	 * Detect the default root path for loading language modules
+	 * Uses import.meta.url to reliably locate the Syntax module directory
+	 */
+	static detectRoot() {
+		try {
+			const url = new URL('./', import.meta.url);
+			return url.href;
+		} catch (error) {
+			// Fallback: try document.currentScript (may not work reliably)
+			if (
+				typeof document !== 'undefined' &&
+				document.currentScript &&
+				document.currentScript.src
+			) {
+				const url = new URL(document.currentScript.src);
+				return url.pathname.substring(0, url.pathname.lastIndexOf('/') + 1);
+			}
+			// Last resort fallback
+			return '/';
+		}
+	}
+
+	/**
+	 * Initialize syntax highlighting on the page
+	 * Registers the web component and sets up the default syntax instance
+	 * Languages will be auto-loaded on demand when referenced by elements
+	 *
+	 * @param {Object} options - Configuration options
+	 * @param {Syntax} options.syntax - Syntax instance to use (defaults to Syntax.default)
+	 * @param {boolean} options.upgradeAll - Whether to automatically upgrade existing elements (default: true)
+	 * @param {string} options.selector - CSS selector for upgrading (default: 'code[class*="language-"]')
+	 * @param {string} options.root - Base URL for loading language modules (default: auto-detected)
+	 * @returns {Promise<void>}
+	 */
+	static async highlight(options = {}) {
+		const {
+			syntax = Syntax.default,
+			upgradeAll: shouldUpgradeAll = true,
+			selector = 'code[class*="language-"]',
+			root = null
+		} = options;
+
+		// Set the default syntax instance:
+		Syntax.default = syntax;
+
+		// Configure root for auto-loading if provided:
+		if (root && !syntax.root) {
+			syntax.root = root;
+		}
+
+		// Import and register the web component:
+		const {CodeElement, upgradeAll} = await import('./Syntax/CodeElement.js');
+
+		if (!customElements.get('syntax-code')) {
+			customElements.define('syntax-code', CodeElement);
+		}
+
+		// Upgrade existing code blocks if requested:
+		if (shouldUpgradeAll) {
+			if (upgradeAll) {
+				// Use the upgradeAll function with the selector:
+				upgradeAll(selector, syntax);
+			} else {
+				// Fallback to customElements.upgrade if the function isn't available:
+				customElements.upgrade(document.body);
+			}
+		}
+	}
+
+	constructor(options = {}) {
+		// Allow customization via constructor options
+		if (options.root !== undefined) this.#root = options.root;
+		if (options.theme !== undefined) this.#defaultOptions.theme = options.theme;
+		if (options.themeRoot !== undefined) this.#themeRoot = options.themeRoot;
+
+		// Set default root if not provided
+		if (this.#root === null) {
+			this.#root = Syntax.detectRoot();
+		}
+	}
+
+	// Public getters for commonly accessed properties
+	get defaultOptions() {
+		return this.#defaultOptions;
+	}
+
+	get languages() {
+		return this.#languages;
+	}
+
+	get aliases() {
+		return this.#aliases;
+	}
+
+	get styles() {
+		return this.#styles;
+	}
+
+	get themes() {
+		return this.#themes;
+	}
+
+	// Theme root for CSS assets
+	get themeRoot() {
+		return this.#resolveThemeRoot().toString();
+	}
+
+	set themeRoot(value) {
+		this.#themeRoot = value;
+		// Clear the stylesheet cache when theme changes
+		this.#styleSheets.clear();
+	}
+
+	get root() {
+		return this.#root;
+	}
+
+	set root(value) {
+		this.#root = value;
+	}
+
+	/**
+	 * Resolve the base URL for the current theme's assets.
+	 * Priority:
+	 * 1) Explicit options.themeRoot or setter
+	 * 2) Relative to this module location: ./themes/<theme>/
+	 */
+	#resolveThemeRoot() {
+		try {
+			if (this.#themeRoot) {
+				return new URL(
+					this.#themeRoot,
+					typeof document !== 'undefined' ? document.baseURI : import.meta.url
+				);
+			}
+			// Default to a folder next to Syntax.js
+			return new URL(`./themes/${this.#defaultOptions.theme}/`, import.meta.url);
+		} catch (error) {
+			// As a last resort, fall back to root if provided or current location:
+			const base =
+				this.#root || (typeof location !== 'undefined' ? location.href : '');
+			return new URL(`themes/${this.#defaultOptions.theme}/`, base);
+		}
+	}
+
+	/**
+	 * Fetch CSS for use in Shadow DOM
+	 * Returns an object with {sheet, cssText} where sheet is a CSSStyleSheet (if supported)
+	 * The result is cached and deduplicated across calls
+	 */
+	async getStyleSheet(url) {
+		return this.#styleSheets.load(url);
+	}
+
+	/**
+	 * Load a stylesheet from a URL
+	 * Used internally by the stylesheet loader
+	 */
+	async #loadStyleSheet(loader, url) {
+		const response = await fetch(url);
+		if (!response.ok) {
+			throw new StyleSheetLoadError(url.toString(), response.status);
+		}
+		const cssText = await response.text();
+
+		// If CSSStyleSheet constructor is available, create and return a stylesheet:
+		if (typeof CSSStyleSheet !== 'undefined') {
+			const sheet = new CSSStyleSheet();
+			await sheet.replace(cssText);
+			return {sheet, cssText};
+		}
+
+		// Otherwise just return the text:
+		return {cssText};
+	}
+
+	/**
+	 * Load a language module from disk/network
+	 * Used internally by the language loader
+	 */
+	async #loadLanguage(loader, name) {
+		const path = `${this.#root}Syntax/Language/${name}.js`;
+		let module;
+		try {
+			module = await import(path);
+		} catch (error) {
+			throw new LanguageLoadError(name, path, {cause: error});
+		}
+
+		// If the module exports a register function, call it with this instance
+		if (typeof module.default === 'function') {
+			module.default(this);
+		}
+
+		// After calling register, aliases have been registered. Re-resolve the name:
+		let resolvedName = this.#aliases[name] || name;
+		return loader.get(resolvedName);
+	}
+
+	/**
+	 * Load a language module dynamically
+	 */
+	async getResource(name) {
+		// First check if the language is already loaded (including via alias)
+		const resolvedName = this.#aliases[name] || name;
+		if (this.#languages.has(resolvedName)) {
+			return this.#languages.get(resolvedName);
+		}
+
+		// Use the loader to deduplicate concurrent loads
+		return this.#languages.load(resolvedName);
+	}
+
+	/**
+	 * Register language aliases
+	 */
+	alias(name, aliases) {
+		this.#aliases[name] = name;
+
+		for (const alias of aliases) {
+			this.#aliases[alias] = name;
+		}
+	}
+
+	/**
+	 * Register a language with this Syntax instance
+	 */
+	register(name, language) {
+		// Store directly in the loader's cache using the new set() method
+		this.#languages.set(name, language);
+
+		// Also store in aliases if not already there
+		if (!this.#aliases[name]) {
+			this.#aliases[name] = name;
+		}
+
+		return language;
+	}
+
+	/**
+	 * Get a language by name or alias
+	 * Auto-loads the language if not already registered
+	 */
+	async getLanguage(name) {
+		// Resolve alias
+		const resolvedName = (this.#aliases[name] || name).toLowerCase();
+
+		// If already loaded, return it
+		if (this.#languages.has(resolvedName)) {
+			return this.#languages.get(resolvedName);
+		}
+
+		// Otherwise, try to load it
+		try {
+			return await this.getResource(name);
+		} catch (error) {
+			if (this.#defaultOptions.strict && !(error instanceof LanguageLoadError)) {
+				// If strict and not a load error, ensure a consistent error type:
+				throw new LanguageNotFoundError(resolvedName, {cause: error});
+			}
+			throw error;
+		}
+	}
+
+	/**
+	 * Check if a language is already registered (synchronous)
+	 */
+	hasLanguage(name) {
+		// Resolve alias
+		const resolvedName = this.#aliases[name] || name;
+		return this.#languages.has(resolvedName);
+	}
+
+	/**
+	 * Get all aliases for a language
+	 */
+	languageAliases(language) {
+		const aliases = [];
+
+		for (const [name, target] of Object.entries(this.#aliases)) {
+			if (target === language) {
+				aliases.push(name);
+			}
+		}
+
+		return aliases;
+	}
+
+	/**
+	 * Get all language names (primary names, not aliases)
+	 */
+	languageNames() {
+		const names = [];
+
+		for (const [name, target] of Object.entries(this.#aliases)) {
+			if (name === target) {
+				names.push(name);
+			}
+		}
+
+		return names;
+	}
+}
+
+export default Syntax;
diff --git a/public/_components/@socketry/syntax/Syntax/CodeElement.js b/public/_components/@socketry/syntax/Syntax/CodeElement.js
new file mode 100644
index 0000000..4c8de1e
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/CodeElement.js
@@ -0,0 +1,416 @@
+import Syntax from '../Syntax.js';
+import {Match} from './Match.js';
+
+const supportsAdopted =
+	typeof CSSStyleSheet !== 'undefined' &&
+	'adoptedStyleSheets' in Document.prototype;
+
+// These values are defined by the DOM standard. Keep them local so this code
+// does not depend on a global `Node`, which may be unavailable in non-browser
+// DOM implementations.
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const CDATA_SECTION_NODE = 4;
+
+/**
+ * Extract the source text and existing markup as source-aligned matches.
+ *
+ * The highlighting pipeline can then insert these matches into the syntax
+ * tree, preserving elements such as links while allowing their contents to
+ * receive syntax highlighting.
+ */
+function extractCode(root) {
+	let text = '';
+	const matches = [];
+
+	function extract(node) {
+		if (node.nodeType === TEXT_NODE || node.nodeType === CDATA_SECTION_NODE) {
+			text += node.nodeValue.replace(/\r/g, '');
+			return;
+		}
+
+		if (node.nodeType !== ELEMENT_NODE) {
+			return;
+		}
+
+		if (node.tagName === 'BR') {
+			text += '\n';
+			return;
+		}
+
+		const offset = text.length;
+		let match = null;
+
+		if (node !== root) {
+			match = new Match(offset, 0, {element: node, force: true, allow: '*'}, '');
+			matches.push(match);
+		}
+
+		for (const child of node.childNodes) {
+			extract(child);
+		}
+
+		if (match) {
+			match.length = text.length - offset;
+			match.endOffset = text.length;
+			match.value = text.slice(offset);
+		}
+	}
+
+	extract(root);
+
+	return {text, matches: matches.filter(match => match.length > 0)};
+}
+
+/**
+ * CodeElement - Web Component for syntax highlighting with isolated styles
+ *
+ * Usage:
+ *   <syntax-code language="javascript">const x = 1;</syntax-code>
+ *   <pre><syntax-code language="ruby">puts "Hello"</syntax-code></pre>
+ */
+export class CodeElement extends HTMLElement {
+	static get observedAttributes() {
+		return ['language', 'theme', 'wrap'];
+	}
+
+	#syntax = null;
+	#shadow;
+	#slot = null;
+	#rendered = null;
+	#adoptedHrefs = new Set();
+	#highlighted = false;
+
+	constructor() {
+		super();
+
+		/**
+		 * A promise that resolves when the current highlighting attempt completes.
+		 * Check `highlighted` before using line measurement APIs.
+		 * @type {Promise<void>}
+		 */
+		this.ready = Promise.resolve();
+	}
+
+	get syntax() {
+		return this.#syntax || Syntax.default;
+	}
+
+	set syntax(value) {
+		this.#syntax = value;
+		// Re-render with new syntax instance if already connected:
+		if (this.isConnected && !this.#highlighted) {
+			this.ready = this.#render();
+		}
+	}
+
+	get language() {
+		return (
+			this.getAttribute('language') ||
+			this.#detectLanguageFromClass()
+		);
+	}
+
+	set language(value) {
+		if (value == null) {
+			this.removeAttribute('language');
+		} else {
+			this.setAttribute('language', value);
+		}
+	}
+
+	get theme() {
+		return this.getAttribute('theme') || this.syntax.defaultOptions.theme;
+	}
+
+	set theme(value) {
+		if (value == null) {
+			this.removeAttribute('theme');
+		} else {
+			this.setAttribute('theme', value);
+		}
+	}
+
+	get wrap() {
+		return this.hasAttribute('wrap');
+	}
+
+	set wrap(value) {
+		if (value) {
+			this.setAttribute('wrap', '');
+		} else {
+			this.removeAttribute('wrap');
+		}
+	}
+
+	/**
+	 * Get the bounding client rect of a specific line (1-based).
+	 * @param {number} lineNumber - The 1-based line number.
+	 * @returns {DOMRect|null} The bounding rect, or null if not found.
+	 */
+	getLineBoundingClientRect(lineNumber) {
+		if (!this.#shadow) return null;
+
+		const code = this.#shadow.querySelector('code');
+		if (!code) return null;
+
+		const lines = code.children;
+		if (lineNumber < 1 || lineNumber > lines.length) return null;
+
+		return lines[lineNumber - 1].getBoundingClientRect();
+	}
+
+	/**
+	 * Get the total number of rendered lines.
+	 * @returns {number} The line count, or 0 if not yet rendered.
+	 */
+	get lineCount() {
+		if (!this.#shadow) return 0;
+
+		const code = this.#shadow.querySelector('code');
+		if (!code) return 0;
+
+		return code.children.length;
+	}
+
+	/**
+	 * Whether the current highlighting attempt has completed successfully.
+	 * @returns {boolean}
+	 */
+	get highlighted() {
+		return this.#highlighted;
+	}
+
+	connectedCallback() {
+		// Detect if we're inside a <pre> element and set wrap attribute
+		if (this.parentElement?.tagName === 'PRE') {
+			this.wrap = true;
+		}
+
+		// Don't re-highlight if already done
+		if (this.#highlighted) {
+			return;
+		}
+
+		if (!this.#shadow) {
+			this.#shadow = this.attachShadow({mode: 'open'});
+			this.#slot = document.createElement('slot');
+			this.#shadow.appendChild(this.#slot);
+		}
+
+		this.ready = this.#render();
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) {
+			return;
+		}
+
+		if (
+			(name === 'language' || name === 'theme' || name === 'wrap') &&
+			this.isConnected &&
+			this.#shadow
+		) {
+			// Reset highlighted state and track the new render attempt:
+			this.#highlighted = false;
+			this.#adoptedHrefs.clear();
+			this.ready = this.#render();
+		}
+	}
+
+	/**
+	 * Detect language from class names (e.g., language-javascript, brush-ruby)
+	 */
+	#detectLanguageFromClass() {
+		const classes = this.className.split(/\s+/);
+
+		for (const cls of classes) {
+			// Match language-* or brush-* patterns
+			const match = cls.match(/^(?:language|brush)-(.+)$/);
+			if (match) {
+				return match[1];
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Get the source text and existing markup to highlight.
+	 */
+	#getCodeContent() {
+		// Check if there's a <code> child element
+		const codeElement = this.querySelector('code');
+		if (codeElement) {
+			return extractCode(codeElement);
+		}
+
+		return extractCode(this);
+	}
+
+	/**
+	 * Load theme CSS into shadow root
+	 */
+	async #loadStylesheets(languageName) {
+		// Guard: ensure shadow root exists
+		if (!this.#shadow) {
+			return;
+		}
+
+		const themeRoot = new URL(
+			this.syntax.themeRoot,
+			typeof document !== 'undefined' ? document.baseURI : import.meta.url
+		);
+
+		const urls = [
+			new URL('syntax.css', themeRoot),
+			new URL(`${languageName}.css`, themeRoot)
+		];
+
+		if (supportsAdopted && this.#shadow.adoptedStyleSheets !== undefined) {
+			const sheets = Array.from(this.#shadow.adoptedStyleSheets);
+			for (const url of urls) {
+				const href = url.toString();
+				if (this.#adoptedHrefs.has(href)) continue;
+				try {
+					const result = await this.syntax.getStyleSheet(url);
+					if (result.sheet) {
+						sheets.push(result.sheet);
+						this.#adoptedHrefs.add(href);
+					}
+				} catch (error) {
+					console.warn(`Failed to load ${href}:`, error);
+				}
+			}
+			this.#shadow.adoptedStyleSheets = sheets;
+		} else {
+			// Fallback: inline <style> tags in shadow root
+			for (const url of urls) {
+				const href = url.toString();
+				if (this.#adoptedHrefs.has(href)) continue;
+				try {
+					const result = await this.syntax.getStyleSheet(url);
+					const style = document.createElement('style');
+					style.textContent = result.cssText;
+					this.#shadow.appendChild(style);
+					this.#adoptedHrefs.add(href);
+				} catch (error) {
+					console.warn(`Failed to load ${href}:`, error);
+				}
+			}
+		}
+	}
+
+	/**
+	 * Perform syntax highlighting and render into shadow DOM
+	 */
+	async #render() {
+		try {
+			const languageName = this.language;
+			const {text: code, matches} = this.#getCodeContent();
+
+			if (!languageName) {
+				console.warn('<syntax-code>: No language specified');
+				return;
+			}
+
+			// Get or auto-load the language
+			const language = await this.syntax.getLanguage(languageName);
+
+			if (!language) {
+				console.warn(
+					`<syntax-code>: Language '${languageName}' not found and could not be loaded`
+				);
+				return;
+			}
+
+			// Load theme CSS into shadow root using the language's canonical name
+			await this.#loadStylesheets(language.name);
+
+			// Highlight off-DOM so the original source remains visible while all
+			// asynchronous work is in progress:
+			const highlighted = await language.process(
+				this.syntax,
+				code,
+				undefined,
+				matches
+			);
+
+			// Swap the completed rendering in synchronously. On the first render,
+			// the slot keeps the light-DOM source visible. On subsequent renders,
+			// keep the previous highlighted content visible until its replacement
+			// is ready.
+			if (this.#rendered) {
+				this.#rendered.replaceWith(highlighted);
+			} else if (this.#slot) {
+				this.#slot.replaceWith(highlighted);
+				this.#slot = null;
+			} else {
+				this.#shadow.appendChild(highlighted);
+			}
+
+			this.#rendered = highlighted;
+
+			this.#highlighted = true;
+		} catch (error) {
+			console.warn('<syntax-code> render failed:', error);
+		}
+	}
+}
+
+/**
+ * Auto-register the custom element
+ */
+if (
+	typeof customElements !== 'undefined' &&
+	!customElements.get('syntax-code')
+) {
+	customElements.define('syntax-code', CodeElement);
+}
+
+/**
+ * Compatibility layer - upgrade existing code blocks to web components
+ */
+export function upgradeAll(selector, syntax = null) {
+	const elements = document.querySelectorAll(selector);
+
+	for (const element of elements) {
+		// Create a syntax-code wrapper
+		const wrapper = document.createElement('syntax-code');
+		if (syntax) {
+			wrapper.syntax = syntax;
+		}
+
+		// Try to detect language from various sources
+		let language = element.getAttribute('lang') || element.getAttribute('language');
+
+		if (!language) {
+			// Check class names
+			const classes = element.className.split(/\s+/);
+			for (const cls of classes) {
+				const match = cls.match(/^(?:language|brush)-(.+)$/);
+				if (match) {
+					language = match[1];
+					break;
+				}
+			}
+		}
+
+		if (language) {
+			wrapper.setAttribute('language', language);
+		}
+
+		// Move the source content into the wrapper so existing markup remains
+		// available for extraction and re-rendering.
+		while (element.firstChild) {
+			wrapper.appendChild(element.firstChild);
+		}
+
+		// Replace <code> with <syntax-code>, leaving <pre> parent in place
+		const parent = element.parentElement;
+		parent.replaceChild(wrapper, element);
+	}
+}
+
+export {Syntax};
+export default CodeElement;
diff --git a/public/_components/@socketry/syntax/Syntax/Errors.js b/public/_components/@socketry/syntax/Syntax/Errors.js
new file mode 100644
index 0000000..a8d266a
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Errors.js
@@ -0,0 +1,52 @@
+export class GenericSyntaxError extends Error {
+	constructor(message, options = {}) {
+		super(message, options);
+		Object.defineProperty(this, 'name', {value: this.constructor.name});
+	}
+}
+
+export class LanguageNotFoundError extends GenericSyntaxError {
+	constructor(language, options = {}) {
+		super(`Language not found: ${language}`, options);
+		this.language = language;
+	}
+}
+
+export class LanguageLoadError extends GenericSyntaxError {
+	constructor(language, url, options = {}) {
+		super(`Failed to load language '${language}' from ${url}`, options);
+		this.language = language;
+		this.url = url;
+	}
+}
+
+export class StyleSheetLoadError extends GenericSyntaxError {
+	constructor(url, status, options = {}) {
+		super(`Failed to load stylesheet ${url} (status: ${status})`, options);
+		this.url = url;
+		this.status = status;
+	}
+}
+
+export class RuleApplyError extends GenericSyntaxError {
+	constructor(rule, options = {}) {
+		const pattern =
+			rule?.pattern instanceof RegExp
+				? `/${rule.pattern.source}/${rule.pattern.flags}`
+				: String(rule?.pattern);
+		const type = rule?.type || rule?.klass || 'unknown';
+		super(`Rule apply failed (type=${type}, pattern=${pattern})`, options);
+		this.rule = rule;
+	}
+}
+
+export class HighlightRenderError extends GenericSyntaxError {}
+
+export default {
+	GenericSyntaxError,
+	LanguageNotFoundError,
+	LanguageLoadError,
+	StyleSheetLoadError,
+	RuleApplyError,
+	HighlightRenderError
+};
diff --git a/public/_components/@socketry/syntax/Syntax/Language.js b/public/_components/@socketry/syntax/Syntax/Language.js
new file mode 100644
index 0000000..9a460d9
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language.js
@@ -0,0 +1,279 @@
+import {Match} from './Match.js';
+import {Rule} from './Rule.js';
+import {LanguageNotFoundError, RuleApplyError} from './Errors.js';
+
+export class Language {
+	// Public properties that define the language
+	name;
+
+	// A list of processes that may be run after extracting matches.
+	processes = {};
+
+	// A sequential list of rules for extracting matches.
+	#rules = [];
+
+	// A list of all the parent languages this language derives from.
+	#parents = [];
+
+	constructor(name = null) {
+		// The primary class of this language. Must be unique.
+		this.name = name;
+	}
+
+	/**
+	 * Add a parent to the language. This language should be loaded as a dependency.
+	 */
+	derives(name) {
+		this.#parents.push(name);
+		this.#rules.push({
+			apply: async function (syntax, rule, text) {
+				const parentLanguage = await syntax.getLanguage(name);
+				return parentLanguage.getMatches(syntax, text);
+			}
+		});
+	}
+
+	/**
+	 * Return an array of all classes that the language consists of.
+	 */
+	async allNames(syntax) {
+		const names = [this.name];
+
+		for (const parent of this.#parents) {
+			if (syntax) {
+				const parentLanguage = await syntax.getLanguage(parent);
+				if (parentLanguage) names.push(...(await parentLanguage.allNames(syntax)));
+			}
+		}
+
+		return names;
+	}
+
+	/**
+	 * Push a rule onto the language.
+	 */
+	push(...args) {
+		if (Array.isArray(args[0])) {
+			const patterns = args[0];
+			const rule = args[1];
+
+			let all = '(';
+
+			for (let i = 0; i < patterns.length; i += 1) {
+				if (i > 0) all += '|';
+
+				const p = patterns[i];
+
+				if (p instanceof RegExp) {
+					all += p.source;
+				} else {
+					all += Rule.convertStringToTokenPattern(p, true);
+				}
+			}
+
+			all += ')';
+
+			this.push({
+				...rule,
+				pattern: new RegExp(all, rule.options)
+			});
+		} else {
+			const rule = args[0];
+
+			// Normalize and validate the rule
+			const normalized = Rule.normalizeRule(rule, this);
+
+			if (
+				typeof normalized.pattern === 'undefined' ||
+				normalized.pattern instanceof RegExp
+			) {
+				this.#rules.push(normalized);
+			} else {
+				console.error('Syntax Error: Malformed rule: ', rule);
+			}
+		}
+	}
+
+	/**
+	 * Get matches for a specific rule.
+	 */
+	async getMatchesForRule(syntax, text, rule) {
+		let matches = [];
+
+		// Short circuit (user defined) function:
+		if (typeof rule.apply !== 'undefined') {
+			try {
+				const result = rule.apply(syntax, rule, text);
+				matches = result instanceof Promise ? await result : result;
+			} catch (error) {
+				if (syntax?.defaultOptions?.strict) {
+					// If the underlying error is a strict language resolution error, surface it directly:
+					if (error instanceof LanguageNotFoundError) throw error;
+					throw new RuleApplyError(rule, {cause: error});
+				} else {
+					console.warn('Syntax Warning: Rule apply failed:', rule, error);
+					matches = [];
+				}
+			}
+		}
+
+		if (rule.debug) {
+			console.log('Syntax matches:', rule, text, matches);
+		}
+
+		return matches;
+	}
+
+	/**
+	 * Get the rule for a specific type.
+	 */
+	getRuleForType(type) {
+		for (const rule of this.#rules) {
+			if (rule.type === type) {
+				return rule;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Get all matches for the given text.
+	 */
+	async getMatches(syntax, text) {
+		const matches = [];
+
+		for (const rule of this.#rules) {
+			matches.push(...(await this.getMatchesForRule(syntax, text, rule)));
+		}
+
+		return matches;
+	}
+
+	/**
+	 * A helper function for building a tree from a specific rule.
+	 */
+	static async buildTree(syntax, rule, text, offset, additionalMatches) {
+		let language;
+		try {
+			language = await syntax.getLanguage(rule.language);
+		} catch (error) {
+			if (syntax?.defaultOptions?.strict) {
+				// Normalize any load error to LanguageNotFoundError for consistency:
+				throw new LanguageNotFoundError(rule.language, {cause: error});
+			} else {
+				console.warn(
+					`Syntax Warning: Failed to load language '${rule.language}' for building tree:`,
+					error
+				);
+				return new Match(offset || 0, text.length, rule, text);
+			}
+		}
+
+		if (!language) {
+			if (syntax?.defaultOptions?.strict) {
+				throw new LanguageNotFoundError(rule.language);
+			} else {
+				console.warn(
+					`Syntax Warning: Language '${rule.language}' not found for building tree.`
+				);
+				// Return a simple match without children as fallback
+				return new Match(offset || 0, text.length, rule, text);
+			}
+		}
+
+		const match = await language.buildTree(
+			syntax,
+			text,
+			offset,
+			additionalMatches
+		);
+
+		Object.assign(match.expression, rule);
+
+		return match;
+	}
+
+	/**
+	 * Build a syntax tree from a given block of text.
+	 */
+	async buildTree(syntax, text, offset, additionalMatches) {
+		offset = offset || 0;
+
+		// Fixes code that uses \r\n for line endings
+		text = text.replace(/\r/g, '');
+
+		const matches = await this.getMatches(syntax, text);
+
+		// Shift matches if offset is provided
+		if (offset && offset > 0) {
+			for (const match of matches) {
+				match.shift(offset);
+			}
+		}
+
+		const top = new Match(
+			offset,
+			text.length,
+			{type: (await this.allNames(syntax)).join(' '), allow: '*', owner: this},
+			text
+		);
+
+		// This sort is absolutely key to the tree insertion algorithm
+		matches.sort(Match.sort);
+
+		for (const match of matches) {
+			top.insertAtEnd(match);
+		}
+
+		if (additionalMatches) {
+			for (const match of additionalMatches) {
+				top.insert(match, true);
+			}
+		}
+
+		top.complete = true;
+
+		return top;
+	}
+
+	/**
+	 * Build a syntax tree and process it into HTML.
+	 *
+	 * Additional matches can preserve source annotations, such as links, by
+	 * inserting them into the syntax tree before it is reduced to HTML.
+	 */
+	async process(syntax, text, options, additionalMatches) {
+		const top = await this.buildTree(syntax, text, 0, additionalMatches);
+
+		const lines = top.splitLines();
+
+		const html = document.createElement('code');
+		html.className = 'syntax highlighted';
+		html.setAttribute('part', 'code');
+
+		for (const line of lines) {
+			const processedLine = line.reduce(null, (container, match) => {
+				if (match.expression) {
+					if (match.expression.process) {
+						container = match.expression.process(container, match, options);
+					}
+
+					if (match.expression.owner) {
+						const process = match.expression.owner.processes[match.expression.type];
+						if (process) {
+							container = process(container, match, options);
+						}
+					}
+				}
+				return container;
+			});
+
+			html.appendChild(processedLine);
+		}
+
+		return html;
+	}
+}
+
+export default Language;
diff --git a/public/_components/@socketry/syntax/Syntax/Language/apache.js b/public/_components/@socketry/syntax/Syntax/Language/apache.js
new file mode 100644
index 0000000..b986756
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/apache.js
@@ -0,0 +1,49 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('apache');
+
+language.push({
+	pattern: /(<(\w+).*?>)/i,
+	matches: Rule.extractMatches(
+		{
+			type: 'tag',
+			allow: ['attribute', 'tag-name', 'string']
+		},
+		{
+			type: 'tag-name',
+			process: Rule.webLinkProcess(
+				'http://httpd.apache.org/docs/trunk/mod/directive-dict.html#'
+			)
+		}
+	)
+});
+
+language.push({
+	pattern: /(<\/(\w+).*?>)/i,
+	matches: Rule.extractMatches(
+		{type: 'tag', allow: ['tag-name']},
+		{type: 'tag-name'}
+	)
+});
+
+language.push({
+	pattern: /^\s+([A-Z][\w]+)/m,
+	matches: Rule.extractMatches({
+		type: 'function',
+		allow: ['attribute'],
+		process: Rule.webLinkProcess(
+			'http://httpd.apache.org/docs/trunk/mod/directive-dict.html#'
+		)
+	})
+});
+
+language.push(Rule.perlStyleComment);
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+
+language.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('apache', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/applescript.js b/public/_components/@socketry/syntax/Syntax/Language/applescript.js
new file mode 100644
index 0000000..09eff77
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/applescript.js
@@ -0,0 +1,157 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('applescript');
+
+var keywords = [
+	'after',
+	'before',
+	'beginning',
+	'continue',
+	'copy',
+	'each',
+	'end',
+	'every',
+	'from',
+	'get',
+	'global',
+	'in',
+	'local',
+	'named',
+	'of',
+	'return',
+	'set',
+	'some',
+	'that',
+	'the',
+	'then',
+	'times',
+	'to',
+	'where',
+	'whose',
+	'with',
+	'without'
+];
+
+language.push(keywords, {type: 'keyword'});
+
+var ordinals = [
+	'first',
+	'second',
+	'third',
+	'fourth',
+	'fifth',
+	'sixth',
+	'seventh',
+	'eighth',
+	'ninth',
+	'tenth',
+	'last',
+	'front',
+	'back',
+	'middle'
+];
+
+language.push(ordinals, {type: 'keyword'});
+
+var specials = [
+	'activate',
+	'add',
+	'alias',
+	'AppleScript',
+	'ask',
+	'attachment',
+	'boolean',
+	'class',
+	'constant',
+	'delete',
+	'duplicate',
+	'empty',
+	'exists',
+	'false',
+	'id',
+	'integer',
+	'list',
+	'make',
+	'message',
+	'modal',
+	'modified',
+	'new',
+	'no',
+	'paragraph',
+	'pi',
+	'properties',
+	'quit',
+	'real',
+	'record',
+	'remove',
+	'rest',
+	'result',
+	'reveal',
+	'reverse',
+	'run',
+	'running',
+	'save',
+	'string',
+	'true',
+	'word',
+	'yes'
+];
+
+language.push(specials, {type: 'keyword'});
+
+language.push(Rule.webLink);
+
+// AppleScript supports multiple comment styles
+language.push({
+	pattern: /(\-\-|#).*$/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push({
+	pattern: /\(\*(?:[\s\S]*?\(\*[\s\S]*?\*\))*[\s\S]*?\*\)/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push(Rule.doubleQuotedString);
+
+// Ordinal numbers (1st, 2nd, 3rd, etc.)
+language.push({
+	pattern: /\b\d+(st|nd|rd|th)\b/,
+	type: 'constant'
+});
+
+// Regular numbers
+language.push({
+	pattern: /\b-?\d+\.?\d*(?:E[+\-]?\d+)?\b/,
+	type: 'constant'
+});
+
+language.push({
+	pattern: /&|¬|=|≠|>|<|≥|>=|≤|<=|\*|\+|-|\/|÷|\^/,
+	type: 'operator'
+});
+
+language.push({
+	pattern:
+		/\b(?:and|as|div|mod|not|or|return(?!\s&)(ing)?|equals|(is(n't| not)? )?equal( to)?|does(n't| not) equal|(is(n't| not)? )?(greater|less) than( or equal( to)?)?|(comes|does(n't| not) come) (after|before)|is(n't| not)?( in)? (back|front) of|is(n't| not)? behind|is(n't| not)?( (in|contained by))?|does(n't| not) contain|contain(s)?|(start|begin|end)(s)? with|((but|end) )?(consider|ignor)ing|prop(erty)?|(a )?ref(erence)?( to)?|repeat (until|while|with)|((end|exit) )?repeat|((else|end) )?if|else|(end )?(script|tell|try)|(on )?error|(put )?into|(of )?(it|me)|its|my|with (timeout( of)?|transaction)|end (timeout|transaction))\b/,
+	type: 'keyword'
+});
+
+language.push({
+	pattern:
+		/\b(?:about|above|against|around|at|below|beneath|beside|between|by|(apart|aside) from|(instead|out) of|into|on(to)?|over|since|thr(ough|u)|under)\b/,
+	type: 'keyword'
+});
+
+language.push({
+	pattern:
+		/\b(?:adding folder items to|after receiving|choose( ((remote )?application|color|folder|from list|URL))?|clipboard info|set the clipboard to|(the )?clipboard|entire contents|display(ing| (alert|dialog|mode))?|document( (edited|file|nib name))?|file( (name|type))?|(info )?for|giving up after|(name )?extension|quoted form|return(ed)?|second(?! item)(s)?|list (disks|folder)|text item(s| delimiters)?|(Unicode )?text|(disk )?item(s)?|((current|list) )?view|((container|key) )?window|with (data|icon( (caution|note|stop))?|parameter(s)?|prompt|properties|seed|title)|case|diacriticals|hyphens|numeric strings|punctuation|white space|folder creation|application(s( folder)?| (processes|scripts position|support))?|((desktop )?(pictures )?|(documents|downloads|favorites|home|keychain|library|movies|music|public|scripts|sites|system|users|utilities|workflows) )folder|desktop|Folder Action scripts|font(s| panel)?|help|internet plugins|modem scripts|(system )?preferences|printer descriptions|scripting (additions|components)|shared (documents|libraries)|startup (disk|items)|temporary items|trash|on server|in AppleTalk zone|((as|long|short) )?user name|user (ID|locale)|(with )?password|in (bundle( with identifier)?|directory)|(close|open for) access|read|write( permission)?|(g|s)et eof|using( delimiters)?|starting at|default (answer|button|color|country code|entr(y|ies)|identifiers|items|name|location|script editor)|hidden( answer)?|open(ed| (location|untitled))?|error (handling|reporting)|(do( shell)?|load|run|store) script|administrator privileges|altering line endings|get volume settings|(alert|boot|input|mount|output|set) volume|output muted|(fax|random )?number|round(ing)?|up|down|toward zero|to nearest|as taught in school|system (attribute|info)|((AppleScript( Studio)?|system) )?version|(home )?directory|(IPv4|primary Ethernet) address|CPU (type|speed)|physical memory|time (stamp|to GMT)|replacing|ASCII (character|number)|localized string|from table|offset|summarize|beep|delay|say|(empty|multiple) selections allowed|(of|preferred) type|invisibles|showing( package contents)?|editable URL|(File|FTP|News|Media|Web) [Ss]ervers|Telnet hosts|Directory services|Remote applications|waiting until completion|saving( (in|to))?|path (for|to( (((current|frontmost) )?application|resource))?)|POSIX (file|path)|(background|RGB) color|(OK|cancel) button name|cancel button|button(s)?|cubic ((centi)?met(re|er)s|yards|feet|inches)|square ((kilo)?met(re|er)s|miles|yards|feet)|(centi|kilo)?met(re|er)s|miles|yards|feet|inches|lit(re|er)s|gallons|quarts|(kilo)?grams|ounces|pounds|degrees (Celsius|Fahrenheit|Kelvin)|print( (dialog|settings))?|clos(e(able)?|ing)|(de)?miniaturized|miniaturizable|zoom(ed|able)|attribute run|action (method|property|title)|phone|email|((start|end)ing|home) page|((birth|creation|current|custom|modification) )?date|((((phonetic )?(first|last|middle))|computer|host|maiden|related) |nick)?name|aim|icq|jabber|msn|yahoo|address(es)?|save addressbook|should enable action|city|country( code)?|formatte(r|d address)|(palette )?label|state|street|zip|AIM [Hh]andle(s)?|my card|select(ion| all)?|unsaved|(alpha )?value|entr(y|ies)|group|(ICQ|Jabber|MSN) handle|person|people|company|department|icon image|job title|note|organization|suffix|vcard|url|copies|collating|pages (across|down)|request print time|target( printer)?|((GUI Scripting|Script menu) )?enabled|show Computer scripts|(de)?activated|awake from nib|became (key|main)|call method|of (class|object)|center|clicked toolbar item|closed|for document|exposed|(can )?hide|idle|keyboard (down|up)|event( (number|type))?|launch(ed)?|load (image|movie|nib|sound)|owner|log|mouse (down|dragged|entered|exited|moved|up)|move|column|localization|resource|script|register|drag (info|types)|resigned (active|key|main)|resiz(e(d)?|able)|right mouse (down|dragged|up)|scroll wheel|(at )?index|should (close|open( untitled)?|quit( after last window closed)?|zoom)|((proposed|screen) )?bounds|show(n)?|behind|in front of|size (mode|to fit)|update(d| toolbar item)?|was (hidden|miniaturized)|will (become active|close|finish launching|hide|miniaturize|move|open|quit|(resign )?active|((maximum|minimum|proposed) )?size|show|zoom)|bundle|data source|movie|pasteboard|sound|tool(bar| tip)|(color|open|save) panel|coordinate system|frontmost|main( (bundle|menu|window))?|((services|(excluded from )?windows) )?menu|((executable|frameworks|resource|scripts|shared (frameworks|support)) )?path|(selected item )?identifier|data|content(s| view)?|character(s)?|click count|(command|control|option|shift) key down|context|delta (x|y|z)|key( code)?|location|pressure|unmodified characters|types|(first )?responder|playing|(allowed|selectable) identifiers|allows customization|(auto saves )?configuration|visible|image( name)?|menu form representation|tag|user(-| )defaults|associated file name|(auto|needs) display|current field editor|floating|has (resize indicator|shadow)|hides when deactivated|level|minimized (image|title)|opaque|position|release when closed|sheet|title(d)?)\b/,
+	type: 'keyword'
+});
+
+export default function register(syntax) {
+	syntax.register('applescript', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/assembly.js b/public/_components/@socketry/syntax/Syntax/Language/assembly.js
new file mode 100644
index 0000000..10d5ea4
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/assembly.js
@@ -0,0 +1,42 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('assembly');
+
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+
+language.push({pattern: /\.[a-zA-Z_][a-zA-Z0-9_]*/m, type: 'directive'});
+
+language.push({pattern: /^[a-zA-Z_][a-zA-Z0-9_]*:/m, type: 'label'});
+
+language.push({
+	pattern: /^\s*([a-zA-Z]+)/m,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+language.push({pattern: /(-[0-9]+)|(\b[0-9]+)|(\$[0-9]+)/, type: 'constant'});
+language.push({
+	pattern: /(\-|\b|\$)(0x[0-9a-f]+|[0-9]+|[a-z0-9_]+)/i,
+	type: 'constant'
+});
+
+language.push({pattern: /%\w+/, type: 'register'});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Comments
+language.push(Rule.perlStyleComment);
+language.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('assembly', language);
+	syntax.alias('assembly', ['asm']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/bash-script.js b/public/_components/@socketry/syntax/Syntax/Language/bash-script.js
new file mode 100644
index 0000000..fc5284c
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/bash-script.js
@@ -0,0 +1,108 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+const bashScript = new Language('bash-script');
+
+var operators = ['&&', '|', ';', '{', '}'];
+bashScript.push(operators, {type: 'operator'});
+
+bashScript.push({
+	pattern:
+		/(?:^|\||;|&&)\s*((?:"([^"]|\\")+"|'([^']|\\')+'|\\\n|.|[ \t])+?)(?=$|\||;|&&)/im,
+	matches: Rule.extractMatches({language: 'bash-statement'})
+});
+
+const bashStatement = new Language('bash-statement');
+
+var keywords = [
+	'break',
+	'case',
+	'continue',
+	'do',
+	'done',
+	'elif',
+	'else',
+	'eq',
+	'fi',
+	'for',
+	'function',
+	'ge',
+	'gt',
+	'if',
+	'in',
+	'le',
+	'lt',
+	'ne',
+	'return',
+	'then',
+	'until',
+	'while'
+];
+bashStatement.push(keywords, {type: 'keyword'});
+
+var statementOperators = [
+	'>',
+	'<',
+	'=',
+	'`',
+	'--',
+	'{',
+	'}',
+	'(',
+	')',
+	'[',
+	']'
+];
+bashStatement.push(statementOperators, {type: 'operator'});
+
+bashStatement.push({
+	pattern: /\(\((.*?)\)\)/im,
+	type: 'expression',
+	allow: ['variable', 'string', 'operator', 'constant']
+});
+
+bashStatement.push({
+	pattern: /`([\s\S]+?)`/im,
+	matches: Rule.extractMatches({language: 'bash-script', debug: true})
+});
+
+bashStatement.push(Rule.perlStyleComment);
+
+// Probably need to write a real parser here rather than using regular expressions, it is too fragile
+// and misses lots of edge cases (e.g. nested brackets, delimiters).
+bashStatement.push({
+	pattern:
+		/^\s*((?:\S+?=\$?(?:\[[^\]]+\]|\(\(.*?\)\)|"(?:[^"]|\\")+"|'(?:[^']|\\')+'|\S+)\s*)*)((?:(\\ |\S)+)?)/im,
+	matches: Rule.extractMatches(
+		{
+			type: 'env',
+			allow: ['variable', 'string', 'operator', 'constant', 'expression']
+		},
+		{type: 'function', allow: ['variable', 'string']}
+	)
+});
+
+bashStatement.push({
+	pattern: /(\S+?)=/im,
+	matches: Rule.extractMatches({type: 'variable'}),
+	only: ['env']
+});
+
+bashStatement.push({
+	pattern: /\$\w+/,
+	type: 'variable'
+});
+
+bashStatement.push({pattern: /\s\-+[\w-]+/, type: 'option'});
+
+bashStatement.push(Rule.singleQuotedString);
+bashStatement.push(Rule.doubleQuotedString);
+
+bashStatement.push(Rule.decimalNumber);
+bashStatement.push(Rule.hexNumber);
+
+bashStatement.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('bash-script', bashScript);
+	syntax.register('bash-statement', bashStatement);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/bash.js b/public/_components/@socketry/syntax/Syntax/Language/bash.js
new file mode 100644
index 0000000..c08d9c2
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/bash.js
@@ -0,0 +1,32 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('bash');
+
+language.push({
+	pattern: /^([\w@:~ ]*?[\$|\#])\s+(.*?)$/m,
+	matches: Rule.extractMatches({type: 'prompt'}, {language: 'bash-script'})
+});
+
+language.push({
+	pattern: /^\-\- .*$/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// URLs
+language.push(Rule.webLink);
+
+language.push({
+	type: 'stderr',
+	allow: ['string', 'comment', 'constant', 'href']
+});
+
+export default function register(syntax) {
+	syntax.register('bash', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/basic.js b/public/_components/@socketry/syntax/Syntax/Language/basic.js
new file mode 100644
index 0000000..f60f25a
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/basic.js
@@ -0,0 +1,232 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+const vbStyleComment = {
+	pattern: /' .*$/m,
+	type: 'comment',
+	allow: ['href']
+};
+
+const language = new Language('basic');
+
+var keywords = [
+	'AddHandler',
+	'AddressOf',
+	'Alias',
+	'And',
+	'AndAlso',
+	'Ansi',
+	'As',
+	'Assembly',
+	'Auto',
+	'ByRef',
+	'ByVal',
+	'Call',
+	'Case',
+	'Catch',
+	'Declare',
+	'Default',
+	'Delegate',
+	'Dim',
+	'DirectCast',
+	'Do',
+	'Each',
+	'Else',
+	'ElseIf',
+	'End',
+	'Enum',
+	'Erase',
+	'Error',
+	'Event',
+	'Exit',
+	'Finally',
+	'For',
+	'Function',
+	'Get',
+	'GetType',
+	'GoSub',
+	'GoTo',
+	'Handles',
+	'If',
+	'Implements',
+	'Imports',
+	'In',
+	'Inherits',
+	'Interface',
+	'Is',
+	'Let',
+	'Lib',
+	'Like',
+	'Loop',
+	'Mod',
+	'Module',
+	'MustOverride',
+	'Namespace',
+	'New',
+	'Next',
+	'Not',
+	'On',
+	'Option',
+	'Optional',
+	'Or',
+	'OrElse',
+	'Overloads',
+	'Overridable',
+	'Overrides',
+	'ParamArray',
+	'Preserve',
+	'Property',
+	'RaiseEvent',
+	'ReadOnly',
+	'ReDim',
+	'REM',
+	'RemoveHandler',
+	'Resume',
+	'Return',
+	'Select',
+	'Set',
+	'Static',
+	'Step',
+	'Stop',
+	'Structure',
+	'Sub',
+	'SyncLock',
+	'Then',
+	'Throw',
+	'To',
+	'Try',
+	'TypeOf',
+	'Unicode',
+	'Until',
+	'When',
+	'While',
+	'With',
+	'WithEvents',
+	'WriteOnly',
+	'Xor',
+	'ExternalSource',
+	'Region',
+	'Print',
+	'Class'
+];
+
+var types = [
+	'CBool',
+	'CByte',
+	'CChar',
+	'CDate',
+	'CDec',
+	'CDbl',
+	'Char',
+	'CInt',
+	'CLng',
+	'CObj',
+	'Const',
+	'CShort',
+	'CSng',
+	'CStr',
+	'CType',
+	'Date',
+	'Decimal',
+	'Variant',
+	'String',
+	'Short',
+	'Long',
+	'Single',
+	'Double',
+	'Object',
+	'Integer',
+	'Boolean',
+	'Byte',
+	'Char'
+];
+
+var operators = [
+	'+',
+	'-',
+	'*',
+	'/',
+	'+=',
+	'-=',
+	'*=',
+	'/=',
+	'=',
+	':=',
+	'==',
+	'!=',
+	'!',
+	'%',
+	'?',
+	'>',
+	'<',
+	'>=',
+	'<=',
+	'&&',
+	'||',
+	'&',
+	'|',
+	'^',
+	'.',
+	'~',
+	'..',
+	'>>',
+	'<<',
+	'>>>',
+	'<<<',
+	'>>=',
+	'<<=',
+	'>>>=',
+	'<<<=',
+	'%=',
+	'^=',
+	'&=',
+	'\\',
+	'\\=',
+	'@'
+];
+
+var values = [
+	'Me',
+	'MyClass',
+	'MyBase',
+	'super',
+	'True',
+	'False',
+	'Nothing',
+	/[A-Z][A-Z0-9_]+/
+];
+
+var access = [
+	'Public',
+	'Protected',
+	'Private',
+	'Shared',
+	'Friend',
+	'Shadows',
+	'MustInherit',
+	'NotInheritable',
+	'NotOverridable'
+];
+
+language.push(types, {type: 'type'});
+language.push(keywords, {type: 'keyword', options: 'gi'});
+language.push(operators, {type: 'operator'});
+language.push(access, {type: 'access'});
+language.push(values, {type: 'constant'});
+
+language.push(Rule.decimalNumber);
+
+// ClassNames (CamelCase)
+language.push(Rule.camelCaseType);
+
+language.push(vbStyleComment);
+
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+export default function register(syntax) {
+	syntax.register('basic', language);
+	syntax.alias('basic', ['vb']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/c++.js b/public/_components/@socketry/syntax/Syntax/Language/c++.js
new file mode 100644
index 0000000..c4f591e
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/c++.js
@@ -0,0 +1 @@
+export {default} from './clang.js';
diff --git a/public/_components/@socketry/syntax/Syntax/Language/c.js b/public/_components/@socketry/syntax/Syntax/Language/c.js
new file mode 100644
index 0000000..c4f591e
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/c.js
@@ -0,0 +1 @@
+export {default} from './clang.js';
diff --git a/public/_components/@socketry/syntax/Syntax/Language/clang.js b/public/_components/@socketry/syntax/Syntax/Language/clang.js
new file mode 100644
index 0000000..27d3f5f
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/clang.js
@@ -0,0 +1,201 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('clang');
+
+var keywords = [
+	'@interface',
+	'@implementation',
+	'@protocol',
+	'@end',
+	'@try',
+	'@throw',
+	'@catch',
+	'@finally',
+	'@class',
+	'@selector',
+	'@encode',
+	'@synchronized',
+	'@property',
+	'@synthesize',
+	'@dynamic',
+	'struct',
+	'break',
+	'continue',
+	'else',
+	'for',
+	'switch',
+	'case',
+	'default',
+	'enum',
+	'goto',
+	'register',
+	'sizeof',
+	'typedef',
+	'volatile',
+	'do',
+	'extern',
+	'if',
+	'return',
+	'static',
+	'union',
+	'while',
+	'asm',
+	'dynamic_cast',
+	'namespace',
+	'reinterpret_cast',
+	'try',
+	'explicit',
+	'static_cast',
+	'typeid',
+	'catch',
+	'operator',
+	'template',
+	'class',
+	'const_cast',
+	'inline',
+	'throw',
+	'virtual',
+	'IBOutlet'
+];
+
+var access = [
+	'@private',
+	'@protected',
+	'@public',
+	'@required',
+	'@optional',
+	'private',
+	'protected',
+	'public',
+	'friend',
+	'using'
+];
+
+var typeModifiers = [
+	'mutable',
+	'auto',
+	'const',
+	'register',
+	'typename',
+	'abstract'
+];
+
+var types = [
+	'double',
+	'float',
+	'int',
+	'short',
+	'char',
+	'long',
+	'signed',
+	'unsigned',
+	'bool',
+	'void',
+	'id'
+];
+
+var operators = [
+	'+',
+	'*',
+	'/',
+	'-',
+	'&',
+	'|',
+	'~',
+	'!',
+	'%',
+	'<',
+	'=',
+	'>',
+	'[',
+	']',
+	'new',
+	'delete',
+	'in'
+];
+
+var values = ['this', 'true', 'false', 'NULL', 'YES', 'NO', 'nil'];
+
+language.push(values, {type: 'constant'});
+language.push(typeModifiers, {type: 'keyword'});
+language.push(types, {type: 'type'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(access, {type: 'access'});
+
+// Objective-C properties
+language.push({
+	pattern: /@property\((.*)\)[^;]+;/im,
+	type: 'objective-c-property',
+	allow: '*'
+});
+
+var propertyAttributes = [
+	'getter',
+	'setter',
+	'readwrite',
+	'readonly',
+	'assign',
+	'retain',
+	'copy',
+	'nonatomic'
+];
+
+language.push(propertyAttributes, {
+	type: 'keyword',
+	only: ['objective-c-property']
+});
+
+// Objective-C strings
+language.push({
+	pattern: /@(?=")/,
+	type: 'string'
+});
+
+// Objective-C classes, C++ classes, C types, etc.
+language.push(Rule.camelCaseType);
+language.push(Rule.cStyleType);
+language.push({
+	pattern: /(?:class|struct|enum|namespace)\s+([^{;\s]+)/im,
+	matches: Rule.extractMatches({type: 'type'})
+});
+
+language.push({
+	pattern: /#.*$/im,
+	type: 'preprocessor',
+	allow: ['string']
+});
+
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Objective-C style functions
+language.push({pattern: /\w+:(?=.*(\]|;|\{))(?!:)/, type: 'function'});
+
+language.push({
+	pattern: /[^:\[]\s+(\w+)(?=\])/,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+language.push({
+	pattern: /-\s*(\([^\)]+?\))?\s*(\w+)\s*\{/,
+	matches: Rule.extractMatches({index: 2, type: 'function'})
+});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('clang', language);
+	syntax.alias('clang', ['cpp', 'c++', 'c', 'objective-c']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/cpp.js b/public/_components/@socketry/syntax/Syntax/Language/cpp.js
new file mode 100644
index 0000000..c4f591e
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/cpp.js
@@ -0,0 +1 @@
+export {default} from './clang.js';
diff --git a/public/_components/@socketry/syntax/Syntax/Language/csharp.js b/public/_components/@socketry/syntax/Syntax/Language/csharp.js
new file mode 100644
index 0000000..abe60b7
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/csharp.js
@@ -0,0 +1,166 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('csharp');
+
+var keywords = [
+	'abstract',
+	'add',
+	'alias',
+	'ascending',
+	'base',
+	'break',
+	'case',
+	'catch',
+	'class',
+	'const',
+	'continue',
+	'default',
+	'delegate',
+	'descending',
+	'do',
+	'dynamic',
+	'else',
+	'enum',
+	'event',
+	'explicit',
+	'extern',
+	'finally',
+	'for',
+	'foreach',
+	'from',
+	'get',
+	'global',
+	'goto',
+	'group',
+	'if',
+	'implicit',
+	'in',
+	'interface',
+	'into',
+	'join',
+	'let',
+	'lock',
+	'namespace',
+	'new',
+	'operator',
+	'orderby',
+	'out',
+	'override',
+	'params',
+	'partial',
+	'readonly',
+	'ref',
+	'remove',
+	'return',
+	'sealed',
+	'select',
+	'set',
+	'stackalloc',
+	'static',
+	'struct',
+	'switch',
+	'throw',
+	'try',
+	'unsafe',
+	'using',
+	'value',
+	'var',
+	'virtual',
+	'volatile',
+	'where',
+	'while',
+	'yield'
+];
+
+var access = ['public', 'private', 'internal', 'protected'];
+
+var types = [
+	'object',
+	'bool',
+	'byte',
+	'fixed',
+	'float',
+	'uint',
+	'char',
+	'ulong',
+	'ushort',
+	'decimal',
+	'int',
+	'sbyte',
+	'short',
+	'void',
+	'long',
+	'string',
+	'double'
+];
+
+var operators = [
+	'+',
+	'-',
+	'*',
+	'/',
+	'%',
+	'&',
+	'|',
+	'^',
+	'!',
+	'~',
+	'&&',
+	'||',
+	'++',
+	'--',
+	'<<',
+	'>>',
+	'==',
+	'!=',
+	'<',
+	'>',
+	'<=',
+	'>=',
+	'=',
+	'?',
+	'new',
+	'as',
+	'is',
+	'sizeof',
+	'typeof',
+	'checked',
+	'unchecked'
+];
+
+var values = ['this', 'true', 'false', 'null'];
+
+language.push(values, {type: 'constant'});
+language.push(types, {type: 'type'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(access, {type: 'access'});
+
+// Functions
+language.push(Rule.cStyleFunction);
+language.push({
+	pattern: /(?:\.)([a-z_][a-z0-9_]+)/i,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+// Camel Case Types
+language.push(Rule.camelCaseType);
+
+// Comments
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+export default function register(syntax) {
+	syntax.register('csharp', language);
+	syntax.alias('csharp', ['c-sharp', 'c#']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/css.js b/public/_components/@socketry/syntax/Syntax/Language/css.js
new file mode 100644
index 0000000..3806bb3
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/css.js
@@ -0,0 +1,244 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('css');
+
+var colorNames = [
+	'AliceBlue',
+	'AntiqueWhite',
+	'Aqua',
+	'Aquamarine',
+	'Azure',
+	'Beige',
+	'Bisque',
+	'Black',
+	'BlanchedAlmond',
+	'Blue',
+	'BlueViolet',
+	'Brown',
+	'BurlyWood',
+	'CadetBlue',
+	'Chartreuse',
+	'Chocolate',
+	'Coral',
+	'CornflowerBlue',
+	'Cornsilk',
+	'Crimson',
+	'Cyan',
+	'DarkBlue',
+	'DarkCyan',
+	'DarkGoldenRod',
+	'DarkGray',
+	'DarkGreen',
+	'DarkKhaki',
+	'DarkMagenta',
+	'DarkOliveGreen',
+	'Darkorange',
+	'DarkOrchid',
+	'DarkRed',
+	'DarkSalmon',
+	'DarkSeaGreen',
+	'DarkSlateBlue',
+	'DarkSlateGray',
+	'DarkTurquoise',
+	'DarkViolet',
+	'DeepPink',
+	'DeepSkyBlue',
+	'DimGray',
+	'DodgerBlue',
+	'FireBrick',
+	'FloralWhite',
+	'ForestGreen',
+	'Fuchsia',
+	'Gainsboro',
+	'GhostWhite',
+	'Gold',
+	'GoldenRod',
+	'Gray',
+	'Green',
+	'GreenYellow',
+	'HoneyDew',
+	'HotPink',
+	'IndianRed',
+	'Indigo',
+	'Ivory',
+	'Khaki',
+	'Lavender',
+	'LavenderBlush',
+	'LawnGreen',
+	'LemonChiffon',
+	'LightBlue',
+	'LightCoral',
+	'LightCyan',
+	'LightGoldenRodYellow',
+	'LightGrey',
+	'LightGreen',
+	'LightPink',
+	'LightSalmon',
+	'LightSeaGreen',
+	'LightSkyBlue',
+	'LightSlateGray',
+	'LightSteelBlue',
+	'LightYellow',
+	'Lime',
+	'LimeGreen',
+	'Linen',
+	'Magenta',
+	'Maroon',
+	'MediumAquaMarine',
+	'MediumBlue',
+	'MediumOrchid',
+	'MediumPurple',
+	'MediumSeaGreen',
+	'MediumSlateBlue',
+	'MediumSpringGreen',
+	'MediumTurquoise',
+	'MediumVioletRed',
+	'MidnightBlue',
+	'MintCream',
+	'MistyRose',
+	'Moccasin',
+	'NavajoWhite',
+	'Navy',
+	'OldLace',
+	'Olive',
+	'OliveDrab',
+	'Orange',
+	'OrangeRed',
+	'Orchid',
+	'PaleGoldenRod',
+	'PaleGreen',
+	'PaleTurquoise',
+	'PaleVioletRed',
+	'PapayaWhip',
+	'PeachPuff',
+	'Peru',
+	'Pink',
+	'Plum',
+	'PowderBlue',
+	'Purple',
+	'Red',
+	'RosyBrown',
+	'RoyalBlue',
+	'SaddleBrown',
+	'Salmon',
+	'SandyBrown',
+	'SeaGreen',
+	'SeaShell',
+	'Sienna',
+	'Silver',
+	'SkyBlue',
+	'SlateBlue',
+	'SlateGray',
+	'Snow',
+	'SpringGreen',
+	'SteelBlue',
+	'Tan',
+	'Teal',
+	'Thistle',
+	'Tomato',
+	'Turquoise',
+	'Violet',
+	'Wheat',
+	'White',
+	'WhiteSmoke',
+	'Yellow',
+	'YellowGreen'
+];
+
+var colorPatterns = ['#[0-9a-f]{3,6}', 'rgba?\\(.+?\\)', 'hsla?\\(.+?\\)'];
+
+// Helper function to escape regex special characters
+function escapeRegex(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// Helper function to convert string to token pattern
+function convertStringToTokenPattern(pattern, caseSensitive) {
+	if (caseSensitive) {
+		return escapeRegex(pattern);
+	}
+	return pattern;
+}
+
+var colorMatcher = [].concat(
+	colorNames.map(function (pattern) {
+		return '(' + convertStringToTokenPattern(pattern, true) + ')';
+	}),
+	colorPatterns.map(function (pattern) {
+		return '(' + convertStringToTokenPattern(pattern, false) + ')';
+	})
+);
+
+language.push({
+	pattern: /\(.*?\)/,
+	allow: '*',
+	disallow: ['property']
+});
+
+language.push({
+	pattern: /\s*([\:\.\[\]\"\'\=\s\w#\.\-,]+)\s+\{/m,
+	matches: Rule.extractMatches({type: 'selector', allow: ['string']})
+});
+
+language.push({
+	pattern: new RegExp(colorMatcher.join('|'), 'gi'),
+	type: 'color',
+	process: function (element, match) {
+		if (!element.textContent) return element;
+
+		var text = element.textContent;
+
+		// Create color box container
+		var colourBox = document.createElement('span');
+		colourBox.className = 'colour-box';
+
+		// Create sample color element
+		var sampleColour = document.createElement('span');
+		sampleColour.className = 'sample';
+		sampleColour.style.backgroundColor = text;
+		sampleColour.appendChild(document.createTextNode('  '));
+		colourBox.appendChild(sampleColour);
+
+		// Append to element
+		element.appendChild(colourBox);
+		return element;
+	}
+});
+
+language.push(Rule.cStyleComment);
+language.push(Rule.webLink);
+
+language.push({
+	pattern: /\{(.|\n)*?\}/,
+	type: 'properties',
+	allow: '*'
+});
+
+language.push({
+	pattern: /\:(.*?(?=\})|(.|\n)*?(?=(\}|\;)))/,
+	matches: Rule.extractMatches({
+		type: 'value',
+		allow: ['color'],
+		only: ['properties']
+	})
+});
+
+language.push({
+	pattern: /([\-\w]+):/,
+	matches: Rule.extractMatches({
+		type: 'property',
+		process: Rule.webLinkProcess('http://cssdocs.org/')
+	})
+});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('css', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/diff.js b/public/_components/@socketry/syntax/Syntax/Language/diff.js
new file mode 100644
index 0000000..bfc2c37
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/diff.js
@@ -0,0 +1,24 @@
+import {Language} from '../Language.js';
+
+const language = new Language('diff');
+
+// File headers
+language.push({pattern: /^\+\+\+.*$/m, type: 'add'});
+language.push({pattern: /^\-\-\-.*$/m, type: 'del'});
+
+// Chunk header (offset markers)
+language.push({pattern: /^@@.*@@/m, type: 'offset'});
+
+// Added lines
+language.push({pattern: /^\+[^\+]{1}.*$/m, type: 'insert'});
+
+// Removed lines
+language.push({pattern: /^\-[^\-]{1}.*$/m, type: 'remove'});
+
+// Note: The postprocess function that added classes to parent lines has been removed.
+// CSS can be used to style entire lines based on the span types instead.
+
+export default function register(syntax) {
+	syntax.register('diff', language);
+	syntax.alias('diff', ['patch']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/go.js b/public/_components/@socketry/syntax/Syntax/Language/go.js
new file mode 100644
index 0000000..ce4a0ca
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/go.js
@@ -0,0 +1,135 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('go');
+
+const keywords = [
+	'break',
+	'default',
+	'func',
+	'interface',
+	'select',
+	'case',
+	'defer',
+	'go',
+	'map',
+	'struct',
+	'chan',
+	'else',
+	'goto',
+	'package',
+	'switch',
+	'const',
+	'fallthrough',
+	'if',
+	'range',
+	'type',
+	'continue',
+	'for',
+	'import',
+	'return',
+	'var'
+];
+
+const types = [
+	// Specific types first (before regexes that might partially match them)
+	'uintptr',
+	'string',
+	'byte',
+	'bool',
+	'rune',
+	// Then regex patterns
+	/u?int\d*/,
+	/float\d+/,
+	/complex\d+/
+];
+
+// Operators - ordered from longest to shortest to avoid partial matches
+const operators = [
+	'<<=',
+	'>>=',
+	'&^=',
+	'...',
+	'<-',
+	'+=',
+	'-=',
+	'*=',
+	'/=',
+	'%=',
+	'&=',
+	'|=',
+	'^=',
+	'<<',
+	'>>',
+	'==',
+	'!=',
+	'<=',
+	'>=',
+	'&&',
+	'||',
+	'++',
+	'--',
+	':=',
+	'&^',
+	'+',
+	'-',
+	'*',
+	'/',
+	'%',
+	'&',
+	'|',
+	'^',
+	'<',
+	'>',
+	'=',
+	'!',
+	',',
+	';',
+	'.',
+	':'
+];
+
+const values = ['true', 'false', 'iota', 'nil'];
+
+const functions = [
+	'append',
+	'cap',
+	'close',
+	'complex',
+	'copy',
+	'imag',
+	'len',
+	'make',
+	'new',
+	'panic',
+	'print',
+	'println',
+	'real',
+	'recover'
+];
+
+language.push(values, {type: 'constant'});
+language.push(types, {type: 'type'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(functions, {type: 'function'});
+
+language.push(Rule.cStyleFunction);
+language.push(Rule.camelCaseType);
+
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+export default function register(syntax) {
+	syntax.register('go', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/haskell.js b/public/_components/@socketry/syntax/Syntax/Language/haskell.js
new file mode 100644
index 0000000..fb7fd8f
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/haskell.js
@@ -0,0 +1,110 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('haskell');
+
+// Multi-word keywords need to be matched first (before single words)
+language.push(
+	[
+		'data family',
+		'data instance',
+		'deriving instance',
+		'type family',
+		'type instance'
+	],
+	{type: 'keyword'}
+);
+
+const keywords = [
+	'as',
+	'case',
+	'of',
+	'class',
+	'data',
+	'default',
+	'deriving',
+	'do',
+	'forall',
+	'foreign',
+	'hiding',
+	'if',
+	'then',
+	'else',
+	'import',
+	'infix',
+	'infixl',
+	'infixr',
+	'instance',
+	'let',
+	'in',
+	'mdo',
+	'module',
+	'newtype',
+	'proc',
+	'qualified',
+	'rec',
+	'type',
+	'where'
+];
+
+// Operators - ordered from longest to shortest to avoid partial matches
+const operators = [
+	'::',
+	'->',
+	'<-',
+	'-<<',
+	'-<',
+	'??',
+	'`',
+	'|',
+	'\\',
+	'-',
+	'*',
+	'?',
+	'#',
+	'@',
+	'!',
+	'_',
+	'~',
+	'>',
+	';',
+	'{',
+	'}'
+];
+
+const values = ['True', 'False'];
+
+language.push(values, {type: 'constant'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+
+// CamelCase types
+language.push(Rule.camelCaseType);
+
+// Comments
+language.push({
+	pattern: /\-\-.*$/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push({
+	pattern: /\{\-[\s\S]*?\-\}/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push(Rule.webLink);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+export default function register(syntax) {
+	syntax.register('haskell', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/html.js b/public/_components/@socketry/syntax/Syntax/Language/html.js
new file mode 100644
index 0000000..6dbe834
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/html.js
@@ -0,0 +1,69 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('html');
+
+// Custom handler for all <script> tags - determines language based on type attribute
+language.push({
+	pattern: /<script(\s+[^>]*?)?>((.|\n)*?)<\/script>/im,
+	matches: Rule.extractConditionalMatch(1, 2, [
+		{pattern: /type\s*=\s*["']importmap["']/i, language: 'json'},
+		{pattern: /type\s*=\s*["'](?:text|application)\/javascript["']/i, language: 'javascript'},
+		{language: 'javascript'} // Fallback: no type or unknown type defaults to JavaScript (HTML5)
+	])
+});
+
+// Embedded CSS in <style> tags
+language.push({
+	pattern: /<style.*?type=.?text\/css.*?>((.|\n)*?)<\/style>/im,
+	matches: Rule.extractMatches({language: 'css'})
+});
+
+// Embedded PHP
+language.push({
+	pattern: /((<\?php)([\s\S]*?)(\?>))/m,
+	matches: Rule.extractMatches(
+		{type: 'php-tag', allow: ['keyword', 'php-script']},
+		{type: 'keyword'},
+		{language: 'php-script'},
+		{type: 'keyword'}
+	)
+});
+
+// Embedded Ruby
+language.push({
+	pattern: /((<\?rb?)([\s\S]*?)(\?>))/m,
+	matches: Rule.extractMatches(
+		{type: 'ruby-tag', allow: ['keyword', 'ruby']},
+		{type: 'keyword'},
+		{language: 'ruby'},
+		{type: 'keyword'}
+	)
+});
+
+// ERB-style instructions
+language.push({
+	pattern: /<%=?(.*?)(%>)/,
+	type: 'instruction',
+	allow: ['string']
+});
+
+// DOCTYPE declarations
+language.push({
+	pattern: /<\!(DOCTYPE(.*?))>/,
+	matches: Rule.extractMatches({type: 'doctype'})
+});
+
+// Percent escapes
+language.push({
+	pattern: /(%[0-9a-f]{2})/i,
+	type: 'percent-escape',
+	only: ['html']
+});
+
+// Derive from XML for tag parsing
+language.derives('xml');
+
+export default function register(syntax) {
+	syntax.register('html', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/io.js b/public/_components/@socketry/syntax/Syntax/Language/io.js
new file mode 100644
index 0000000..dff3dac
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/io.js
@@ -0,0 +1,68 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('io');
+
+language.push(Rule.cStyleFunction);
+
+const keywords = ['return'];
+
+// Operators ordered longest-first
+const operators = [
+	'::=',
+	':=',
+	'or',
+	'and',
+	'new',
+	'delete',
+	'@',
+	'+',
+	'*',
+	'/',
+	'-',
+	'&',
+	'|',
+	'~',
+	'!',
+	'%',
+	'<',
+	'=',
+	'>',
+	'[',
+	']'
+];
+
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+
+// Extract space delimited method invocations
+language.push({
+	pattern: /\b([ \t]+([a-z]+))/i,
+	matches: Rule.extractMatches({index: 2, type: 'function'})
+});
+
+language.push({
+	pattern: /\)([ \t]+([a-z]+))/i,
+	matches: Rule.extractMatches({index: 2, type: 'function'})
+});
+
+// CamelCase types
+language.push(Rule.camelCaseType);
+
+language.push(Rule.perlStyleComment);
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+export default function register(syntax) {
+	syntax.register('io', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/java.js b/public/_components/@socketry/syntax/Syntax/Language/java.js
new file mode 100644
index 0000000..fe68003
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/java.js
@@ -0,0 +1,134 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('java');
+
+const keywords = [
+	'abstract',
+	'continue',
+	'for',
+	'switch',
+	'assert',
+	'default',
+	'goto',
+	'synchronized',
+	'do',
+	'if',
+	'break',
+	'implements',
+	'throw',
+	'else',
+	'import',
+	'throws',
+	'case',
+	'enum',
+	'return',
+	'transient',
+	'catch',
+	'extends',
+	'try',
+	'final',
+	'interface',
+	'static',
+	'class',
+	'finally',
+	'strictfp',
+	'volatile',
+	'const',
+	'native',
+	'super',
+	'while'
+];
+
+const access = ['private', 'protected', 'public', 'package'];
+
+const types = [
+	'void',
+	'byte',
+	'short',
+	'int',
+	'long',
+	'float',
+	'double',
+	'boolean',
+	'char'
+];
+
+// Operators ordered longest-first to match correctly
+const operators = [
+	'>>>=',
+	'<<=',
+	'>>=',
+	'>>>',
+	'instanceof',
+	'==',
+	'!=',
+	'<=',
+	'>=',
+	'<<',
+	'>>',
+	'&&',
+	'||',
+	'++',
+	'--',
+	'+=',
+	'-=',
+	'*=',
+	'/=',
+	'%=',
+	'&=',
+	'^=',
+	'|=',
+	'new',
+	'delete',
+	'<',
+	'>',
+	'+',
+	'-',
+	'~',
+	'!',
+	'*',
+	'/',
+	'%',
+	'&',
+	'^',
+	'|',
+	'?',
+	'='
+];
+
+const constants = ['this', 'true', 'false', 'null'];
+
+language.push(constants, {type: 'constant'});
+language.push(types, {type: 'type'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(access, {type: 'access'});
+
+// Camel Case Types
+language.push(Rule.camelCaseType);
+
+// Comments
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+language.push(Rule.cStyleFunction);
+
+language.processes['function'] = Rule.webLinkProcess(
+	'java "Developer Documentation"',
+	true
+);
+
+export default function register(syntax) {
+	syntax.register('java', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/javascript.js b/public/_components/@socketry/syntax/Syntax/Language/javascript.js
new file mode 100644
index 0000000..0298208
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/javascript.js
@@ -0,0 +1,89 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('javascript');
+
+// Constants/values
+language.push(['this', 'true', 'false', 'null'], {type: 'constant'});
+
+// Keywords
+language.push(
+	[
+		'async',
+		'await',
+		'break',
+		'case',
+		'catch',
+		'class',
+		'const',
+		'continue',
+		'debugger',
+		'default',
+		'delete',
+		'do',
+		'else',
+		'export',
+		'extends',
+		'finally',
+		'for',
+		'function',
+		'if',
+		'import',
+		'in',
+		'instanceof',
+		'let',
+		'new',
+		'return',
+		'super',
+		'switch',
+		'this',
+		'throw',
+		'try',
+		'typeof',
+		'var',
+		'void',
+		'while',
+		'with',
+		'yield'
+	],
+	{type: 'keyword'}
+);
+
+// Operators
+language.push(['+', '*', '/', '-', '&', '|', '~', '!', '%', '<', '=', '>', '...'], {
+	type: 'operator'
+});
+
+// Access modifiers
+language.push(
+	['implements', 'package', 'protected', 'interface', 'private', 'public'],
+	{type: 'access'}
+);
+
+// Regular expressions
+language.push(Rule.perlStyleRegularExpression);
+
+// Camel Case Types
+language.push(Rule.camelCaseType);
+
+// Comments
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Functions
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('javascript', language);
+	syntax.alias('javascript', ['js', 'actionscript']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/json.js b/public/_components/@socketry/syntax/Syntax/Language/json.js
new file mode 100644
index 0000000..e3983f6
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/json.js
@@ -0,0 +1,36 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('json');
+
+// JSON values: true, false, null
+language.push(['true', 'false', 'null'], {type: 'constant'});
+
+// JSON numbers (integers, floats, scientific notation)
+language.push({
+	pattern: /-?(0|[1-9]\d*)(\.\d+)?([eE][+-]?\d+)?/,
+	type: 'constant'
+});
+
+// JSON strings (with escapes)
+language.push({
+	pattern: /"(?:[^"\\]|\\.)*"/,
+	type: 'string'
+});
+
+// Object keys (strings followed by colon)
+language.push({
+	pattern: /("(?:[^"\\]|\\.)*")(\s*)(:)/,
+	matches: Rule.extractMatches(
+		{type: 'key'},
+		null,
+		{type: 'operator'}
+	)
+});
+
+// Structural characters
+language.push(['{', '}', '[', ']', ','], {type: 'operator'});
+
+export default function register(syntax) {
+	syntax.register('json', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/lisp.js b/public/_components/@socketry/syntax/Syntax/Language/lisp.js
new file mode 100644
index 0000000..f6796db
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/lisp.js
@@ -0,0 +1,38 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+const lispStyleComment = {
+	pattern: /(;+) .*$/m,
+	type: 'comment',
+	allow: ['href']
+};
+
+// This syntax is intentionally very sparse. This is because it is a general syntax for Lisp like languages.
+// It might be a good idea to make specific dialects (e.g. common lisp, scheme, clojure, etc)
+
+const language = new Language('lisp');
+
+language.push(['(', ')'], {type: 'operator'});
+
+language.push(lispStyleComment);
+
+language.push(Rule.hexNumber);
+language.push(Rule.decimalNumber);
+language.push(Rule.webLink);
+
+language.push({
+	pattern: /\(\s*([^\s\(\)]+)/im,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+language.push({
+	pattern: /#[a-z]+/i,
+	type: 'constant'
+});
+
+// Strings
+language.push(Rule.multiLineDoubleQuotedString);
+language.push(Rule.stringEscape);
+
+export default function register(syntax) {
+	syntax.register('lisp', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/lua.js b/public/_components/@socketry/syntax/Syntax/Language/lua.js
new file mode 100644
index 0000000..86f71dd
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/lua.js
@@ -0,0 +1,87 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('lua');
+
+const keywords = [
+	'and',
+	'break',
+	'do',
+	'else',
+	'elseif',
+	'end',
+	'false',
+	'for',
+	'function',
+	'if',
+	'in',
+	'local',
+	'nil',
+	'not',
+	'or',
+	'repeat',
+	'return',
+	'then',
+	'true',
+	'until',
+	'while'
+];
+
+// Operators ordered longest-first
+const operators = [
+	'==',
+	'~=',
+	'<=',
+	'>=',
+	'..',
+	'+',
+	'-',
+	'*',
+	'/',
+	'%',
+	'^',
+	'#',
+	'=',
+	'<',
+	'>',
+	'?',
+	':'
+];
+
+const values = ['self', 'true', 'false', 'nil'];
+
+language.push(values, {type: 'constant'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+
+// CamelCase types
+language.push(Rule.camelCaseType);
+language.push(Rule.cStyleFunction);
+
+// Single-line comments
+language.push({
+	pattern: /\-\-.*$/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+// Multi-line comments
+language.push({
+	pattern: /\-\-\[\[(\n|.)*?\]\]\-\-/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+language.push(Rule.hexNumber);
+language.push(Rule.decimalNumber);
+
+language.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('lua', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/markdown.js b/public/_components/@socketry/syntax/Syntax/Language/markdown.js
new file mode 100644
index 0000000..fc1dcca
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/markdown.js
@@ -0,0 +1,112 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('markdown');
+
+// Headers
+language.push({
+	pattern: /^#{1,6}\s+.+$/m,
+	type: 'heading'
+});
+
+// Bold (strong emphasis)
+language.push({
+	pattern: /\*\*(.+?)\*\*/,
+	type: 'strong'
+});
+
+language.push({
+	pattern: /__(.+?)__/,
+	type: 'strong'
+});
+
+// Italic (emphasis)
+language.push({
+	pattern: /\*(.+?)\*/,
+	type: 'emphasis'
+});
+
+language.push({
+	pattern: /_(.+?)_/,
+	type: 'emphasis'
+});
+
+// Code blocks with language
+language.push({
+	pattern: /^```[\w-]*\n[\s\S]*?\n```$/m,
+	type: 'code'
+});
+
+// Inline code
+language.push({
+	// Do not allow newlines inside inline code to avoid spanning across blocks/fences:
+	pattern: /`([^`\n\r]+)`/,
+	type: 'code'
+});
+
+// Links - make them clickable
+language.push({
+	pattern: /\[([^\]]+)\]\(([^)]+)\)/,
+	type: 'link',
+	matches: Rule.extractMatches(
+		{type: 'string'}, // Link text
+		{
+			type: 'link',
+			process: function (container, match) {
+				const anchor = document.createElement('a');
+				anchor.className = container.className;
+				anchor.textContent = container.textContent;
+				anchor.href = match.value;
+				return anchor;
+			}
+		} // URL
+	)
+});
+
+// Images
+language.push({
+	pattern: /!\[([^\]]*)\]\(([^)]+)\)/,
+	type: 'link'
+});
+
+// Blockquotes
+language.push({
+	pattern: /^>\s+.+$/m,
+	type: 'quote'
+});
+
+// Unordered lists
+language.push({
+	pattern: /^[\s]*[-*+]\s+/m,
+	type: 'list-marker'
+});
+
+// Ordered lists
+language.push({
+	pattern: /^[\s]*\d+\.\s+/m,
+	type: 'list-marker'
+});
+
+// Horizontal rules
+language.push({
+	pattern: /^(?:[-*_]){3,}$/m,
+	type: 'operator'
+});
+
+// URLs - make them clickable
+language.push({
+	...Rule.webLink,
+	type: 'link',
+	process: function (container, match) {
+		const anchor = document.createElement('a');
+		anchor.className = container.className;
+		anchor.textContent = match.value;
+		anchor.href = match.value;
+		return anchor;
+	}
+});
+
+export default function register(syntax) {
+	syntax.register('markdown', language);
+	syntax.alias('markdown', ['md']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/nginx.js b/public/_components/@socketry/syntax/Syntax/Language/nginx.js
new file mode 100644
index 0000000..99635ba
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/nginx.js
@@ -0,0 +1,37 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('nginx');
+
+// Directives with web links to nginx documentation
+language.push({
+	pattern: /((\w+).*?);/,
+	matches: Rule.extractMatches(
+		{type: 'directive', allow: '*'},
+		{
+			type: 'function',
+			process: Rule.webLinkProcess('http://nginx.org/r/')
+		}
+	)
+});
+
+// Keywords (blocks with { )
+language.push({
+	pattern: /(\w+).*?{/,
+	matches: Rule.extractMatches({type: 'keyword'})
+});
+
+// Variables ($var)
+language.push({pattern: /(\$)[\w]+/, type: 'variable'});
+
+// Comments and strings
+language.push(Rule.perlStyleComment);
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+
+// Web links
+language.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('nginx', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/objective-c.js b/public/_components/@socketry/syntax/Syntax/Language/objective-c.js
new file mode 100644
index 0000000..c4f591e
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/objective-c.js
@@ -0,0 +1 @@
+export {default} from './clang.js';
diff --git a/public/_components/@socketry/syntax/Syntax/Language/ocaml.js b/public/_components/@socketry/syntax/Syntax/Language/ocaml.js
new file mode 100644
index 0000000..05e2318
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/ocaml.js
@@ -0,0 +1,225 @@
+// This brush is based loosely on the following documentation:
+// http://msdn.microsoft.com/en-us/library/dd233230.aspx
+
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('ocaml');
+
+const keywords = [
+	'abstract',
+	'and',
+	'as',
+	'assert',
+	'begin',
+	'class',
+	'default',
+	'delegate',
+	'do',
+	'done',
+	'downcast',
+	'downto',
+	'elif',
+	'else',
+	'end',
+	'exception',
+	'extern',
+	'finally',
+	'for',
+	'fun',
+	'function',
+	'if',
+	'in',
+	'inherit',
+	'inline',
+	'interface',
+	'internal',
+	'lazy',
+	'let',
+	'match',
+	'member',
+	'module',
+	'mutable',
+	'namespace',
+	'new',
+	'null',
+	'of',
+	'open',
+	'or',
+	'override',
+	'rec',
+	'return',
+	'static',
+	'struct',
+	'then',
+	'to',
+	'try',
+	'type',
+	'upcast',
+	'use',
+	'val',
+	'when',
+	'while',
+	'with',
+	'yield',
+	'asr',
+	'land',
+	'lor',
+	'lsl',
+	'lsr',
+	'lxor',
+	'mod',
+	'sig',
+	'atomic',
+	'break',
+	'checked',
+	'component',
+	'const',
+	'constraint',
+	'constructor',
+	'continue',
+	'eager',
+	'event',
+	'external',
+	'fixed',
+	'functor',
+	'global',
+	'include',
+	'method',
+	'mixin',
+	'object',
+	'parallel',
+	'process',
+	'protected',
+	'pure',
+	'sealed',
+	'trait',
+	'virtual',
+	'volatile'
+];
+
+const types = [
+	'bool',
+	'byte',
+	'sbyte',
+	/\bu?int\d*\b/,
+	'nativeint',
+	'unativeint',
+	'char',
+	'string',
+	'decimal',
+	'unit',
+	'void',
+	'float32',
+	'single',
+	'float64',
+	'double',
+	'list',
+	'array',
+	'exn',
+	'format',
+	'fun',
+	'option',
+	'ref'
+];
+
+const operators = [
+	':?>',
+	'<>',
+	'->',
+	'::',
+	':=',
+	':>',
+	':?',
+	'[<',
+	'>]',
+	'<|',
+	'|>',
+	'[|',
+	'|]',
+	'(|',
+	'|)',
+	'(*',
+	'*)',
+	'!',
+	'%',
+	'&',
+	'*',
+	'+',
+	'-',
+	'/',
+	'<',
+	'=',
+	'>',
+	'?',
+	'@',
+	'^',
+	'_',
+	'`',
+	'|',
+	'~',
+	"'",
+	'in'
+];
+
+const values = ['true', 'false'];
+
+const access = ['private', 'public'];
+
+language.push(access, {type: 'access'});
+language.push(values, {type: 'constant'});
+language.push(types, {type: 'type'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+
+// http://caml.inria.fr/pub/docs/manual-ocaml/manual011.html#module-path
+// open [module-path], new [type]
+language.push({
+	pattern: /(?:open|new)\s+((?:\.?[a-z][a-z0-9]*)+)/i,
+	matches: Rule.extractMatches({type: 'type'})
+});
+
+// Functions
+language.push({
+	pattern: /(?:\.)([a-z_][a-z0-9_]+)/i,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+// Avoid highlighting keyword arguments as camel-case types.
+language.push({
+	pattern: /(?:\(|,)\s*(\w+\s*=)/,
+	matches: Rule.extractMatches({
+		type: 'keyword-argument'
+	})
+});
+
+// We need to modify cStyleFunction because "(*" is a comment token.
+language.push({
+	pattern: /([a-z_][a-z0-9_]*)\s*\((?!\*)/i,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+// Types
+language.push(Rule.camelCaseType);
+
+// Web Links
+language.push(Rule.webLink);
+
+// Comments
+language.push({
+	pattern: /\(\*[\s\S]*?\*\)/,
+	type: 'comment'
+});
+
+// Strings
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+export default function register(syntax) {
+	syntax.register('ocaml', language);
+	syntax.alias('ocaml', ['ml', 'sml', 'fsharp']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/pascal.js b/public/_components/@socketry/syntax/Syntax/Language/pascal.js
new file mode 100644
index 0000000..6ca2c81
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/pascal.js
@@ -0,0 +1,166 @@
+//
+// Constructed using information from http://pascal.comsci.us/etymology/
+//
+
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('pascal');
+
+const keywords = [
+	'absolute',
+	'abstract',
+	'all',
+	'and_then',
+	'as',
+	'asm',
+	'asmname',
+	'attribute',
+	'begin',
+	'bindable',
+	'c',
+	'c_language',
+	'case',
+	'class',
+	'const',
+	'constructor',
+	'destructor',
+	'dispose',
+	'do',
+	'downto',
+	'else',
+	'end',
+	'except',
+	'exit',
+	'export',
+	'exports',
+	'external',
+	'far',
+	'file',
+	'finalization',
+	'finally',
+	'for',
+	'forward',
+	'function',
+	'goto',
+	'if',
+	'implementation',
+	'import',
+	'inherited',
+	'initialization',
+	'inline',
+	'interface',
+	'interrupt',
+	'is',
+	'keywords',
+	'label',
+	'library',
+	'module',
+	'name',
+	'near',
+	'new',
+	'object',
+	'of',
+	'on',
+	'only',
+	'operator',
+	'or_else',
+	'otherwise',
+	'packed',
+	'pascal',
+	'pow',
+	'private',
+	'procedure',
+	'program',
+	'property',
+	'protected',
+	'public',
+	'published',
+	'qualified',
+	'raise',
+	'record',
+	'repeat',
+	'resident',
+	'restricted',
+	'segment',
+	'set',
+	'then',
+	'threadvar',
+	'to',
+	'try',
+	'type',
+	'unit',
+	'until',
+	'uses',
+	'value',
+	'var',
+	'view',
+	'virtual',
+	'while',
+	'with'
+];
+
+const operators = [
+	':=',
+	'>=',
+	'<=',
+	'<>',
+	'+',
+	'-',
+	'*',
+	'/',
+	'div',
+	'mod',
+	'and',
+	'or',
+	'xor',
+	'shl',
+	'shr',
+	'not',
+	'=',
+	'>',
+	'<',
+	'in'
+];
+
+const values = ['true', 'false', 'nil'];
+
+// Keywords are case insensitive
+language.push(values, {type: 'constant', options: 'gi'});
+language.push(keywords, {type: 'keyword', options: 'gi'});
+language.push(operators, {type: 'operator', options: 'gi'});
+
+language.push(Rule.camelCaseType);
+
+// Pascal style comments
+language.push({
+	pattern: /\{[\s\S]*?\}/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push({
+	pattern: /\(\*[\s\S]*?\*\)/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+// Pascal hex numbers use $ prefix
+language.push({pattern: /\$[0-9a-fA-F]+/, type: 'constant'});
+
+// Functions
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('pascal', language);
+	syntax.alias('pascal', ['delphi']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/patch.js b/public/_components/@socketry/syntax/Syntax/Language/patch.js
new file mode 100644
index 0000000..7e4d7e8
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/patch.js
@@ -0,0 +1,2 @@
+// Alias for diff language
+export {default} from './diff.js';
diff --git a/public/_components/@socketry/syntax/Syntax/Language/perl5.js b/public/_components/@socketry/syntax/Syntax/Language/perl5.js
new file mode 100644
index 0000000..9e901ad
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/perl5.js
@@ -0,0 +1,317 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('perl5');
+
+const builtins = [
+	'abs',
+	'accept',
+	'alarm',
+	'atan2',
+	'bind',
+	'binmode',
+	'chdir',
+	'chmod',
+	'chomp',
+	'chop',
+	'chown',
+	'chr',
+	'chroot',
+	'close',
+	'closedir',
+	'connect',
+	'cos',
+	'crypt',
+	'defined',
+	'delete',
+	'each',
+	'endgrent',
+	'endhostent',
+	'endnetent',
+	'endprotoent',
+	'endpwent',
+	'endservent',
+	'eof',
+	'exec',
+	'exists',
+	'exp',
+	'fcntl',
+	'fileno',
+	'flock',
+	'fork',
+	'format',
+	'formline',
+	'getc',
+	'getgrent',
+	'getgrgid',
+	'getgrnam',
+	'gethostbyaddr',
+	'gethostbyname',
+	'gethostent',
+	'getlogin',
+	'getnetbyaddr',
+	'getnetbyname',
+	'getnetent',
+	'getpeername',
+	'getpgrp',
+	'getppid',
+	'getpriority',
+	'getprotobyname',
+	'getprotobynumber',
+	'getprotoent',
+	'getpwent',
+	'getpwnam',
+	'getpwuid',
+	'getservbyname',
+	'getservbyport',
+	'getservent',
+	'getsockname',
+	'getsockopt',
+	'glob',
+	'gmtime',
+	'grep',
+	'hex',
+	'index',
+	'int',
+	'ioctl',
+	'join',
+	'keys',
+	'kill',
+	'lc',
+	'lcfirst',
+	'length',
+	'link',
+	'listen',
+	'localtime',
+	'lock',
+	'log',
+	'lstat',
+	'map',
+	'mkdir',
+	'msgctl',
+	'msgget',
+	'msgrcv',
+	'msgsnd',
+	'oct',
+	'open',
+	'opendir',
+	'ord',
+	'pack',
+	'pipe',
+	'pop',
+	'pos',
+	'print',
+	'printf',
+	'prototype',
+	'push',
+	'quotemeta',
+	'rand',
+	'read',
+	'readdir',
+	'readline',
+	'readlink',
+	'readpipe',
+	'recv',
+	'rename',
+	'reset',
+	'reverse',
+	'rewinddir',
+	'rindex',
+	'rmdir',
+	'scalar',
+	'seek',
+	'seekdir',
+	'select',
+	'semctl',
+	'semget',
+	'semop',
+	'send',
+	'setgrent',
+	'sethostent',
+	'setnetent',
+	'setpgrp',
+	'setpriority',
+	'setprotoent',
+	'setpwent',
+	'setservent',
+	'setsockopt',
+	'shift',
+	'shmctl',
+	'shmget',
+	'shmread',
+	'shmwrite',
+	'shutdown',
+	'sin',
+	'sleep',
+	'socket',
+	'socketpair',
+	'sort',
+	'splice',
+	'split',
+	'sprintf',
+	'sqrt',
+	'srand',
+	'stat',
+	'study',
+	'substr',
+	'symlink',
+	'syscall',
+	'sysopen',
+	'sysread',
+	'sysseek',
+	'system',
+	'syswrite',
+	'tell',
+	'telldir',
+	'time',
+	'times',
+	'tr',
+	'truncate',
+	'uc',
+	'ucfirst',
+	'umask',
+	'undef',
+	'unlink',
+	'unpack',
+	'unshift',
+	'utime',
+	'values',
+	'vec',
+	'wait',
+	'waitpid',
+	'warn',
+	'write'
+];
+
+const keywords = [
+	'bless',
+	'caller',
+	'continue',
+	'die',
+	'do',
+	'dump',
+	'else',
+	'elsif',
+	'eval',
+	'exit',
+	'for',
+	'foreach',
+	'goto',
+	'if',
+	'import',
+	'last',
+	'local',
+	'my',
+	'next',
+	'no',
+	'our',
+	'package',
+	'redo',
+	'ref',
+	'require',
+	'return',
+	'sub',
+	'tie',
+	'tied',
+	'unless',
+	'untie',
+	'until',
+	'use',
+	'wantarray',
+	'while'
+];
+
+const operators = [
+	'<=>',
+	'...',
+	'->',
+	'++',
+	'--',
+	'**',
+	'=~',
+	'!~',
+	'<<',
+	'>>',
+	'<=',
+	'>=',
+	'==',
+	'!=',
+	'&&',
+	'||',
+	'//',
+	'..',
+	'=>',
+	'!',
+	'~',
+	'\\',
+	'+',
+	'-',
+	'*',
+	'/',
+	'%',
+	'x',
+	'.',
+	'<',
+	'>',
+	'lt',
+	'gt',
+	'le',
+	'ge',
+	'eq',
+	'ne',
+	'cmp',
+	'~~',
+	'&',
+	'|',
+	'^',
+	'?:',
+	'=',
+	',',
+	'not',
+	'and',
+	'or',
+	'xor'
+];
+
+const values = ['this', 'true', 'false'];
+
+language.push(values, {type: 'constant'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(builtins, {type: 'function'});
+
+// Regular expressions
+language.push(Rule.perlStyleRegularExpression);
+
+// Comments
+language.push(Rule.perlStyleComment);
+language.push(Rule.webLink);
+
+// Variables
+language.push({
+	pattern: /(\$|@|%)\w+/i,
+	type: 'variable'
+});
+
+// Enddoc
+language.push({
+	pattern: /__END__[\s\S]*/m,
+	type: 'comment'
+});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Functions
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('perl5', language);
+	syntax.alias('perl5', ['perl', 'pl']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/php-script.js b/public/_components/@socketry/syntax/Syntax/Language/php-script.js
new file mode 100644
index 0000000..8a80571
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/php-script.js
@@ -0,0 +1,112 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('php-script');
+
+const keywords = [
+	'abstract',
+	'and',
+	'as',
+	'break',
+	'case',
+	'cfunction',
+	'class',
+	'const',
+	'continue',
+	'declare',
+	'default',
+	'die',
+	'do',
+	'echo',
+	'else',
+	'elseif',
+	'enddeclare',
+	'endfor',
+	'endforeach',
+	'endif',
+	'endswitch',
+	'endwhile',
+	'extends',
+	'extends',
+	'for',
+	'foreach',
+	'function',
+	'global',
+	'if',
+	'implements',
+	'include',
+	'include_once',
+	'interface',
+	'old_function',
+	'or',
+	'require',
+	'require_once',
+	'return',
+	'static',
+	'switch',
+	'throw',
+	'use',
+	'var',
+	'while',
+	'xor'
+];
+
+const access = ['private', 'protected', 'public'];
+
+const operators = [
+	'+',
+	'*',
+	'/',
+	'-',
+	'&',
+	'|',
+	'~',
+	'!',
+	'%',
+	'<',
+	'=',
+	'>',
+	'[',
+	']',
+	'new'
+];
+
+const values = ['this', 'true', 'false'];
+
+language.push(values, {type: 'constant'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(access, {type: 'access'});
+
+// Variables
+language.push({
+	pattern: /\$[a-z_][a-z0-9]*/gi,
+	type: 'variable'
+});
+
+// ClassNames (CamelCase)
+language.push(Rule.camelCaseType);
+language.push(Rule.cStyleFunction);
+
+// Comments
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.perlStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+language.processes['function'] = Rule.webLinkProcess(
+	'http://www.php.net/manual-lookup.php?pattern='
+);
+
+export default function register(syntax) {
+	syntax.register('php-script', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/php.js b/public/_components/@socketry/syntax/Syntax/Language/php.js
new file mode 100644
index 0000000..3eff099
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/php.js
@@ -0,0 +1,18 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('php');
+
+language.push({
+	pattern: /(<\?(php)?)([\s\S]*?)(\?>)/m,
+	matches: Rule.extractMatches(
+		{type: 'keyword'},
+		null,
+		{language: 'php-script'},
+		{type: 'keyword'}
+	)
+});
+
+export default function register(syntax) {
+	syntax.register('php', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/plain.js b/public/_components/@socketry/syntax/Syntax/Language/plain.js
new file mode 100644
index 0000000..4d3f7c8
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/plain.js
@@ -0,0 +1,20 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('plain');
+
+language.push(Rule.webLink);
+
+// Process href types as clickable links
+language.processes['href'] = function (container, match, options) {
+	const anchor = document.createElement('a');
+	anchor.className = container.className;
+	anchor.textContent = match.value;
+	anchor.href = match.value;
+	return anchor;
+};
+
+export default function register(syntax) {
+	syntax.register('plain', language);
+	syntax.alias('plain', ['text']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/protobuf.js b/public/_components/@socketry/syntax/Syntax/Language/protobuf.js
new file mode 100644
index 0000000..786547d
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/protobuf.js
@@ -0,0 +1,77 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('protobuf');
+
+const keywords = [
+	'enum',
+	'extend',
+	'extensions',
+	'group',
+	'import',
+	'max',
+	'message',
+	'option',
+	'package',
+	'returns',
+	'rpc',
+	'service',
+	'syntax',
+	'to',
+	'default'
+];
+language.push(keywords, {type: 'keyword'});
+
+const values = ['true', 'false'];
+language.push(values, {type: 'constant'});
+
+const types = [
+	'bool',
+	'bytes',
+	'double',
+	'fixed32',
+	'fixed64',
+	'float',
+	'int32',
+	'int64',
+	'sfixed32',
+	'sfixed64',
+	'sint32',
+	'sint64',
+	'string',
+	'uint32',
+	'uint64'
+];
+language.push(types, {type: 'type'});
+
+const access = ['optional', 'required', 'repeated'];
+language.push(access, {type: 'access'});
+
+language.push(Rule.camelCaseType);
+
+// Highlight names of fields
+language.push({
+	pattern: /\s+(\w+)\s*=\s*\d+/,
+	matches: Rule.extractMatches({
+		type: 'variable'
+	})
+});
+
+// Comments
+language.push(Rule.cppStyleComment);
+language.push(Rule.cStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+export default function register(syntax) {
+	syntax.register('protobuf', language);
+	syntax.alias('protobuf', ['proto']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/python.js b/public/_components/@socketry/syntax/Syntax/Language/python.js
new file mode 100644
index 0000000..2945395
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/python.js
@@ -0,0 +1,208 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('python');
+
+var keywords = [
+	'and',
+	'as',
+	'assert',
+	'break',
+	'class',
+	'continue',
+	'def',
+	'del',
+	'elif',
+	'else',
+	'except',
+	'exec',
+	'finally',
+	'for',
+	'from',
+	'global',
+	'if',
+	'import',
+	'in',
+	'is',
+	'lambda',
+	'not',
+	'or',
+	'pass',
+	'print',
+	'raise',
+	'return',
+	'try',
+	'while',
+	'with',
+	'yield'
+];
+
+var operators = [
+	'!=',
+	'%',
+	'%=',
+	'&',
+	'&=',
+	'(',
+	')',
+	'*',
+	'**',
+	'**=',
+	'*=',
+	'+',
+	'+=',
+	',',
+	'-',
+	'-=',
+	'.',
+	'/',
+	'//',
+	'//=',
+	'/=',
+	':',
+	';',
+	'<',
+	'<<',
+	'<<=',
+	'<=',
+	'<>',
+	'=',
+	'==',
+	'>',
+	'>=',
+	'>>',
+	'>>=',
+	'@',
+	'[',
+	']',
+	'^',
+	'^=',
+	'`',
+	'`',
+	'{',
+	'|',
+	'|=',
+	'}',
+	'~'
+];
+
+// Extracted from http://docs.python.org/library/functions.html
+var builtinFunctions = [
+	'abs',
+	'all',
+	'any',
+	'basestring',
+	'bin',
+	'bool',
+	'callable',
+	'chr',
+	'classmethod',
+	'cmp',
+	'compile',
+	'complex',
+	'delattr',
+	'dict',
+	'dir',
+	'divmod',
+	'enumerate',
+	'eval',
+	'execfile',
+	'file',
+	'filter',
+	'float',
+	'format',
+	'frozenset',
+	'getattr',
+	'globals',
+	'hasattr',
+	'hash',
+	'help',
+	'hex',
+	'id',
+	'input',
+	'int',
+	'isinstance',
+	'issubclass',
+	'iter',
+	'len',
+	'list',
+	'locals',
+	'long',
+	'map',
+	'max',
+	'min',
+	'next',
+	'object',
+	'oct',
+	'open',
+	'ord',
+	'pow',
+	'print',
+	'property',
+	'range',
+	'raw_input',
+	'reduce',
+	'reload',
+	'repr',
+	'reversed',
+	'round',
+	'set',
+	'setattr',
+	'slice',
+	'sorted',
+	'staticmethod',
+	'str',
+	'sum',
+	'super',
+	'tuple',
+	'type',
+	'type',
+	'unichr',
+	'unicode',
+	'vars',
+	'xrange',
+	'zip',
+	'__import__',
+	'apply',
+	'buffer',
+	'coerce',
+	'intern'
+];
+
+const values = ['self', 'True', 'False', 'None'];
+language.push({pattern: /^\s*@\w+/m, type: 'decorator'});
+language.push(values, {type: 'constant'});
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+language.push(builtinFunctions, {type: 'builtin'});
+
+// ClassNames (CamelCase)
+language.push(Rule.camelCaseType);
+language.push(Rule.cStyleFunction);
+
+language.push(Rule.perlStyleComment);
+language.push({pattern: /(['\"]{3})([^\1])*?\1/m, type: 'comment'});
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+language.processes['function'] = Rule.webLinkProcess(
+	'http://docs.python.org/search.html?q='
+);
+language.processes['type'] = Rule.webLinkProcess(
+	'http://docs.python.org/search.html?q='
+);
+language.processes['builtin'] = Rule.webLinkProcess(
+	'http://docs.python.org/search.html?q='
+);
+
+export default function register(syntax) {
+	syntax.register('python', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/ruby.js b/public/_components/@socketry/syntax/Syntax/Language/ruby.js
new file mode 100644
index 0000000..d21c2ae
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/ruby.js
@@ -0,0 +1,124 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+import {Match} from '../Match.js';
+
+const language = new Language('ruby');
+
+// Ruby-style function definitions and method calls (def foo, .bar)
+// Method names can end with ? or !
+const rubyStyleFunction = {
+	pattern: /(?:def\s+|\.)([a-z_][a-z0-9_]*[?!]?)/i,
+	matches: Rule.extractMatches({type: 'function'})
+};
+
+// Emulate negative lookbehind to avoid matching ::symbol (only match :symbol not ::symbol)
+// Symbols can also end with ? or !
+const rubyStyleSymbol = {
+	pattern: /([:]?):\w+[?!]?/,
+	type: 'constant',
+	matches: function (/* syntax */ _syntax, match, expr) {
+		// If there is a preceding ':' captured, skip (handles '::symbol').
+		if (match[1] !== '') return [];
+
+		return [new Match(match.index, match[0].length, expr, match[0])];
+	}
+};
+
+// Keywords, operators, values and access modifiers
+const keywords = [
+	'alias',
+	'and',
+	'begin',
+	'break',
+	'case',
+	'class',
+	'def',
+	'define_method',
+	'defined?',
+	'do',
+	'else',
+	'elsif',
+	'end',
+	'ensure',
+	'false',
+	'for',
+	'if',
+	'in',
+	'module',
+	'next',
+	'not',
+	'or',
+	'raise',
+	'redo',
+	'rescue',
+	'retry',
+	'return',
+	'then',
+	'throw',
+	'undef',
+	'unless',
+	'until',
+	'when',
+	'while',
+	'yield',
+	'block_given?'
+];
+
+const operators = ['+', '*', '/', '-', '&', '|', '~', '!', '%', '<', '=', '>', '...', '..'];
+const values = ['self', 'super', 'true', 'false', 'nil'];
+const access = ['private', 'protected', 'public'];
+
+language.push(access, {type: 'access'});
+language.push(values, {type: 'constant'});
+
+// Percent-literals like %q{...}, %w{...}
+language.push({
+	pattern: /(\%[\S])(\{[\s\S]*?\})/,
+	matches: Rule.extractMatches({type: 'function'}, {type: 'constant'})
+});
+
+// Backtick command strings
+language.push({pattern: /`[^`]+`/, type: 'string'});
+
+// Interpolation inside strings: #{ ... }
+language.push({
+	pattern: /\#\{([^\}]*)\}/,
+	matches: Rule.extractMatches({language: 'ruby', only: ['string']})
+});
+
+// Regular expressions
+language.push(Rule.rubyStyleRegularExpression);
+
+// Instance/class/global variables
+language.push({pattern: /(@+|\$)[\w]+/, type: 'variable'});
+
+// Types (CamelCase constants)
+language.push(Rule.camelCaseType);
+
+// Core tokens
+language.push(keywords, {type: 'keyword'});
+language.push(operators, {type: 'operator'});
+
+// Symbols
+language.push(rubyStyleSymbol);
+
+// Comments and links
+language.push(Rule.perlStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Functions (definitions and c-style function detection)
+language.push(rubyStyleFunction);
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('ruby', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/scala.js b/public/_components/@socketry/syntax/Syntax/Language/scala.js
new file mode 100644
index 0000000..9dcce69
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/scala.js
@@ -0,0 +1,81 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('scala');
+
+// Keywords
+language.push(
+	[
+		'abstract',
+		'do',
+		'finally',
+		'import',
+		'object',
+		'return',
+		'trait',
+		'var',
+		'case',
+		'catch',
+		'class',
+		'else',
+		'extends',
+		'for',
+		'forSome',
+		'if',
+		'lazy',
+		'match',
+		'new',
+		'override',
+		'package',
+		'private',
+		'sealed',
+		'super',
+		'try',
+		'type',
+		'while',
+		'with',
+		'yield',
+		'def',
+		'final',
+		'implicit',
+		'protected',
+		'throw',
+		'val'
+	],
+	{type: 'keyword'}
+);
+
+// Operators
+language.push(['_', ':', '=', '=>', '<-', '<:', '<%', '>:', '#', '@'], {
+	type: 'operator'
+});
+
+// Constants
+language.push(['this', 'null', 'true', 'false'], {type: 'constant'});
+
+// Triple-quoted strings
+language.push({pattern: /"""[\s\S]*?"""/, type: 'string'});
+
+// Double-quoted strings
+language.push(Rule.doubleQuotedString);
+
+// Functions: `def name` or `.name`
+language.push({
+	pattern: /(?:def\s+|\.)([a-z_][a-z0-9_]+)/i,
+	matches: Rule.extractMatches({type: 'function'})
+});
+
+// Types and function calls
+language.push(Rule.camelCaseType);
+language.push(Rule.cStyleFunction);
+
+// Comments
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+
+// Scala supports XML literals; derive XML rules
+language.derives('xml');
+
+export default function register(syntax) {
+	syntax.register('scala', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/smalltalk.js b/public/_components/@socketry/syntax/Syntax/Language/smalltalk.js
new file mode 100644
index 0000000..4977650
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/smalltalk.js
@@ -0,0 +1,30 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('smalltalk');
+
+const operators = ['[', ']', '|', ':=', '.'];
+
+const values = ['self', 'super', 'true', 'false', 'nil'];
+
+language.push(values, {type: 'constant'});
+language.push(operators, {type: 'operator'});
+
+// Objective-C style functions (method selectors ending with colon)
+language.push({pattern: /\w+:/, type: 'function'});
+
+// Camelcase Types
+language.push(Rule.camelCaseType);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+export default function register(syntax) {
+	syntax.register('smalltalk', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/sql.js b/public/_components/@socketry/syntax/Syntax/Language/sql.js
new file mode 100644
index 0000000..dd5dbe6
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/sql.js
@@ -0,0 +1,865 @@
+/**
+ * SQL language syntax highlighting
+ * Supports standard SQL keywords, operators, comments, strings, and numbers
+ */
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+// SQL-style comment (-- comment)
+const sqlStyleComment = {
+	pattern: /-- .*$/m,
+	type: 'comment',
+	allow: ['href']
+};
+
+const language = new Language('sql');
+
+// SQL keywords (comprehensive list covering major SQL dialects)
+const keywords = [
+	'A',
+	'ABORT',
+	'ABS',
+	'ABSOLUTE',
+	'ACCESS',
+	'ACTION',
+	'ADA',
+	'ADD',
+	'ADMIN',
+	'AFTER',
+	'AGGREGATE',
+	'ALIAS',
+	'ALL',
+	'ALLOCATE',
+	'ALSO',
+	'ALTER',
+	'ALWAYS',
+	'ANALYSE',
+	'ANALYZE',
+	'AND',
+	'ANY',
+	'ARE',
+	'ARRAY',
+	'AS',
+	'ASC',
+	'ASENSITIVE',
+	'ASSERTION',
+	'ASSIGNMENT',
+	'ASYMMETRIC',
+	'AT',
+	'ATOMIC',
+	'ATTRIBUTE',
+	'ATTRIBUTES',
+	'AUDIT',
+	'AUTHORIZATION',
+	'AUTO_INCREMENT',
+	'AVG',
+	'AVG_ROW_LENGTH',
+	'BACKUP',
+	'BACKWARD',
+	'BEFORE',
+	'BEGIN',
+	'BERNOULLI',
+	'BETWEEN',
+	'BIGINT',
+	'BINARY',
+	'BIT',
+	'BIT_LENGTH',
+	'BITVAR',
+	'BLOB',
+	'BOOL',
+	'BOOLEAN',
+	'BOTH',
+	'BREADTH',
+	'BREAK',
+	'BROWSE',
+	'BULK',
+	'BY',
+	'C',
+	'CACHE',
+	'CALL',
+	'CALLED',
+	'CARDINALITY',
+	'CASCADE',
+	'CASCADED',
+	'CASE',
+	'CAST',
+	'CATALOG',
+	'CATALOG_NAME',
+	'CEIL',
+	'CEILING',
+	'CHAIN',
+	'CHANGE',
+	'CHAR',
+	'CHAR_LENGTH',
+	'CHARACTER',
+	'CHARACTER_LENGTH',
+	'CHARACTER_SET_CATALOG',
+	'CHARACTER_SET_NAME',
+	'CHARACTER_SET_SCHEMA',
+	'CHARACTERISTICS',
+	'CHARACTERS',
+	'CHECK',
+	'CHECKED',
+	'CHECKPOINT',
+	'CHECKSUM',
+	'CLASS',
+	'CLASS_ORIGIN',
+	'CLOB',
+	'CLOSE',
+	'CLUSTER',
+	'CLUSTERED',
+	'COALESCE',
+	'COBOL',
+	'COLLATE',
+	'COLLATION',
+	'COLLATION_CATALOG',
+	'COLLATION_NAME',
+	'COLLATION_SCHEMA',
+	'COLLECT',
+	'COLUMN',
+	'COLUMN_NAME',
+	'COLUMNS',
+	'COMMAND_FUNCTION',
+	'COMMAND_FUNCTION_CODE',
+	'COMMENT',
+	'COMMIT',
+	'COMMITTED',
+	'COMPLETION',
+	'COMPRESS',
+	'COMPUTE',
+	'CONDITION',
+	'CONDITION_NUMBER',
+	'CONNECT',
+	'CONNECTION',
+	'CONNECTION_NAME',
+	'CONSTRAINT',
+	'CONSTRAINT_CATALOG',
+	'CONSTRAINT_NAME',
+	'CONSTRAINT_SCHEMA',
+	'CONSTRAINTS',
+	'CONSTRUCTOR',
+	'CONTAINS',
+	'CONTAINSTABLE',
+	'CONTINUE',
+	'CONVERSION',
+	'CONVERT',
+	'COPY',
+	'CORR',
+	'CORRESPONDING',
+	'COUNT',
+	'COVAR_POP',
+	'COVAR_SAMP',
+	'CREATE',
+	'CREATEDB',
+	'CREATEROLE',
+	'CREATEUSER',
+	'CROSS',
+	'CSV',
+	'CUBE',
+	'CUME_DIST',
+	'CURRENT',
+	'CURRENT_DATE',
+	'CURRENT_DEFAULT_TRANSFORM_GROUP',
+	'CURRENT_PATH',
+	'CURRENT_ROLE',
+	'CURRENT_TIME',
+	'CURRENT_TIMESTAMP',
+	'CURRENT_TRANSFORM_GROUP_FOR_TYPE',
+	'CURRENT_USER',
+	'CURSOR',
+	'CURSOR_NAME',
+	'CYCLE',
+	'DATA',
+	'DATABASE',
+	'DATABASES',
+	'DATE',
+	'DATETIME',
+	'DATETIME_INTERVAL_CODE',
+	'DATETIME_INTERVAL_PRECISION',
+	'DAY',
+	'DAY_HOUR',
+	'DAY_MICROSECOND',
+	'DAY_MINUTE',
+	'DAY_SECOND',
+	'DAYOFMONTH',
+	'DAYOFWEEK',
+	'DAYOFYEAR',
+	'DBCC',
+	'DEALLOCATE',
+	'DEC',
+	'DECIMAL',
+	'DECLARE',
+	'DEFAULT',
+	'DEFAULTS',
+	'DEFERRABLE',
+	'DEFERRED',
+	'DEFINED',
+	'DEFINER',
+	'DEGREE',
+	'DELAY_KEY_WRITE',
+	'DELAYED',
+	'DELETE',
+	'DELIMITER',
+	'DELIMITERS',
+	'DENSE_RANK',
+	'DENY',
+	'DEPTH',
+	'DEREF',
+	'DERIVED',
+	'DESC',
+	'DESCRIBE',
+	'DESCRIPTOR',
+	'DESTROY',
+	'DESTRUCTOR',
+	'DETERMINISTIC',
+	'DIAGNOSTICS',
+	'DICTIONARY',
+	'DISABLE',
+	'DISCONNECT',
+	'DISK',
+	'DISPATCH',
+	'DISTINCT',
+	'DISTINCTROW',
+	'DISTRIBUTED',
+	'DIV',
+	'DO',
+	'DOMAIN',
+	'DOUBLE',
+	'DROP',
+	'DUAL',
+	'DUMMY',
+	'DUMP',
+	'DYNAMIC',
+	'DYNAMIC_FUNCTION',
+	'DYNAMIC_FUNCTION_CODE',
+	'EACH',
+	'ELEMENT',
+	'ELSE',
+	'ELSEIF',
+	'ENABLE',
+	'ENCLOSED',
+	'ENCODING',
+	'ENCRYPTED',
+	'END',
+	'END-EXEC',
+	'ENUM',
+	'EQUALS',
+	'ERRLVL',
+	'ESCAPE',
+	'ESCAPED',
+	'EVERY',
+	'EXCEPT',
+	'EXCEPTION',
+	'EXCLUDE',
+	'EXCLUDING',
+	'EXCLUSIVE',
+	'EXEC',
+	'EXECUTE',
+	'EXISTING',
+	'EXISTS',
+	'EXIT',
+	'EXP',
+	'EXPLAIN',
+	'EXTERNAL',
+	'EXTRACT',
+	'FALSE',
+	'FETCH',
+	'FIELDS',
+	'FILE',
+	'FILLFACTOR',
+	'FILTER',
+	'FINAL',
+	'FIRST',
+	'FLOAT',
+	'FLOAT4',
+	'FLOAT8',
+	'FLOOR',
+	'FLUSH',
+	'FOLLOWING',
+	'FOR',
+	'FORCE',
+	'FOREIGN',
+	'FORTRAN',
+	'FORWARD',
+	'FOUND',
+	'FREE',
+	'FREETEXT',
+	'FREETEXTTABLE',
+	'FREEZE',
+	'FROM',
+	'FULL',
+	'FULLTEXT',
+	'FUNCTION',
+	'FUSION',
+	'G',
+	'GENERAL',
+	'GENERATED',
+	'GET',
+	'GLOBAL',
+	'GO',
+	'GOTO',
+	'GRANT',
+	'GRANTED',
+	'GRANTS',
+	'GREATEST',
+	'GROUP',
+	'GROUPING',
+	'HANDLER',
+	'HAVING',
+	'HEADER',
+	'HEAP',
+	'HIERARCHY',
+	'HIGH_PRIORITY',
+	'HOLD',
+	'HOLDLOCK',
+	'HOST',
+	'HOSTS',
+	'HOUR',
+	'HOUR_MICROSECOND',
+	'HOUR_MINUTE',
+	'HOUR_SECOND',
+	'IDENTIFIED',
+	'IDENTITY',
+	'IDENTITY_INSERT',
+	'IDENTITYCOL',
+	'IF',
+	'IGNORE',
+	'ILIKE',
+	'IMMEDIATE',
+	'IMMUTABLE',
+	'IMPLEMENTATION',
+	'IMPLICIT',
+	'IN',
+	'INCLUDE',
+	'INCLUDING',
+	'INCREMENT',
+	'INDEX',
+	'INDICATOR',
+	'INFILE',
+	'INFIX',
+	'INHERIT',
+	'INHERITS',
+	'INITIAL',
+	'INITIALIZE',
+	'INITIALLY',
+	'INNER',
+	'INOUT',
+	'INPUT',
+	'INSENSITIVE',
+	'INSERT',
+	'INSERT_ID',
+	'INSTANCE',
+	'INSTANTIABLE',
+	'INSTEAD',
+	'INT',
+	'INT1',
+	'INT2',
+	'INT3',
+	'INT4',
+	'INT8',
+	'INTEGER',
+	'INTERSECT',
+	'INTERSECTION',
+	'INTERVAL',
+	'INTO',
+	'INVOKER',
+	'IS',
+	'ISAM',
+	'ISNULL',
+	'ISOLATION',
+	'ITERATE',
+	'JOIN',
+	'K',
+	'KEY',
+	'KEY_MEMBER',
+	'KEY_TYPE',
+	'KEYS',
+	'KILL',
+	'LANCOMPILER',
+	'LANGUAGE',
+	'LARGE',
+	'LAST',
+	'LAST_INSERT_ID',
+	'LATERAL',
+	'LEADING',
+	'LEAST',
+	'LEAVE',
+	'LEFT',
+	'LENGTH',
+	'LESS',
+	'LEVEL',
+	'LIKE',
+	'LIMIT',
+	'LINENO',
+	'LINES',
+	'LISTEN',
+	'LN',
+	'LOAD',
+	'LOCAL',
+	'LOCALTIME',
+	'LOCALTIMESTAMP',
+	'LOCATION',
+	'LOCATOR',
+	'LOCK',
+	'LOGIN',
+	'LOGS',
+	'LONG',
+	'LONGBLOB',
+	'LONGTEXT',
+	'LOOP',
+	'LOW_PRIORITY',
+	'LOWER',
+	'M',
+	'MAP',
+	'MATCH',
+	'MATCHED',
+	'MAX',
+	'MAX_ROWS',
+	'MAXEXTENTS',
+	'MAXVALUE',
+	'MEDIUMBLOB',
+	'MEDIUMINT',
+	'MEDIUMTEXT',
+	'MEMBER',
+	'MERGE',
+	'MESSAGE_LENGTH',
+	'MESSAGE_OCTET_LENGTH',
+	'MESSAGE_TEXT',
+	'METHOD',
+	'MIDDLEINT',
+	'MIN',
+	'MIN_ROWS',
+	'MINUS',
+	'MINUTE',
+	'MINUTE_MICROSECOND',
+	'MINUTE_SECOND',
+	'MINVALUE',
+	'MLSLABEL',
+	'MOD',
+	'MODE',
+	'MODIFIES',
+	'MODIFY',
+	'MODULE',
+	'MONTH',
+	'MONTHNAME',
+	'MORE',
+	'MOVE',
+	'MULTISET',
+	'MUMPS',
+	'MYISAM',
+	'NAMES',
+	'NATIONAL',
+	'NATURAL',
+	'NCHAR',
+	'NCLOB',
+	'NESTING',
+	'NEW',
+	'NEXT',
+	'NO',
+	'NO_WRITE_TO_BINLOG',
+	'NOAUDIT',
+	'NOCHECK',
+	'NOCOMPRESS',
+	'NOCREATEDB',
+	'NOCREATEROLE',
+	'NOCREATEUSER',
+	'NOINHERIT',
+	'NOLOGIN',
+	'NONCLUSTERED',
+	'NONE',
+	'NORMALIZE',
+	'NORMALIZED',
+	'NOSUPERUSER',
+	'NOT',
+	'NOTHING',
+	'NOTIFY',
+	'NOTNULL',
+	'NOWAIT',
+	'NULL',
+	'NULLABLE',
+	'NULLIF',
+	'NULLS',
+	'NUMBER',
+	'NUMERIC',
+	'OBJECT',
+	'OCTET_LENGTH',
+	'OCTETS',
+	'OF',
+	'OFF',
+	'OFFLINE',
+	'OFFSET',
+	'OFFSETS',
+	'OIDS',
+	'OLD',
+	'ON',
+	'ONLINE',
+	'ONLY',
+	'OPEN',
+	'OPENDATASOURCE',
+	'OPENQUERY',
+	'OPENROWSET',
+	'OPENXML',
+	'OPERATION',
+	'OPERATOR',
+	'OPTIMIZE',
+	'OPTION',
+	'OPTIONALLY',
+	'OPTIONS',
+	'OR',
+	'ORDER',
+	'ORDERING',
+	'ORDINALITY',
+	'OTHERS',
+	'OUT',
+	'OUTER',
+	'OUTFILE',
+	'OUTPUT',
+	'OVER',
+	'OVERLAPS',
+	'OVERLAY',
+	'OVERRIDING',
+	'OWNER',
+	'PACK_KEYS',
+	'PAD',
+	'PARAMETER',
+	'PARAMETER_MODE',
+	'PARAMETER_NAME',
+	'PARAMETER_ORDINAL_POSITION',
+	'PARAMETER_SPECIFIC_CATALOG',
+	'PARAMETER_SPECIFIC_NAME',
+	'PARAMETER_SPECIFIC_SCHEMA',
+	'PARAMETERS',
+	'PARTIAL',
+	'PARTITION',
+	'PASCAL',
+	'PASSWORD',
+	'PATH',
+	'PCTFREE',
+	'PERCENT',
+	'PERCENT_RANK',
+	'PERCENTILE_CONT',
+	'PERCENTILE_DISC',
+	'PLACING',
+	'PLAN',
+	'PLI',
+	'POSITION',
+	'POSTFIX',
+	'POWER',
+	'PRECEDING',
+	'PRECISION',
+	'PREFIX',
+	'PREORDER',
+	'PREPARE',
+	'PREPARED',
+	'PRESERVE',
+	'PRIMARY',
+	'PRINT',
+	'PRIOR',
+	'PRIVILEGES',
+	'PROC',
+	'PROCEDURAL',
+	'PROCEDURE',
+	'PROCESS',
+	'PROCESSLIST',
+	'PUBLIC',
+	'PURGE',
+	'QUOTE',
+	'RAID0',
+	'RAISERROR',
+	'RANGE',
+	'RANK',
+	'RAW',
+	'READ',
+	'READS',
+	'READTEXT',
+	'REAL',
+	'RECHECK',
+	'RECONFIGURE',
+	'RECURSIVE',
+	'REF',
+	'REFERENCES',
+	'REFERENCING',
+	'REGEXP',
+	'REGR_AVGX',
+	'REGR_AVGY',
+	'REGR_COUNT',
+	'REGR_INTERCEPT',
+	'REGR_R2',
+	'REGR_SLOPE',
+	'REGR_SXX',
+	'REGR_SXY',
+	'REGR_SYY',
+	'REINDEX',
+	'RELATIVE',
+	'RELEASE',
+	'RELOAD',
+	'RENAME',
+	'REPEAT',
+	'REPEATABLE',
+	'REPLACE',
+	'REPLICATION',
+	'REQUIRE',
+	'RESET',
+	'RESIGNAL',
+	'RESOURCE',
+	'RESTART',
+	'RESTORE',
+	'RESTRICT',
+	'RESULT',
+	'RETURN',
+	'RETURNED_CARDINALITY',
+	'RETURNED_LENGTH',
+	'RETURNED_OCTET_LENGTH',
+	'RETURNED_SQLSTATE',
+	'RETURNS',
+	'REVOKE',
+	'RIGHT',
+	'RLIKE',
+	'ROLE',
+	'ROLLBACK',
+	'ROLLUP',
+	'ROUTINE',
+	'ROUTINE_CATALOG',
+	'ROUTINE_NAME',
+	'ROUTINE_SCHEMA',
+	'ROW',
+	'ROW_COUNT',
+	'ROW_NUMBER',
+	'ROWCOUNT',
+	'ROWGUIDCOL',
+	'ROWID',
+	'ROWNUM',
+	'ROWS',
+	'RULE',
+	'SAVE',
+	'SAVEPOINT',
+	'SCALE',
+	'SCHEMA',
+	'SCHEMA_NAME',
+	'SCHEMAS',
+	'SCOPE',
+	'SCOPE_CATALOG',
+	'SCOPE_NAME',
+	'SCOPE_SCHEMA',
+	'SCROLL',
+	'SEARCH',
+	'SECOND',
+	'SECOND_MICROSECOND',
+	'SECTION',
+	'SECURITY',
+	'SELECT',
+	'SELF',
+	'SENSITIVE',
+	'SEPARATOR',
+	'SEQUENCE',
+	'SERIALIZABLE',
+	'SERVER_NAME',
+	'SESSION',
+	'SESSION_USER',
+	'SET',
+	'SETOF',
+	'SETS',
+	'SETUSER',
+	'SHARE',
+	'SHOW',
+	'SHUTDOWN',
+	'SIGNAL',
+	'SIMILAR',
+	'SIMPLE',
+	'SIZE',
+	'SMALLINT',
+	'SOME',
+	'SONAME',
+	'SOURCE',
+	'SPACE',
+	'SPATIAL',
+	'SPECIFIC',
+	'SPECIFIC_NAME',
+	'SPECIFICTYPE',
+	'SQL',
+	'SQL_BIG_RESULT',
+	'SQL_BIG_SELECTS',
+	'SQL_BIG_TABLES',
+	'SQL_CALC_FOUND_ROWS',
+	'SQL_LOG_OFF',
+	'SQL_LOG_UPDATE',
+	'SQL_LOW_PRIORITY_UPDATES',
+	'SQL_SELECT_LIMIT',
+	'SQL_SMALL_RESULT',
+	'SQL_WARNINGS',
+	'SQLCA',
+	'SQLCODE',
+	'SQLERROR',
+	'SQLEXCEPTION',
+	'SQLSTATE',
+	'SQLWARNING',
+	'SQRT',
+	'SSL',
+	'STABLE',
+	'START',
+	'STARTING',
+	'STATE',
+	'STATEMENT',
+	'STATIC',
+	'STATISTICS',
+	'STATUS',
+	'STDDEV_POP',
+	'STDDEV_SAMP',
+	'STDIN',
+	'STDOUT',
+	'STORAGE',
+	'STRAIGHT_JOIN',
+	'STRICT',
+	'STRING',
+	'STRUCTURE',
+	'STYLE',
+	'SUBCLASS_ORIGIN',
+	'SUBLIST',
+	'SUBMULTISET',
+	'SUBSTRING',
+	'SUCCESSFUL',
+	'SUM',
+	'SUPERUSER',
+	'SYMMETRIC',
+	'SYNONYM',
+	'SYSDATE',
+	'SYSID',
+	'SYSTEM',
+	'SYSTEM_USER',
+	'TABLE',
+	'TABLE_NAME',
+	'TABLES',
+	'TABLESAMPLE',
+	'TABLESPACE',
+	'TEMP',
+	'TEMPLATE',
+	'TEMPORARY',
+	'TERMINATE',
+	'TERMINATED',
+	'TEXT',
+	'TEXTSIZE',
+	'THAN',
+	'THEN',
+	'TIES',
+	'TIME',
+	'TIMESTAMP',
+	'TIMEZONE_HOUR',
+	'TIMEZONE_MINUTE',
+	'TINYBLOB',
+	'TINYINT',
+	'TINYTEXT',
+	'TO',
+	'TOAST',
+	'TOP',
+	'TOP_LEVEL_COUNT',
+	'TRAILING',
+	'TRAN',
+	'TRANSACTION',
+	'TRANSACTION_ACTIVE',
+	'TRANSACTIONS_COMMITTED',
+	'TRANSACTIONS_ROLLED_BACK',
+	'TRANSFORM',
+	'TRANSFORMS',
+	'TRANSLATE',
+	'TRANSLATION',
+	'TREAT',
+	'TRIGGER',
+	'TRIGGER_CATALOG',
+	'TRIGGER_NAME',
+	'TRIGGER_SCHEMA',
+	'TRIM',
+	'TRUE',
+	'TRUNCATE',
+	'TRUSTED',
+	'TSEQUAL',
+	'TYPE',
+	'UESCAPE',
+	'UID',
+	'UNBOUNDED',
+	'UNCOMMITTED',
+	'UNDER',
+	'UNDO',
+	'UNENCRYPTED',
+	'UNION',
+	'UNIQUE',
+	'UNKNOWN',
+	'UNLISTEN',
+	'UNLOCK',
+	'UNNAMED',
+	'UNNEST',
+	'UNSIGNED',
+	'UNTIL',
+	'UPDATE',
+	'UPDATETEXT',
+	'UPPER',
+	'USAGE',
+	'USE',
+	'USER',
+	'USER_DEFINED_TYPE_CATALOG',
+	'USER_DEFINED_TYPE_CODE',
+	'USER_DEFINED_TYPE_NAME',
+	'USER_DEFINED_TYPE_SCHEMA',
+	'USING',
+	'UTC_DATE',
+	'UTC_TIME',
+	'UTC_TIMESTAMP',
+	'VACUUM',
+	'VALID',
+	'VALIDATE',
+	'VALIDATOR',
+	'VALUE',
+	'VALUES',
+	'VAR_POP',
+	'VAR_SAMP',
+	'VARBINARY',
+	'VARCHAR',
+	'VARCHAR2',
+	'VARCHARACTER',
+	'VARIABLE',
+	'VARIABLES',
+	'VARYING',
+	'VERBOSE',
+	'VIEW',
+	'VOLATILE',
+	'WAITFOR',
+	'WHEN',
+	'WHENEVER',
+	'WHERE',
+	'WHILE',
+	'WIDTH_BUCKET',
+	'WINDOW',
+	'WITH',
+	'WITHIN',
+	'WITHOUT',
+	'WORK',
+	'WRITE',
+	'WRITETEXT',
+	'X509',
+	'XOR',
+	'YEAR',
+	'YEAR_MONTH',
+	'ZEROFILL',
+	'ZONE'
+];
+
+// SQL operators (longest first to match <= and >= before < and >)
+const operators = ['!=', '<=', '>=', '=', '<', '>', '+', '-', '*', '/', '%'];
+
+language.push(operators, {type: 'operator'});
+language.push(sqlStyleComment);
+language.push(keywords, {type: 'keyword', options: 'gi'});
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+language.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('sql', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/super-collider.js b/public/_components/@socketry/syntax/Syntax/Language/super-collider.js
new file mode 100644
index 0000000..7fc7d28
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/super-collider.js
@@ -0,0 +1,70 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('super-collider');
+
+// Keywords
+language.push(['const', 'arg', 'classvar', 'var'], {type: 'keyword'});
+
+// Operators
+language.push(
+	['`', '+', '@', ':', '*', '/', '-', '&', '|', '~', '!', '%', '<', '=', '>'],
+	{
+		type: 'operator'
+	}
+);
+
+// Constants/values
+language.push(
+	[
+		'thisFunctionDef',
+		'thisFunction',
+		'thisMethod',
+		'thisProcess',
+		'thisThread',
+		'this',
+		'super',
+		'true',
+		'false',
+		'nil',
+		'inf'
+	],
+	{type: 'constant'}
+);
+
+// CamelCase class/type names
+language.push(Rule.camelCaseType);
+
+// Single Characters like $a or $\n
+language.push({pattern: /\$(\\)?.\b/, type: 'constant'});
+
+// Symbols: \symbol and 'quotedSymbol'
+language.push({pattern: /\\[a-z_][a-z0-9_]*/i, type: 'symbol'});
+language.push({pattern: /'[^']+'/, type: 'symbol'});
+
+// Comments and links
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Strings: SuperCollider uses double quotes for Strings
+// Single quotes denote Symbols and are handled above.
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Method calls .method and c-style function pattern (identifier()
+language.push({
+	pattern: /(?:\.)([a-z_][a-z0-9_]*)/i,
+	matches: Rule.extractMatches({type: 'function'})
+});
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('super-collider', language);
+	// Alias: sc
+	syntax.alias('super-collider', ['sc']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/swift.js b/public/_components/@socketry/syntax/Syntax/Language/swift.js
new file mode 100644
index 0000000..13bf87f
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/swift.js
@@ -0,0 +1,176 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('swift');
+
+const keywords = [
+	'associatedtype',
+	'class',
+	'deinit',
+	'enum',
+	'extension',
+	'fileprivate',
+	'func',
+	'import',
+	'init',
+	'inout',
+	'internal',
+	'let',
+	'operator',
+	'private',
+	'protocol',
+	'static',
+	'struct',
+	'subscript',
+	'typealias',
+	'var',
+	'break',
+	'case',
+	'continue',
+	'default',
+	'defer',
+	'do',
+	'else',
+	'fallthrough',
+	'for',
+	'guard',
+	'if',
+	'in',
+	'repeat',
+	'return',
+	'switch',
+	'where',
+	'while',
+	'as',
+	'catch',
+	'is',
+	'rethrows',
+	'throw',
+	'throws',
+	'try',
+	'_',
+	'#available',
+	'#colorLiteral',
+	'#column',
+	'#else',
+	'#elseif',
+	'#endif',
+	'#file',
+	'#fileLiteral',
+	'#function',
+	'#if',
+	'#imageLiteral',
+	'#line',
+	'#selector',
+	'#sourceLocation',
+	'associativity',
+	'convenience',
+	'dynamic',
+	'didSet',
+	'final',
+	'get',
+	'infix',
+	'indirect',
+	'lazy',
+	'left',
+	'mutating',
+	'none',
+	'nonmutating',
+	'optional',
+	'override',
+	'postfix',
+	'precedence',
+	'prefix',
+	'Protocol',
+	'required',
+	'right',
+	'set',
+	'Type',
+	'unowned',
+	'weak',
+	'willSet'
+];
+
+// Operators - ordered longest to shortest
+const operators = [
+	'...',
+	'..<',
+	'->',
+	'+',
+	'*',
+	'/',
+	'-',
+	'&',
+	'|',
+	'~',
+	'!',
+	'%',
+	'<',
+	'=',
+	'>',
+	'(',
+	')',
+	'{',
+	'}',
+	'[',
+	']',
+	'.',
+	',',
+	':',
+	';',
+	'@',
+	'#',
+	'`',
+	'?'
+];
+
+const values = ['self', 'super', 'true', 'false', 'nil'];
+const access = ['fileprivate', 'open', 'private', 'public'];
+
+// Access modifiers
+language.push(access, {type: 'access'});
+
+// Built-in values
+language.push(values, {type: 'constant'});
+
+// Backtick identifiers
+language.push({
+	pattern: /`[^`]+`/g,
+	type: 'identifier'
+});
+
+// String interpolation \(...) - needs special handling
+language.push({
+	pattern: /\\\(([^)]*)\)/g,
+	klass: 'string'
+});
+
+// Types (CamelCase)
+language.push(Rule.camelCaseType);
+
+// Keywords
+language.push(keywords, {type: 'keyword'});
+
+// Operators
+language.push(operators, {type: 'operator'});
+
+// Comments
+language.push(Rule.cStyleComment);
+language.push(Rule.cppStyleComment);
+language.push(Rule.webLink);
+
+// Strings
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+language.push(Rule.stringEscape);
+
+// Numbers
+language.push(Rule.decimalNumber);
+language.push(Rule.hexNumber);
+
+// Functions
+language.push(Rule.cStyleFunction);
+
+export default function register(syntax) {
+	syntax.register('swift', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/xml.js b/public/_components/@socketry/syntax/Syntax/Language/xml.js
new file mode 100644
index 0000000..32347e2
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/xml.js
@@ -0,0 +1,76 @@
+/**
+ * XML language syntax highlighting
+ * Supports XML tags, attributes, entities, CDATA sections, and comments
+ */
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+// XML entity pattern: &entity;
+const xmlEntity = {pattern: /&\w+;/, type: 'entity'};
+
+// XML percent escape pattern for URL encoding
+const xmlPercentEscape = {
+	pattern: /(%[0-9a-f]{2})/i,
+	type: 'percent-escape',
+	only: ['string']
+};
+
+// Create xml-tag language for highlighting XML tag internals
+const xmlTagLanguage = new Language('xml-tag');
+
+// Match opening/closing tags with optional namespace
+// Pattern: <tag>, <ns:tag>, </tag>, </ns:tag>, <tag/>, etc.
+xmlTagLanguage.push({
+	pattern: /<\/?((?:[^:\s>]+:)?)([^\s>]+)(\s[^>]*)?\/?>/,
+	matches: Rule.extractMatches({type: 'namespace'}, {type: 'tag-name'})
+});
+
+// Match attributes with values
+// Pattern: attribute="value", attribute='value', attribute=value
+xmlTagLanguage.push({
+	pattern: /([^=\s]+)=(".*?"|'.*?'|[^\s>]+)/,
+	matches: Rule.extractMatches(
+		{type: 'attribute', only: ['tag']},
+		{type: 'string', only: ['tag']}
+	)
+});
+
+xmlTagLanguage.push(xmlEntity);
+xmlTagLanguage.push(xmlPercentEscape);
+xmlTagLanguage.push(Rule.singleQuotedString);
+xmlTagLanguage.push(Rule.doubleQuotedString);
+
+// Create main XML language
+
+const language = new Language('xml');
+
+// Match CDATA sections
+// Pattern: <![CDATA[content]]>
+language.push({
+	pattern: /(<!(\[CDATA\[)([\s\S]*?)(\]\])>)/m,
+	matches: Rule.extractMatches(
+		{type: 'cdata', allow: ['cdata-content', 'cdata-tag']},
+		{type: 'cdata-tag'},
+		{type: 'cdata-content'},
+		{type: 'cdata-tag'}
+	)
+});
+
+// XML comments
+language.push(Rule.xmlComment);
+
+// Match all XML tags and delegate to xml-tag language
+language.push({
+	pattern: /<[^>\-\s]([^>'"!\/;\?@\[\]^`\{\}\|]|"[^"]*"|'[^']')*[\/?]?>/,
+	language: 'xml-tag'
+});
+
+language.push(xmlEntity);
+language.push(xmlPercentEscape);
+language.push(Rule.webLink);
+
+// Register both languages
+export default function register(syntax) {
+	syntax.register('xml-tag', xmlTagLanguage);
+	syntax.register('xml', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/xrb.js b/public/_components/@socketry/syntax/Syntax/Language/xrb.js
new file mode 100644
index 0000000..12f7359
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/xrb.js
@@ -0,0 +1,33 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('xrb');
+
+// Embedded Ruby processing instruction: <?r ... ?>
+language.push({
+	pattern: /(<\?r)([\s\S]*?)(\?>)/m,
+	matches: Rule.extractMatches(
+		{type: 'keyword'},
+		{language: 'ruby'},
+		{type: 'keyword'}
+	)
+});
+
+// Ruby interpolation within text: #{ ... }
+language.push({
+	pattern: /(#{)([\s\S]*?)(})/m,
+	matches: Rule.extractMatches(
+		{type: 'keyword'},
+		{language: 'ruby'},
+		{type: 'keyword'}
+	)
+});
+
+// Derive XML so tags/attributes/entities are highlighted around embedded Ruby
+language.derives('xml');
+
+export default function register(syntax) {
+	syntax.register('xrb', language);
+	// Alias 'trenni' if used historically
+	syntax.alias('xrb', ['trenni']);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Language/yaml.js b/public/_components/@socketry/syntax/Syntax/Language/yaml.js
new file mode 100644
index 0000000..6be4116
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Language/yaml.js
@@ -0,0 +1,29 @@
+import {Language} from '../Language.js';
+import {Rule} from '../Rule.js';
+
+const language = new Language('yaml');
+
+language.push({
+	pattern: /^\s*#.*$/m,
+	type: 'comment',
+	allow: ['href']
+});
+
+language.push(Rule.singleQuotedString);
+language.push(Rule.doubleQuotedString);
+
+language.push({
+	pattern: /(&|\*)[a-z0-9]+/i,
+	type: 'constant'
+});
+
+language.push({
+	pattern: /(.*?):/i,
+	matches: Rule.extractMatches({type: 'keyword'})
+});
+
+language.push(Rule.webLink);
+
+export default function register(syntax) {
+	syntax.register('yaml', language);
+}
diff --git a/public/_components/@socketry/syntax/Syntax/Loader.js b/public/_components/@socketry/syntax/Syntax/Loader.js
new file mode 100644
index 0000000..4168286
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Loader.js
@@ -0,0 +1,78 @@
+export class Loader {
+	#cache = new Map();
+	#pending = new Map();
+	#load;
+
+	/**
+	 * Create a new loader
+	 * @param {Function} load - Async function that resolves the key to a resource.
+	 */
+	constructor(load) {
+		this.#load = load;
+	}
+
+	/**
+	 * Load a resource with automatic deduplication and caching.
+	 * @param {string|URL} key - Unique identifier for the resource.
+	 * @returns {Promise<any>} The loaded resource.
+	 */
+	async load(key) {
+		const id = key.toString();
+
+		// Return cached result if available:
+		if (this.#cache.has(id)) {
+			return this.#cache.get(id);
+		}
+
+		// Return pending promise if already fetching:
+		if (this.#pending.has(id)) {
+			return this.#pending.get(id);
+		}
+
+		// Start new fetch and track it:
+		const promise = (async () => {
+			try {
+				const result = await this.#load(this, key);
+				this.#cache.set(id, result);
+				return result;
+			} finally {
+				this.#pending.delete(id);
+			}
+		})();
+
+		this.#pending.set(id, promise);
+		return promise;
+	}
+
+	/**
+	 * Check if a resource is cached
+	 */
+	has(key) {
+		return this.#cache.has(key.toString());
+	}
+
+	/**
+	 * Get a cached resource (synchronous)
+	 */
+	get(key) {
+		return this.#cache.get(key.toString());
+	}
+
+	/**
+	 * Set a resource in the cache
+	 */
+	set(key, value) {
+		this.#cache.set(key.toString(), value);
+		return value;
+	}
+
+	/**
+	 * Clear the cache
+	 */
+	clear() {
+		this.#cache.clear();
+		this.#pending.clear();
+	}
+}
+
+export default Loader;
diff --git a/public/_components/@socketry/syntax/Syntax/Match.js b/public/_components/@socketry/syntax/Syntax/Match.js
new file mode 100644
index 0000000..5b01f5f
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Match.js
@@ -0,0 +1,552 @@
+export class Match {
+	// Public properties
+	offset;
+	endOffset;
+	length;
+	expression;
+	type;
+	value;
+	children = [];
+	parent = null;
+	// A pointer to the next match if a match is bisected.
+	next = null;
+	complete;
+
+	constructor(offset, length, expression, value) {
+		this.offset = offset;
+		this.endOffset = offset + length;
+		this.length = length;
+
+		// Handle expression being either a string (type) or an object
+		if (typeof expression === 'string') {
+			this.type = expression;
+			this.expression = {type: expression};
+		} else {
+			this.expression = expression;
+			this.type = expression?.type;
+		}
+
+		this.value = value;
+	}
+
+	/**
+	 * Shifts an entire tree forward or backwards.
+	 */
+	shift(offset, text) {
+		this.adjust(offset, null, text);
+
+		for (const child of this.children) {
+			child.shift(offset, text);
+		}
+	}
+
+	/**
+	 * Adjust the current match to have different offset and length.
+	 */
+	adjust(offset, length, text) {
+		this.offset += offset;
+		this.endOffset += offset;
+
+		if (length) {
+			this.length = length;
+			this.endOffset = this.offset + length;
+		}
+
+		if (text) {
+			this.value = text.substr(this.offset, this.length);
+		}
+	}
+
+	/**
+	 * Sort helper for sorting matches in forward order
+	 */
+	static sort(a, b) {
+		return a.offset - b.offset || b.length - a.length;
+	}
+
+	/**
+	 * Is the given match contained in the range of the parent match?
+	 */
+	contains(match) {
+		return match.offset >= this.offset && match.endOffset <= this.endOffset;
+	}
+
+	/**
+	 * Default reduce callback - converts nodes to DOM
+	 */
+	static defaultReduceCallback(node, container) {
+		// We avoid using complex DOM manipulation for performance
+		if (typeof node === 'string') {
+			node = document.createTextNode(node);
+		}
+
+		container.appendChild(node);
+	}
+
+	/**
+	 * Convert a tree of matches into DOM nodes
+	 */
+	reduce(append, process) {
+		let start = this.offset;
+		let container = null;
+
+		if (this.expression && this.expression.element) {
+			container = this.expression.element.cloneNode(false);
+		} else {
+			container = document.createElement('span');
+		}
+
+		append = append || Match.defaultReduceCallback;
+
+		if (this.expression && this.expression.type) {
+			if (container.className.length > 0) {
+				container.className += ' ';
+			}
+
+			container.className += this.expression.type;
+		}
+
+		for (const child of this.children) {
+			const end = child.offset;
+			child.parent = this;
+
+			if (child.offset < this.offset) {
+				console.warn(
+					'Syntax Warning: Offset of child',
+					child,
+					'is before offset of parent',
+					this
+				);
+			}
+
+			const text = this.value.substr(start - this.offset, end - start);
+
+			append(text, container);
+			append(child.reduce(append, process), container);
+
+			start = child.endOffset;
+		}
+
+		if (start === this.offset) {
+			append(this.value, container);
+		} else if (start < this.endOffset) {
+			append(
+				this.value.substr(start - this.offset, this.endOffset - start),
+				container
+			);
+		} else if (start > this.endOffset) {
+			console.warn(
+				'Syntax Warning: Start position ' +
+					start +
+					' exceeds end of value ' +
+					this.endOffset
+			);
+		}
+
+		if (process) {
+			container = process(container, this);
+		}
+
+		return container;
+	}
+
+	/**
+	 * Main nesting check - can a match contain the given match?
+	 */
+	canContain(match) {
+		// This is a special conditional for explicitly added ranges by the user.
+		if (match.expression.force) {
+			return true;
+		}
+
+		// Can't add anything into complete trees.
+		if (this.complete) {
+			return false;
+		}
+
+		// match.expression.only will be checked on insertion using this.canHaveChild(match)
+		if (match.expression.only) {
+			return true;
+		}
+
+		// If allow is undefined, default behaviour is no children.
+		if (typeof this.expression.allow === 'undefined') {
+			return false;
+		}
+
+		// false if {disallow: [..., type, ...]}
+		if (
+			Array.isArray(this.expression.disallow) &&
+			this.expression.disallow.includes(match.expression.type)
+		) {
+			return false;
+		}
+
+		// true if {allow: '*'}
+		if (this.expression.allow === '*') {
+			return true;
+		}
+
+		// true if {allow: [..., type, ...]}
+		if (
+			Array.isArray(this.expression.allow) &&
+			this.expression.allow.includes(match.expression.type)
+		) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Return true if the given match can be spliced in as a child.
+	 */
+	canHaveChild(match) {
+		const only = match.expression.only;
+
+		if (only) {
+			let cur = this;
+
+			while (cur !== null) {
+				if (only.includes(cur.expression.type)) {
+					return true;
+				}
+
+				cur = cur.parent;
+
+				// We don't traverse into other trees.
+				if (cur && cur.complete) {
+					break;
+				}
+			}
+
+			return false;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Add a child into the list of children for a given match.
+	 */
+	#splice(i, match) {
+		if (this.canHaveChild(match)) {
+			this.children.splice(i, 0, match);
+			match.parent = this;
+
+			// For matches added using tags.
+			if (!match.expression.owner) {
+				match.expression.owner = this.expression.owner;
+			}
+
+			return this;
+		} else {
+			return null;
+		}
+	}
+
+	/**
+	 * Insert a match, potentially splitting the tree to fit.
+	 */
+	insert(match, whole) {
+		if (!this.contains(match)) {
+			return null;
+		}
+
+		if (whole) {
+			let top = this,
+				i = 0;
+			while (i < top.children.length) {
+				if (top.children[i].contains(match)) {
+					top = top.children[i];
+					i = 0;
+				} else {
+					i += 1;
+				}
+			}
+
+			return top.#insertWhole(match);
+		} else {
+			return this.#insert(match);
+		}
+	}
+
+	/**
+	 * Insert a whole match, splitting children as needed.
+	 */
+	#insertWhole(match) {
+		const parts = this.bisectAtOffsets([match.offset, match.endOffset]);
+		this.children = [];
+
+		if (parts[0]) {
+			this.children = this.children.concat(parts[0].children);
+		}
+
+		if (parts[1]) {
+			match.children = [];
+
+			// Element-backed matches describe authored markup and must retain their
+			// original expression so reduction can recreate that element.
+			if (
+				this.expression &&
+				this.expression.owner &&
+				!match.expression.element
+			) {
+				match.expression =
+					this.expression.owner.getRuleForType(match.expression.type) ||
+					match.expression;
+			}
+
+			for (const child of parts[1].children) {
+				if (match.canContain(child)) {
+					match.children.push(child);
+				}
+			}
+
+			this.children.push(match);
+		}
+
+		if (parts[2]) {
+			this.children = this.children.concat(parts[2].children);
+		}
+
+		return this;
+	}
+
+	/**
+	 * Insert at end - optimized for sorted insertion.
+	 */
+	insertAtEnd(match) {
+		if (!this.contains(match)) {
+			console.error('Syntax Error: Child is not contained in parent node!');
+			return null;
+		}
+
+		if (!this.canContain(match)) {
+			return null;
+		}
+
+		if (this.children.length > 0) {
+			const i = this.children.length - 1;
+			const child = this.children[i];
+
+			if (match.offset < child.offset) {
+				// Displacement: Before or LHS Overlap
+				if (match.force) {
+					return this.#insert(match);
+				} else {
+					return null;
+				}
+			} else if (match.offset < child.endOffset) {
+				if (match.endOffset <= child.endOffset) {
+					// Displacement: Contains
+					return child.insertAtEnd(match);
+				} else {
+					// Displacement: RHS Overlap
+					if (match.force) {
+						return this.#insert(match);
+					} else {
+						return null;
+					}
+				}
+			} else {
+				// Displacement: After
+				return this.#splice(i + 1, match);
+			}
+		} else {
+			// Displacement: Contains [but currently no children]
+			return this.#splice(0, match);
+		}
+	}
+
+	/**
+	 * General insertion function that splits match over children.
+	 */
+	#insert(match) {
+		if (this.children.length === 0) {
+			return this.#splice(0, match);
+		}
+
+		for (let i = 0; i < this.children.length; i += 1) {
+			const child = this.children[i];
+
+			// If the match ends before this child, it must be before it.
+			if (match.endOffset <= child.offset) {
+				return this.#splice(i, match);
+			}
+
+			// If the match starts after this child, we continue.
+			if (match.offset >= child.endOffset) {
+				continue;
+			}
+
+			// First, the easiest case:
+			if (child.contains(match)) {
+				return child.#insert(match);
+			}
+
+			const parts = match.bisectAtOffsets([child.offset, child.endOffset]);
+
+			if (parts[0]) {
+				this.#splice(i, parts[0]);
+			}
+
+			if (parts[1]) {
+				child.insert(parts[1]);
+			}
+
+			// Continue insertion at this level with remainder.
+			if (parts[2]) {
+				match = parts[2];
+			} else {
+				return this;
+			}
+		}
+
+		// If we got this far, insert at the end.
+		this.#splice(this.children.length, match);
+	}
+
+	/**
+	 * Recursively bisect the tree at given offsets.
+	 */
+	bisectAtOffsets(splits) {
+		const parts = [];
+		let start = this.offset;
+		let prev = null;
+		const children = [...this.children];
+
+		// Copy the array so we can modify it.
+		splits = splits.slice(0);
+
+		// We need to split including the last part.
+		splits.push(this.endOffset);
+
+		splits.sort((a, b) => a - b);
+
+		for (let i = 0; i < splits.length; i += 1) {
+			const offset = splits[i];
+
+			if (offset > this.endOffset) {
+				break;
+			}
+
+			if (offset < this.offset || offset - start === 0) {
+				parts.push(null);
+				start = offset;
+				continue;
+			}
+
+			if (start < this.offset) {
+				start = this.offset;
+			}
+
+			const match = new Match(start, offset - start, this.expression);
+			match.value = this.value.substr(start - this.offset, match.length);
+
+			if (prev) {
+				prev.next = match;
+			}
+
+			prev = match;
+			start = match.endOffset;
+			parts.push(match);
+		}
+
+		splits.length = parts.length;
+
+		for (let i = 0; i < parts.length; i += 1) {
+			if (parts[i] === null) {
+				continue;
+			}
+
+			while (children.length > 0) {
+				if (children[0].endOffset <= parts[i].endOffset) {
+					parts[i].children.push(children.shift());
+				} else {
+					break;
+				}
+			}
+
+			if (children.length) {
+				if (children[0].offset < parts[i].endOffset) {
+					const children_parts = children.shift().bisectAtOffsets(splits);
+					let j = 0;
+
+					for (; j < children_parts.length; j += 1) {
+						if (children_parts[j] === null) continue;
+
+						parts[i + j].children.push(children_parts[j]);
+					}
+
+					i += children_parts.length - 2;
+					splits.splice(0, children_parts.length - 2);
+				}
+			}
+
+			splits.shift();
+		}
+
+		if (children.length) {
+			console.error(
+				'Syntax Error: Children nodes not consumed',
+				children.length,
+				' remaining!'
+			);
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Split a match at points that match a specific pattern.
+	 */
+	split(pattern) {
+		const splits = [];
+
+		// Clone the regex and ensure it is global
+		if (!pattern.global) {
+			pattern = new RegExp(pattern.source, pattern.flags + 'g');
+		}
+
+		let match;
+		while ((match = pattern.exec(this.value)) !== null) {
+			splits.push(pattern.lastIndex);
+		}
+
+		const matches = this.bisectAtOffsets(splits);
+
+		// Remove any null placeholders.
+		return matches.filter(n => n);
+	}
+
+	/**
+	 * Split into lines with indent/text structure.
+	 */
+	splitLines() {
+		const lines = this.split(/\n/g);
+
+		for (let i = 0; i < lines.length; i += 1) {
+			const line = lines[i];
+			const indentOffset = line.value.search(/\S/);
+
+			const top = new Match(line.offset, line.length, line.expression, line.value);
+
+			if (indentOffset > 0) {
+				const parts = line.bisectAtOffsets([line.offset + indentOffset]);
+				top.children = parts;
+				parts[0].expression = {type: 'indent'};
+				parts[1].expression = {type: 'text'};
+			} else {
+				line.expression = {type: 'text'};
+				top.children = [line];
+			}
+
+			lines[i] = top;
+		}
+
+		return lines;
+	}
+}
+
+export default Match;
diff --git a/public/_components/@socketry/syntax/Syntax/Rule.js b/public/_components/@socketry/syntax/Syntax/Rule.js
new file mode 100644
index 0000000..35dd553
--- /dev/null
+++ b/public/_components/@socketry/syntax/Syntax/Rule.js
@@ -0,0 +1,322 @@
+import {Match} from './Match.js';
+import {Language} from './Language.js';
+
+export class Rule {
+	/**
+	 * Convert string to token pattern with word boundaries.
+	 */
+	static convertStringToTokenPattern(pattern, escape) {
+		let prefix = '\\b',
+			postfix = '\\b';
+
+		if (!pattern.match(/^\w/)) {
+			if (!pattern.match(/\w$/)) {
+				prefix = postfix = '';
+			} else {
+				prefix = '\\B';
+			}
+		} else {
+			if (!pattern.match(/\w$/)) {
+				postfix = '\\B';
+			}
+		}
+
+		if (escape) {
+			pattern = pattern.replace(/[\-\[\]{}()*+?.\\\^$|,#\s]/g, '\\$&');
+		}
+
+		return prefix + pattern + postfix;
+	}
+
+	/**
+	 * Normalize a rule by converting string patterns to RegExp and setting defaults.
+	 */
+	static normalizeRule(rule, owner) {
+		const normalized = {...rule, owner};
+
+		if (typeof normalized.pattern === 'string') {
+			normalized.string = normalized.pattern;
+			normalized.pattern = new RegExp(
+				Rule.convertStringToTokenPattern(normalized.string, true),
+				normalized.options
+			);
+		}
+
+		// Default pattern extraction algorithm
+		normalized.apply = normalized.apply || Rule.matchPattern;
+
+		return normalized;
+	}
+
+	/**
+	 * Match a pattern against text and return matches.
+	 */
+	static async matchPattern(syntax, rule, text) {
+		if (!rule.pattern) {
+			return [];
+		}
+
+		const matches = [];
+
+		// Duplicate the pattern and ensure 'g' flag is set:
+		let pattern = rule.pattern;
+		if (!pattern.global) {
+			pattern = new RegExp(pattern.source, pattern.flags + 'g');
+		}
+
+		let match;
+		while ((match = pattern.exec(text)) !== null) {
+			if (rule.matches) {
+				// Try new signature first (syntax, match, rule), fall back to old signature (match, rule)
+				// This supports both extractMatches (new) and custom matches functions (old)
+				const result =
+					rule.matches.length >= 3
+						? rule.matches(syntax, match, rule)
+						: rule.matches(match, rule);
+				// Handle both sync and async matches functions
+				matches.push(...(result instanceof Promise ? await result : result));
+			} else if (rule.language) {
+				// Use the owning language's syntax to build sub-tree for embedded language
+				matches.push(
+					await Language.buildTree(syntax, rule, match[0], match.index, undefined)
+				);
+			} else {
+				matches.push(new Match(match.index, match[0].length, rule, match[0]));
+			}
+			if (rule.incremental) {
+				// Don't start scanning from the end of the match
+				pattern.lastIndex = match.index + 1;
+			}
+		}
+		return matches;
+	}
+
+	/**
+	 * Create a matches extractor based on capture groups.
+	 * Each provided rule corresponds to a capture group (default i+1) in the RegExp match.
+	 * If a rule has {language: 'name'}, a subtree will be built using that language.
+	 * If a rule has other expression fields (e.g. type), a Match will be created.
+	 */
+	static extractMatches(...rules) {
+		return async function (syntax, match, expression) {
+			const results = [];
+			for (let i = 0; i < rules.length; i += 1) {
+				const rule = rules[i];
+				// Skip null/undefined rules:
+				if (rule == null) continue;
+
+				// Determine the capture group index to use:
+				let index = typeof rule.index !== 'undefined' ? rule.index : i + 1;
+				const value = match[index];
+
+				// Skip empty captures:
+				if (!value || value.length === 0) continue;
+
+				// Compute absolute offset of this capture group within the full match:
+				const offset = match.index + match[0].indexOf(value);
+
+				// Create either a subtree or a Match based on the rule:
+				if (rule.language) {
+					results.push(
+						await Language.buildTree(syntax, rule, value, offset, undefined)
+					);
+				} else {
+					const nestedExpression = {owner: expression?.owner, ...rule};
+					results.push(new Match(offset, value.length, nestedExpression, value));
+				}
+			}
+
+			return results;
+		};
+	}
+
+	/**
+	 * Create a conditional matcher that selects a rule based on another capture group.
+	 * Tests a condition capture group against patterns to determine which rule to apply
+	 * to a content capture group.
+	 *
+	 * @param {number} conditionIndex - Capture group index to test against patterns
+	 * @param {number} contentIndex - Capture group index containing content to match
+	 * @param {Array<{pattern?: RegExp, ...rule}>} conditions - Array of condition objects. Each can have:
+	 *   - pattern: RegExp to test against the condition group (optional - if omitted, acts as fallback)
+	 *   - Any rule properties (language, type, etc.) to apply when pattern matches
+	 * @returns {Function} A matches function for use in language rules
+	 *
+	 * @example
+	 * // Script tags with type-based language selection
+	 * language.push({
+	 *   pattern: /<script(\s+[^>]*?)?>((.|\n)*?)<\/script>/im,
+	 *   matches: Rule.extractConditionalMatch(1, 2, [
+	 *     {pattern: /type\s*=\s*["']importmap["']/i, language: 'json'},
+	 *     {pattern: /type\s*=\s*["'](?:text|application)\/javascript["']/i, language: 'javascript'},
+	 *     {language: 'javascript'} // Fallback for no type or unknown types
+	 *   ])
+	 * });
+	 *
+	 * @example
+	 * // Code fence with language specifier
+	 * language.push({
+	 *   pattern: /```(\w+)?\n([\s\S]*?)```/,
+	 *   matches: Rule.extractConditionalMatch(1, 2, [
+	 *     {pattern: /^javascript$/i, language: 'javascript'},
+	 *     {pattern: /^python$/i, language: 'python'},
+	 *     {language: 'plaintext'} // Fallback
+	 *   ])
+	 * });
+	 *
+	 * @example
+	 * // Conditional type based on prefix
+	 * language.push({
+	 *   pattern: /(TODO|FIXME|NOTE):\s*(.+)/,
+	 *   matches: Rule.extractConditionalMatch(1, 2, [
+	 *     {pattern: /^TODO$/i, type: 'todo'},
+	 *     {pattern: /^FIXME$/i, type: 'error'},
+	 *     {pattern: /^NOTE$/i, type: 'comment'}
+	 *   ])
+	 * });
+	 */
+	static extractConditionalMatch(conditionIndex, contentIndex, conditions) {
+		return async function (syntax, match, expression) {
+			const condition = match[conditionIndex] || '';
+			const content = match[contentIndex];
+
+			// Skip if no content
+			if (!content) return [];
+
+			// Find matching rule
+			let rule = null;
+			for (const candidate of conditions) {
+				// If no pattern specified, it's a fallback
+				if (!candidate.pattern || candidate.pattern.test(condition)) {
+					rule = candidate;
+					break;
+				}
+			}
+
+			// If no rule determined, return empty
+			if (!rule) return [];
+
+			// Extract rule properties (exclude pattern)
+			const {pattern, ...ruleProps} = rule;
+
+			// Build syntax tree or create match based on rule properties
+			const offset = match.index + match[0].indexOf(content);
+
+			if (ruleProps.language) {
+				return [
+					await Language.buildTree(
+						syntax,
+						{...ruleProps, owner: expression?.owner},
+						content,
+						offset,
+						undefined
+					)
+				];
+			} else {
+				const nestedExpression = {owner: expression?.owner, ...ruleProps};
+				return [new Match(offset, content.length, nestedExpression, content)];
+			}
+		};
+	}
+
+	static cStyleComment = {
+		pattern: /\/\*[\s\S]*?\*\//m,
+		type: 'comment',
+		allow: ['href']
+	};
+	static cppStyleComment = {
+		pattern: /\/\/.*$/m,
+		type: 'comment',
+		allow: ['href']
+	};
+	static perlStyleComment = {
+		pattern: /#.*$/m,
+		type: 'comment',
+		allow: ['href']
+	};
+
+	static perlStyleRegularExpression = {
+		pattern: /\B\/([^\\\/]|\\.)*\/[a-z]*(?=\s*($|[^\w\s'"\(]))/m,
+		type: 'constant',
+		incremental: true
+	};
+	static rubyStyleRegularExpression = {
+		pattern: /\B\/([^\\\/]|\\.)*\/[a-z]*(?=\s*($|[^\w\s'"\(]|do))/m,
+		type: 'constant',
+		incremental: true
+	};
+
+	static cStyleFunction = {
+		pattern: /([a-z_][a-z0-9_]*)\s*\(/i,
+		matches: this.extractMatches({type: 'function'})
+	};
+	static camelCaseType = {pattern: /\b_*[A-Z][\w]*\b/, type: 'type'};
+	static cStyleType = {pattern: /\b[_a-z][_\w]*_t\b/i, type: 'type'};
+
+	static xmlComment = {
+		pattern: /(&lt;|<)!--[\s\S]*?--(&gt;|>)/m,
+		type: 'comment'
+	};
+	static webLink = {pattern: /\w+:\/\/[\w\-.\/?%&=@:;#]*/, type: 'href'};
+
+	static hexNumber = {pattern: /\b0x[0-9a-fA-F]+/, type: 'constant'};
+	static decimalNumber = {
+		pattern: /\b[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?/,
+		type: 'constant'
+	};
+
+	static doubleQuotedString = {pattern: /"([^\\"\n]|\\.)*"/, type: 'string'};
+	static singleQuotedString = {pattern: /'([^\\'\n]|\\.)*'/, type: 'string'};
+	static multiLineDoubleQuotedString = {
+		pattern: /"([^\\"]|\\.)*"/,
+		type: 'string'
+	};
+	static multiLineSingleQuotedString = {
+		pattern: /'([^\\']|\\.)*'/,
+		type: 'string'
+	};
+	static stringEscape = {pattern: /\\./, type: 'escape', only: ['string']};
+
+	/**
+	 * Create a process function that wraps matched tokens in documentation links.
+	 *
+	 * @param {string} baseUrl - The base URL for documentation lookups
+	 * @returns {Function} A process function for language.processes
+	 *
+	 * @example
+	 * language.processes['function'] = Rule.webLinkProcess('http://docs.python.org/search.html?q=');
+	 */
+	static webLinkProcess(baseUrl) {
+		return function (container, match, options) {
+			// Authored links take precedence over generated documentation links.
+			// Depending on the source ranges, the authored link may be either an
+			// ancestor or a descendant of this syntax match.
+			let current = match;
+			while (current) {
+				if (current.expression?.element?.tagName === 'A') {
+					return container;
+				}
+
+				current = current.parent;
+			}
+
+			if (container.matches('a') || container.querySelector('a')) {
+				return container;
+			}
+
+			// Replace the span with an anchor element
+			const anchor = document.createElement('a');
+
+			// Copy className and content from container
+			anchor.className = container.className;
+			anchor.innerHTML = container.innerHTML;
+
+			// Append the matched text to the base URL
+			anchor.href = `${baseUrl}${encodeURIComponent(match.value)}`;
+
+			return anchor;
+		};
+	}
+}
+
+export default Rule;
diff --git a/public/_components/@socketry/syntax/license.md b/public/_components/@socketry/syntax/license.md
new file mode 100644
index 0000000..90c489d
--- /dev/null
+++ b/public/_components/@socketry/syntax/license.md
@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright, 2025, by Samuel Williams.  
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/public/_components/@socketry/syntax/package.json b/public/_components/@socketry/syntax/package.json
new file mode 100644
index 0000000..35309c5
--- /dev/null
+++ b/public/_components/@socketry/syntax/package.json
@@ -0,0 +1,44 @@
+{
+	"name": "@socketry/syntax",
+	"version": "0.6.1",
+	"description": "A modern, framework-agnostic syntax highlighter using Web Components",
+	"type": "module",
+	"main": "Syntax.js",
+	"exports": {
+		".": "./Syntax.js",
+		"./Match": "./Syntax/Match.js",
+		"./Language": "./Syntax/Language.js",
+		"./Loader": "./Syntax/Loader.js",
+		"./Errors": "./Syntax/Errors.js",
+		"./Language/*": "./Syntax/Language/*.js"
+	},
+	"files": [
+		"Syntax.js",
+		"Syntax/",
+		"styles/",
+		"themes/"
+	],
+	"scripts": {
+		"test": "node --test 'test/**/*.js'",
+		"format": "eslint . --fix",
+		"format:check": "eslint ."
+	},
+	"keywords": [
+		"syntax",
+		"highlighting",
+		"web-components",
+		"code",
+		"highlighter"
+	],
+	"author": "Samuel G. D. Williams",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/socketry/syntax-js.git"
+	},
+	"devDependencies": {
+		"@stylistic/eslint-plugin": "^5.10.0",
+		"eslint": "^10.8.1",
+		"jsdom": "^25.0.0"
+	}
+}
diff --git a/public/_components/@socketry/syntax/readme.md b/public/_components/@socketry/syntax/readme.md
new file mode 100644
index 0000000..7d3b255
--- /dev/null
+++ b/public/_components/@socketry/syntax/readme.md
@@ -0,0 +1,190 @@
+# @socketry/syntax
+
+A modern, framework-agnostic syntax highlighter using Web Components. This is a reimplementation of [jQuery.Syntax](https://github.com/ioquatix/jquery-syntax) without jQuery dependencies.
+
+[Browse the examples](https://socketry.github.io/syntax-js/examples/).
+
+## Features
+
+- 🎨 **Modern Web Components** - Uses autonomous custom elements
+- 📦 **Dynamic Loading** - Loads language definitions on-demand
+- 🔒 **No Dependencies** - Pure JavaScript, no jQuery required
+- 🎯 **Framework Agnostic** - Works with React, Vue, vanilla JS, etc.
+- 🌲 **Clean Architecture** - Well-structured classes with clear responsibilities
+- 🔐 **Private Fields** - Modern JavaScript with proper encapsulation
+
+## Installation
+
+```bash
+npm install @socketry/syntax
+```
+
+## Usage
+
+### Automatic Upgrade
+
+The easiest way to use Syntax is to let it automatically upgrade existing `<code>` elements:
+
+```html
+<script type="module">
+	import Syntax from '@socketry/syntax';
+	
+	// Automatically upgrade all code blocks with language classes
+	document.addEventListener('DOMContentLoaded', async function() {
+		await Syntax.highlight();
+	});
+</script>
+
+<!-- Standard code blocks - will be automatically upgraded -->
+<pre><code class="language-javascript">
+const hello = "world";
+console.log(hello);
+</code></pre>
+
+<p>Inline code: <code class="language-javascript">const x = 1;</code></p>
+```
+
+By default, `Syntax.highlight()` will:
+- Find all `<code>` elements with class names matching `language-*` e.g., `language-javascript`, `language-python`.
+- Replace them with `<syntax-code>` web components.
+- Automatically detect if they're inside `<pre>` tags for proper wrapping behavior.
+
+You can customize the selector:
+
+```javascript
+// Only upgrade specific elements:
+await Syntax.highlight({
+	selector: 'code.highlight'
+});
+```
+
+### Manual Web Components
+
+You can also use the `<syntax-code>` web component directly:
+
+```html
+<script type="module">
+	import {Syntax} from '@socketry/syntax';
+	
+	// Disable automatic upgrade, just register the component:
+	await Syntax.highlight({upgradeAll: false});
+</script>
+
+<!-- Use the web component directly -->
+<syntax-code language="javascript">
+	const hello = "world"; console.log(hello);
+</syntax-code>
+
+<!-- Inside a <pre> tag for block display with line wrapping -->
+<pre><syntax-code language="python" wrap>
+def greet(name):
+    print(f"Hello, {name}!")
+</syntax-code></pre>
+```
+
+### Programmatic Usage
+
+```javascript
+import Syntax from '@socketry/syntax';
+import registerJavaScript from '@socketry/syntax/Language/javascript.js';
+
+// Create a Syntax instance
+const syntax = new Syntax();
+registerJavaScript(syntax);
+
+// Get the JavaScript language and process code:
+const language = await syntax.getLanguage('javascript');
+const code = 'const x = 10;';
+const html = await language.process(code);
+document.body.appendChild(html);
+```
+
+### The `wrap` Attribute
+
+The `<syntax-code>` element automatically detects whether it's inside a `<pre>` tag:
+
+- **Inside `<pre>`**: Sets `wrap` attribute, enables line wrapping with proper indentation.
+- **Standalone**: No `wrap` attribute, uses horizontal scrolling for long lines.
+
+You can manually control this:
+
+```html
+<!-- Force wrapping even outside <pre> -->
+<syntax-code language="javascript" wrap>
+const reallyLongLine = "This will wrap instead of scroll";
+</syntax-code>
+
+<!-- Disable wrapping even inside <pre> -->
+<pre><syntax-code language="javascript">
+const code = "This will scroll horizontally";
+</syntax-code></pre>
+```
+
+## Line Measurement API
+
+The `<syntax-code>` element exposes a `ready` promise and methods for measuring rendered line positions, useful for building code focus/highlight overlays:
+
+```javascript
+const code = document.querySelector('syntax-code');
+
+// Wait for rendering to complete:
+await code.ready;
+
+// Highlighting may fail while leaving the original source visible:
+if (!code.highlighted) return;
+
+// Get the number of rendered lines:
+console.log(code.lineCount); // 42
+
+// Get the bounding rect of a specific line (1-based):
+const rect = code.getLineBoundingClientRect(5);
+console.log(rect.top, rect.bottom, rect.height);
+```
+
+- **`ready`** — A `Promise` that resolves when the current highlighting attempt completes, whether it succeeds or fails.
+- **`highlighted`** — Returns `true` when the current highlighting attempt has completed successfully. It is `false` while highlighting is pending or after a failure; existing content remains visible in either case.
+- **`lineCount`** — Returns the total number of rendered lines, or `0` if not yet highlighted.
+- **`getLineBoundingClientRect(lineNumber)`** — Returns a `DOMRect` for the given 1-based line number, or `null` if the line doesn't exist. Coordinates are relative to the viewport, just like `Element.getBoundingClientRect()`.
+
+## Command Line Tool
+
+A simple CLI tool is included to inspect the AST (Abstract Syntax Tree) of parsed code:
+
+```bash
+node bin/syntax-ast.js <language> <code>
+```
+
+Examples:
+
+```bash
+# Parse JavaScript
+node bin/syntax-ast.js javascript "const x = 1;"
+
+# Parse Markdown
+node bin/syntax-ast.js markdown '`inline code`'
+
+# Parse Python
+node bin/syntax-ast.js python "def foo(): pass"
+```
+
+Output shows all matched tokens with their type, position, length, and text:
+
+```
+Language: javascript
+Code: "const x = 1;"
+
+Matches: 3
+────────────────────────────────────────────────────────────────────────────────
+[keyword] @0..5 (5 chars)
+  Text: "const"
+[operator] @8..9 (1 chars)
+  Text: "="
+[constant] @10..11 (1 chars)
+  Text: "1"
+```
+
+This is useful for:
+- Debugging language definitions
+- Understanding how code is tokenized
+- Testing pattern matching
+- Developing new language support
diff --git a/public/_components/@socketry/syntax/themes/base/apache.css b/public/_components/@socketry/syntax/themes/base/apache.css
new file mode 100644
index 0000000..80f5d0e
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/apache.css
@@ -0,0 +1 @@
+/* Per-language overrides for Apache (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/applescript.css b/public/_components/@socketry/syntax/themes/base/applescript.css
new file mode 100644
index 0000000..e260edb
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/applescript.css
@@ -0,0 +1 @@
+/* Per-language overrides for AppleScript (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/assembly.css b/public/_components/@socketry/syntax/themes/base/assembly.css
new file mode 100644
index 0000000..53f59f3
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/assembly.css
@@ -0,0 +1 @@
+/* Per-language overrides for Assembly (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/bash.css b/public/_components/@socketry/syntax/themes/base/bash.css
new file mode 100644
index 0000000..e44f58d
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/bash.css
@@ -0,0 +1 @@
+/* Per-language overrides for Bash (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/basic.css b/public/_components/@socketry/syntax/themes/base/basic.css
new file mode 100644
index 0000000..5dfe1c8
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/basic.css
@@ -0,0 +1 @@
+/* Per-language overrides for BASIC (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/c.css b/public/_components/@socketry/syntax/themes/base/c.css
new file mode 100644
index 0000000..66c5cf3
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/c.css
@@ -0,0 +1 @@
+/* Per-language overrides for C (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/clang.css b/public/_components/@socketry/syntax/themes/base/clang.css
new file mode 100644
index 0000000..e69de29
diff --git a/public/_components/@socketry/syntax/themes/base/csharp.css b/public/_components/@socketry/syntax/themes/base/csharp.css
new file mode 100644
index 0000000..07ba007
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/csharp.css
@@ -0,0 +1 @@
+/* Per-language overrides for C# (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/css.css b/public/_components/@socketry/syntax/themes/base/css.css
new file mode 100644
index 0000000..111d261
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/css.css
@@ -0,0 +1,22 @@
+/* Per-language overrides for CSS (empty by default). */
+
+/* Color box styling */
+.colour-box {
+	display: inline-block;
+	margin: 0 0.2em;
+	border: 1px solid #999;
+	line-height: 0.9;
+	vertical-align: middle;
+}
+
+.colour-box .sample {
+	display: inline-block;
+	width: 0.9em;
+	height: 0.9em;
+}
+
+@media (prefers-color-scheme: dark) {
+	.colour-box {
+		border-color: #666;
+	}
+}
diff --git a/public/_components/@socketry/syntax/themes/base/diff.css b/public/_components/@socketry/syntax/themes/base/diff.css
new file mode 100644
index 0000000..d4cef23
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/diff.css
@@ -0,0 +1,48 @@
+/* Per-language overrides for Diff (empty by default). */
+
+/* Light mode: Style entire lines based on the type of change */
+.syntax.diff .insert {
+	background-color: rgba(0, 180, 0, 0.08);
+}
+
+.syntax.diff .remove {
+	background-color: rgba(220, 0, 0, 0.08);
+}
+
+.syntax.diff .offset {
+	background-color: rgba(0, 100, 200, 0.08);
+	font-weight: bold;
+}
+
+.syntax.diff .add {
+	color: #22863a;
+	font-weight: bold;
+}
+
+.syntax.diff .del {
+	color: #b31d28;
+	font-weight: bold;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	.syntax.diff .insert {
+		background-color: rgba(0, 255, 0, 0.1);
+	}
+
+	.syntax.diff .remove {
+		background-color: rgba(255, 0, 0, 0.1);
+	}
+
+	.syntax.diff .offset {
+		background-color: rgba(0, 150, 255, 0.1);
+	}
+
+	.syntax.diff .add {
+		color: #34d058;
+	}
+
+	.syntax.diff .del {
+		color: #ea4a5a;
+	}
+}
diff --git a/public/_components/@socketry/syntax/themes/base/go.css b/public/_components/@socketry/syntax/themes/base/go.css
new file mode 100644
index 0000000..2a55856
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/go.css
@@ -0,0 +1 @@
+/* Per-language overrides for Go (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/haskell.css b/public/_components/@socketry/syntax/themes/base/haskell.css
new file mode 100644
index 0000000..a0554c8
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/haskell.css
@@ -0,0 +1 @@
+/* Per-language overrides for Haskell (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/html.css b/public/_components/@socketry/syntax/themes/base/html.css
new file mode 100644
index 0000000..c57ecec
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/html.css
@@ -0,0 +1 @@
+/* Per-language overrides for HTML (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/io.css b/public/_components/@socketry/syntax/themes/base/io.css
new file mode 100644
index 0000000..455afa2
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/io.css
@@ -0,0 +1 @@
+/* Io Syntax Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/java.css b/public/_components/@socketry/syntax/themes/base/java.css
new file mode 100644
index 0000000..ddb5eb7
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/java.css
@@ -0,0 +1 @@
+/* Java Syntax Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/javascript.css b/public/_components/@socketry/syntax/themes/base/javascript.css
new file mode 100644
index 0000000..af7a227
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/javascript.css
@@ -0,0 +1 @@
+/* Per-language overrides for JavaScript (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/json.css b/public/_components/@socketry/syntax/themes/base/json.css
new file mode 100644
index 0000000..da5c778
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/json.css
@@ -0,0 +1,41 @@
+/* JSON syntax highlighting styles */
+
+/* Light mode (default) */
+code.syntax .key {
+	color: #0451a5;
+	font-weight: normal;
+}
+
+code.syntax .string {
+	color: #a31515;
+}
+
+code.syntax .constant {
+	color: #098658;
+}
+
+code.syntax .operator {
+	color: #000000;
+	opacity: 0.6;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .key {
+		color: #9cdcfe;
+		font-weight: normal;
+	}
+
+	code.syntax .string {
+		color: #ce9178;
+	}
+
+	code.syntax .constant {
+		color: #b5cea8;
+	}
+
+	code.syntax .operator {
+		color: #d4d4d4;
+		opacity: 0.8;
+	}
+}
diff --git a/public/_components/@socketry/syntax/themes/base/lisp.css b/public/_components/@socketry/syntax/themes/base/lisp.css
new file mode 100644
index 0000000..77169ef
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/lisp.css
@@ -0,0 +1 @@
+/* Lisp Syntax Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/lua.css b/public/_components/@socketry/syntax/themes/base/lua.css
new file mode 100644
index 0000000..ba107e2
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/lua.css
@@ -0,0 +1 @@
+/* Lua Syntax Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/markdown.css b/public/_components/@socketry/syntax/themes/base/markdown.css
new file mode 100644
index 0000000..dd6d0a4
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/markdown.css
@@ -0,0 +1,16 @@
+/**
+ * Markdown language theme
+ * 
+ * Markdown uses semantic token types with appropriate styling.
+ * Colors are derived from the base theme using hue rotation.
+ */
+
+/* Semantic markdown tokens */
+code.syntax .heading { color: hsl(calc(var(--syntax-base-hue) + 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .emphasis { color: hsl(calc(var(--syntax-base-hue) - 90), calc(var(--syntax-base-saturation) - 10%), calc(var(--syntax-base-lightness) - 10%)); font-style: italic; }
+code.syntax .strong { color: hsl(calc(var(--syntax-base-hue) + 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .code { color: hsl(calc(var(--syntax-base-hue) - 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .link { color: hsl(calc(var(--syntax-base-hue) - 60), var(--syntax-base-saturation), var(--syntax-base-lightness)); text-decoration: underline; }
+code.syntax .quote { color: hsl(var(--syntax-base-hue), calc(var(--syntax-base-saturation) - 45%), var(--syntax-base-lightness)); font-style: italic; }
+code.syntax .list-marker { color: hsl(calc(var(--syntax-base-hue) + 90), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+
diff --git a/public/_components/@socketry/syntax/themes/base/nginx.css b/public/_components/@socketry/syntax/themes/base/nginx.css
new file mode 100644
index 0000000..8e6d04f
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/nginx.css
@@ -0,0 +1 @@
+/* Nginx Configuration Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/ocaml.css b/public/_components/@socketry/syntax/themes/base/ocaml.css
new file mode 100644
index 0000000..99ee2bd
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/ocaml.css
@@ -0,0 +1 @@
+/* OCaml/F# Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/pascal.css b/public/_components/@socketry/syntax/themes/base/pascal.css
new file mode 100644
index 0000000..56cb0a7
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/pascal.css
@@ -0,0 +1 @@
+/* Pascal/Delphi Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/perl5.css b/public/_components/@socketry/syntax/themes/base/perl5.css
new file mode 100644
index 0000000..77d6255
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/perl5.css
@@ -0,0 +1 @@
+/* Perl 5 Syntax Highlighting */
diff --git a/public/_components/@socketry/syntax/themes/base/php-script.css b/public/_components/@socketry/syntax/themes/base/php-script.css
new file mode 100644
index 0000000..03ca754
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/php-script.css
@@ -0,0 +1 @@
+/* PHP-script Syntax Highlighting Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/php.css b/public/_components/@socketry/syntax/themes/base/php.css
new file mode 100644
index 0000000..741c271
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/php.css
@@ -0,0 +1 @@
+/* PHP Syntax Highlighting Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/plain.css b/public/_components/@socketry/syntax/themes/base/plain.css
new file mode 100644
index 0000000..3bfb9a4
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/plain.css
@@ -0,0 +1 @@
+/* Plain Text Syntax Highlighting */
diff --git a/public/_components/@socketry/syntax/themes/base/protobuf.css b/public/_components/@socketry/syntax/themes/base/protobuf.css
new file mode 100644
index 0000000..6a76ec5
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/protobuf.css
@@ -0,0 +1 @@
+/* Protocol Buffers Syntax Highlighting */
diff --git a/public/_components/@socketry/syntax/themes/base/python.css b/public/_components/@socketry/syntax/themes/base/python.css
new file mode 100644
index 0000000..73de4e5
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/python.css
@@ -0,0 +1 @@
+/* Per-language overrides for Python (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/base/ruby.css b/public/_components/@socketry/syntax/themes/base/ruby.css
new file mode 100644
index 0000000..e4c0075
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/ruby.css
@@ -0,0 +1,23 @@
+/* Ruby-specific token styles */
+
+/* Light mode */
+/* Symbols like :symbol */
+code.syntax .symbol {
+	color: #d73a49;
+}
+
+/* Instance/class/global variables */
+code.syntax .variable {
+	color: #6f42c1;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .symbol {
+		color: #e06c75;
+	}
+
+	code.syntax .variable {
+		color: #e5c07b;
+	}
+}
diff --git a/public/_components/@socketry/syntax/themes/base/scala.css b/public/_components/@socketry/syntax/themes/base/scala.css
new file mode 100644
index 0000000..62f9bbe
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/scala.css
@@ -0,0 +1,3 @@
+/* Scala language specific tweaks (optional) */
+
+/* Inherit base theme colors for standard token types. Add overrides here if desired. */
diff --git a/public/_components/@socketry/syntax/themes/base/smalltalk.css b/public/_components/@socketry/syntax/themes/base/smalltalk.css
new file mode 100644
index 0000000..a84d6cb
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/smalltalk.css
@@ -0,0 +1 @@
+/* Smalltalk Syntax Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/sql.css b/public/_components/@socketry/syntax/themes/base/sql.css
new file mode 100644
index 0000000..c361d80
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/sql.css
@@ -0,0 +1 @@
+/* SQL Syntax Theme */
diff --git a/public/_components/@socketry/syntax/themes/base/super-collider.css b/public/_components/@socketry/syntax/themes/base/super-collider.css
new file mode 100644
index 0000000..fe9f8fc
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/super-collider.css
@@ -0,0 +1,33 @@
+/* SuperCollider-specific token styles */
+
+/* Light mode */
+/* Symbols like \freq or 'name' */
+code.syntax .symbol {
+	color: #d73a49; /* red accent distinct from strings */
+}
+
+/* SC instance/class/global variables (@var, @@var, $char shown as constant) */
+code.syntax .variable {
+	color: #6f42c1; /* purple distinct from constants */
+}
+
+/* Optional: emphasize function/method calls a bit more */
+code.syntax .function {
+	color: #005cc5;
+	font-weight: 600;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .symbol {
+		color: #e06c75; /* reddish accent distinct from strings */
+	}
+
+	code.syntax .variable {
+		color: #e5c07b; /* warm yellow distinct from constants */
+	}
+
+	code.syntax .function {
+		color: #61afef;
+	}
+}
diff --git a/public/_components/@socketry/syntax/themes/base/swift.css b/public/_components/@socketry/syntax/themes/base/swift.css
new file mode 100644
index 0000000..0751fd9
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/swift.css
@@ -0,0 +1 @@
+/* Swift specific styles */
diff --git a/public/_components/@socketry/syntax/themes/base/syntax.css b/public/_components/@socketry/syntax/themes/base/syntax.css
new file mode 100644
index 0000000..87431ca
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/syntax.css
@@ -0,0 +1,74 @@
+:host {
+	/* Base color - all other colors derive from this via hue rotation */
+	--syntax-base-hue: 270;
+	--syntax-base-saturation: 60%;
+	--syntax-base-lightness: 50%;
+	--syntax-link-hover-brightness: 1.25;
+}
+
+@media (prefers-color-scheme: dark) {
+	:host {
+		--syntax-base-saturation: 50%;
+		--syntax-base-lightness: 70%;
+	}
+}
+
+:host(:not([wrap])) {
+	overflow-x: auto;
+	white-space: pre;
+}
+
+:host[wrap] {
+	white-space: pre-wrap;
+}
+
+:host([wrap]) code.syntax > span {
+	display: flex;
+}
+
+code.syntax {
+	tab-size: 2;
+}
+
+code.syntax a {
+	color: inherit;
+	text-decoration: none;
+}
+
+code.syntax a:hover,
+code.syntax a:focus-visible {
+	filter: brightness(var(--syntax-link-hover-brightness));
+}
+
+:host([wrap]) code.syntax .indent {
+	flex-grow: 0;
+	flex-shrink: 0;
+	opacity: 0.5;
+}
+
+:host([wrap]) code.syntax .text {
+	white-space: pre-wrap;
+	padding-left: 2ch;
+	text-indent: -2ch;
+}
+
+/* Token type styles - colors derived from base via hue rotation */
+code.syntax .keyword { color: hsl(calc(var(--syntax-base-hue) + 15), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .string { color: hsl(calc(var(--syntax-base-hue) - 45), calc(var(--syntax-base-saturation) - 10%), calc(var(--syntax-base-lightness) - 5%)); }
+code.syntax .comment { color: hsl(var(--syntax-base-hue), calc(var(--syntax-base-saturation) - 45%), var(--syntax-base-lightness)); font-style: italic; }
+code.syntax .number { color: hsl(calc(var(--syntax-base-hue) - 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .operator { color: hsl(calc(var(--syntax-base-hue) + 45), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .function { color: hsl(calc(var(--syntax-base-hue) - 60), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .constant { color: hsl(calc(var(--syntax-base-hue) - 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .type { color: hsl(var(--syntax-base-hue), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .preprocessor { color: hsl(calc(var(--syntax-base-hue) + 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-style: italic; }
+code.syntax .access { color: hsl(calc(var(--syntax-base-hue) + 15), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .escape { color: hsl(calc(var(--syntax-base-hue) + 60), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+
+/* HTML-oriented tokens */
+code.syntax .tag { color: hsl(calc(var(--syntax-base-hue) + 50), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .tag-name { color: hsl(calc(var(--syntax-base-hue) + 50), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .attribute { color: hsl(calc(var(--syntax-base-hue) - 40), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .entity { color: hsl(calc(var(--syntax-base-hue) + 45), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .doctype { color: hsl(calc(var(--syntax-base-hue) + 15), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .cdata { color: hsl(var(--syntax-base-hue), calc(var(--syntax-base-saturation) - 45%), var(--syntax-base-lightness)); }
diff --git a/public/_components/@socketry/syntax/themes/base/xml.css b/public/_components/@socketry/syntax/themes/base/xml.css
new file mode 100644
index 0000000..dcd37db
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/xml.css
@@ -0,0 +1 @@
+/* XML specific styles */
diff --git a/public/_components/@socketry/syntax/themes/base/xrb.css b/public/_components/@socketry/syntax/themes/base/xrb.css
new file mode 100644
index 0000000..b46651d
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/xrb.css
@@ -0,0 +1,29 @@
+/* XRB (XML with embedded Ruby) styles */
+
+/* Light mode */
+/* Delimiters for Ruby processing instruction: <?r ... ?> */
+code.syntax .ruby-pi-open,
+code.syntax .ruby-pi-close {
+   color: #005cc5; /* blue */
+   opacity: 0.9;
+}
+
+/* Delimiters for interpolation: #{ ... } */
+code.syntax .ruby-interp-open,
+code.syntax .ruby-interp-close {
+   color: #22863a; /* green */
+   opacity: 0.95;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .ruby-pi-open,
+	code.syntax .ruby-pi-close {
+	   color: #61afef; /* blue-ish */
+	}
+
+	code.syntax .ruby-interp-open,
+	code.syntax .ruby-interp-close {
+	   color: #98c379; /* green-ish */
+	}
+}
diff --git a/public/_components/@socketry/syntax/themes/base/yaml.css b/public/_components/@socketry/syntax/themes/base/yaml.css
new file mode 100644
index 0000000..d1ce142
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/base/yaml.css
@@ -0,0 +1 @@
+/* Per-language overrides for YAML (empty by default). */
diff --git a/public/_components/@socketry/syntax/themes/theming.md b/public/_components/@socketry/syntax/themes/theming.md
new file mode 100644
index 0000000..169f508
--- /dev/null
+++ b/public/_components/@socketry/syntax/themes/theming.md
@@ -0,0 +1,244 @@
+# Theming Guide
+
+The `@socketry/syntax` library uses CSS custom properties (variables) with HSL colors to provide a flexible and maintainable theming system.
+
+## Key Benefits
+
+1. **Ultra Simple**: Change just 3 variables to create a complete theme
+2. **Automatic Dark Mode**: Light and dark mode handled automatically
+3. **Automatic Color Harmony**: All colors derived from one base color using hue rotation
+4. **Easy Customization**: Override the base or individual colors as needed
+
+## Theme Architecture
+
+### The Base Color System
+
+Everything derives from three base variables:
+
+```css
+:host {
+	--syntax-base-hue: 270;           /* 0-360 degrees on the color wheel */
+	--syntax-base-saturation: 60%;    /* How vibrant the colors are */
+	--syntax-base-lightness: 50%;     /* How light/dark the colors are */
+}
+```
+
+**Dark mode** just adjusts saturation and lightness:
+
+```css
+@media (prefers-color-scheme: dark) {
+	:host {
+		--syntax-base-saturation: 50%;  /* Slightly less saturated */
+		--syntax-base-lightness: 70%;   /* Much lighter for dark backgrounds */
+	}
+}
+```
+
+### Automatic Color Derivation
+
+All token colors are automatically calculated using hue rotation:
+
+```css
+--syntax-keyword: hsl(calc(var(--syntax-base-hue) + 30), ...);   /* 30° rotation */
+--syntax-string: hsl(calc(var(--syntax-base-hue) - 90), ...);    /* 90° opposite */
+--syntax-function: hsl(calc(var(--syntax-base-hue) - 60), ...);  /* 60° rotation */
+/* etc. */
+```
+
+This ensures all colors are harmonious and work together!
+
+## Creating Custom Themes
+
+### Method 1: Change the Base Hue (Recommended)
+
+The simplest approach - just pick a different base color:
+
+```css
+.ocean-theme {
+	--syntax-base-hue: 200;  /* Blue - everything becomes ocean-themed! */
+}
+
+.sunset-theme {
+	--syntax-base-hue: 30;   /* Orange - warm sunset colors */
+}
+
+.forest-theme {
+	--syntax-base-hue: 140;  /* Green - natural forest palette */
+}
+```
+
+Then apply it:
+
+```html
+<syntax-code language="javascript" class="ocean-theme">
+	// Your code here
+</syntax-code>
+```
+
+### Method 2: Adjust Saturation and Lightness
+
+For more subtle themes:
+
+```css
+.pastel-theme {
+	--syntax-base-saturation: 40%;  /* Less vibrant */
+	--syntax-base-lightness: 65%;   /* Lighter */
+}
+
+.vivid-theme {
+	--syntax-base-saturation: 90%;  /* Very saturated */
+	--syntax-base-lightness: 45%;   /* Slightly darker */
+}
+```
+
+### Method 3: Override Specific Colors
+
+For fine-grained control:
+
+```css
+.custom-theme {
+	--syntax-base-hue: 280;  /* Purple base */
+	
+	/* But make strings green instead of the derived color */
+	--syntax-string: hsl(120, 60%, 40%);
+}
+```
+
+### Method 4: Custom Dark Mode
+
+Override dark mode values for specific themes:
+
+```css
+.my-theme {
+	--syntax-base-hue: 200;
+}
+
+@media (prefers-color-scheme: dark) {
+	.my-theme {
+		/* Different hue in dark mode */
+		--syntax-base-hue: 180;
+		--syntax-base-saturation: 45%;
+		--syntax-base-lightness: 75%;
+	}
+}
+```
+
+### Link Interaction
+
+Links preserve the surrounding syntax colors and become brighter when hovered
+or focused. You can adjust the brightness multiplier from the host page:
+
+```css
+syntax-code {
+	--syntax-link-hover-brightness: 1.4;
+}
+```
+
+## Token Types
+
+All token types automatically get colors derived from the base. You can override individual ones if needed:
+
+### Programming Language Tokens
+
+- `keyword` - Language keywords (if, function, class)
+- `string` - String literals
+- `comment` - Code comments
+- `number` - Numeric literals
+- `operator` - Operators (+, -, *, etc.)
+- `function` - Function names
+- `constant` - Constants and literals
+- `type` - Type names
+- `preprocessor` - Preprocessor directives
+- `access` - Access modifiers (public, private)
+- `escape` - Escape sequences
+
+### HTML/XML Tokens
+
+- `tag` - HTML/XML tags
+- `tag-name` - Tag names
+- `attribute` - Attributes
+- `entity` - HTML entities
+- `doctype` - DOCTYPE declarations
+- `cdata` - CDATA sections
+
+### Semantic Markdown Tokens
+
+- `heading` - Headers (# Heading)
+- `strong` - Bold text (**bold**)
+- `emphasis` - Italic text (*italic*)
+- `code` - Code blocks and inline code
+- `link` - Links and images
+- `quote` - Blockquotes
+- `list-marker` - List markers
+
+## Dark Mode
+
+Dark mode colors are automatically applied using `prefers-color-scheme`:
+
+```css
+@media (prefers-color-scheme: dark) {
+	:host {
+		--syntax-keyword: hsl(var(--syntax-hue-primary), 50%, 70%);
+		/* Automatically lighter and less saturated for dark backgrounds */
+	}
+}
+```
+
+You can override dark mode colors in your custom theme:
+
+```css
+.my-theme {
+	--syntax-keyword: hsl(300, 80%, 40%);
+}
+
+@media (prefers-color-scheme: dark) {
+	.my-theme {
+		--syntax-keyword: hsl(300, 60%, 75%);
+	}
+}
+```
+
+## Example Themes
+
+### Monochrome
+
+```css
+.monochrome {
+	--syntax-keyword: hsl(0, 0%, 20%);
+	--syntax-string: hsl(0, 0%, 30%);
+	--syntax-comment: hsl(0, 0%, 60%);
+	--syntax-function: hsl(0, 0%, 25%);
+}
+```
+
+### High Contrast
+
+```css
+.high-contrast {
+	--syntax-hue-primary: 270;
+	/* Increase saturation and contrast */
+	--syntax-keyword: hsl(var(--syntax-hue-primary), 100%, 30%);
+	--syntax-string: hsl(0, 100%, 35%);
+	--syntax-comment: hsl(0, 0%, 40%);
+}
+```
+
+### Pastel
+
+```css
+.pastel {
+	/* Use same hues but with high lightness and low saturation */
+	--syntax-keyword: hsl(var(--syntax-hue-primary), 40%, 60%);
+	--syntax-string: hsl(var(--syntax-hue-tertiary), 40%, 60%);
+	--syntax-comment: hsl(var(--syntax-hue-neutral), 20%, 70%);
+}
+```
+
+## Tips
+
+1. **Hue Relationships**: Use complementary (180° apart) or analogous (30° apart) hues for harmony
+2. **Saturation**: Lower saturation (20-40%) for subtle themes, higher (70-90%) for vibrant themes
+3. **Lightness**: Keep 30-50% for light mode, 60-80% for dark mode
+4. **Contrast**: Ensure sufficient contrast between text and background (WCAG AA: 4.5:1 minimum)
+5. **Testing**: Test themes in both light and dark mode
+6. **Consistency**: Use the hue variables to maintain color relationships across tokens
diff --git a/public/_static/application.js b/public/_static/application.js
new file mode 100644
index 0000000..bafb650
--- /dev/null
+++ b/public/_static/application.js
@@ -0,0 +1,6 @@
+// Released under the MIT License.
+// Copyright, 2025, by Samuel Williams.
+
+import Syntax from "../_components/@socketry/syntax/Syntax.js";
+
+await Syntax.highlight();
diff --git a/public/_static/luna.css b/public/_static/luna.css
new file mode 100644
index 0000000..45fbae4
--- /dev/null
+++ b/public/_static/luna.css
@@ -0,0 +1,39 @@
+/* Released under the MIT License. */
+/* Copyright, 2025, by Samuel Williams. */
+
+body {
+	max-width: 48em;
+	margin: 2em auto;
+	padding: 0 1em;
+	line-height: 1.5;
+	font-family: system-ui, sans-serif;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+th, td {
+	border: 1px solid #ccc;
+	padding: 0.25em 0.75em;
+}
+
+th {
+	background: #f5f5f5;
+}
+
+pre {
+	background: #f5f5f5;
+	padding: 1em;
+	overflow-x: auto;
+}
+
+code {
+	background: #f5f5f5;
+	padding: 0.1em 0.3em;
+}
+
+pre code {
+	background: none;
+	padding: 0;
+}
diff --git a/test/integration/server_integration.rb b/test/integration/server_integration.rb
index 935c07e..3151b5a 100644
--- a/test/integration/server_integration.rb
+++ b/test/integration/server_integration.rb
@@ -59,6 +59,50 @@
 	expect(response.read).to be(:include?, "file.txt")
 end
 
+it "serves Luna's own stylesheet" do
+	response = client.get("/_static/luna.css")
+	expect(response.status).to be == 200
+	expect(response.headers["content-type"]).to be(:include?, "text/css")
+	expect(response.read).to be(:include?, "border-collapse")
+end
+
+it "prefers files in the root over Luna's own assets" do
+	FileUtils.mkdir_p(File.join(www_root, "_static"))
+	File.write(File.join(www_root, "_static", "luna.css"), "/* mine */")
+	response = client.get("/_static/luna.css")
+	expect(response.read).to be(:include?, "/* mine */")
+end
+
+it "renders markdown as a complete document" do
+	File.write(File.join(www_root, "README.md"), "# Hello")
+	response = client.get("/README.md")
+	body = response.read
+	expect(body).to be(:start_with?, "<!doctype html>")
+	expect(body).to be(:include?, "/_static/luna.css")
+	expect(body).to be(:include?, "/_static/application.js")
+end
+
+it "renders the directory listing as a complete document" do
+	FileUtils.mkdir_p(File.join(www_root, "list"))
+	response = client.get("/list/")
+	body = response.read
+	expect(body).to be(:start_with?, "<!doctype html>")
+	expect(body).to be(:include?, "/_static/luna.css")
+end
+
+with "syntax highlighting disabled" do
+	let(:app) do
+		FileUtils.mkdir_p(www_root)
+		Luna::Server.middleware(root: www_root, markdown: true, syntax_highlighting: false)
+	end
+	
+	it "does not link the highlighter" do
+		File.write(File.join(www_root, "README.md"), "# Hello")
+		response = client.get("/README.md")
+		expect(response.read).not.to be(:include?, "application.js")
+	end
+end
+
 it "handles HEAD requests without body" do
 	File.write(File.join(www_root, "file.json"), '{"a":1}')
 	response = client.head("/file.json")
diff --git a/test/luna/document.rb b/test/luna/document.rb
new file mode 100644
index 0000000..00052ed
--- /dev/null
+++ b/test/luna/document.rb
@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2025, by Samuel Williams.
+
+require_relative "../../lib/luna/document"
+
+describe Luna::Document do
+	let(:document) {Luna::Document.new}
+	
+	it "renders a complete document" do
+		html = document.call("readme.md", "<h1>Hello</h1>")
+		expect(html).to be(:start_with?, "<!doctype html>")
+		expect(html).to be(:include?, "<meta charset=\"utf-8\">")
+		expect(html).to be(:include?, "<title>readme.md</title>")
+		expect(html).to be(:include?, "<h1>Hello</h1>")
+	end
+	
+	it "links the stylesheet" do
+		html = document.call("readme.md", "")
+		expect(html).to be(:include?, "<link rel=\"stylesheet\" href=\"/_static/luna.css\">")
+	end
+	
+	it "escapes the title" do
+		html = document.call("<script>", "")
+		expect(html).to be(:include?, "<title>&lt;script&gt;</title>")
+	end
+	
+	with "scripts" do
+		let(:document) {Luna::Document.new(scripts: ["/_static/application.js"])}
+		
+		it "includes a module script" do
+			html = document.call("readme.md", "")
+			expect(html).to be(:include?, "<script type=\"module\" src=\"/_static/application.js\"></script>")
+		end
+	end
+	
+	with "no stylesheet" do
+		let(:document) {Luna::Document.new(stylesheet: nil)}
+		
+		it "omits the link" do
+			expect(document.call("readme.md", "")).not.to be(:include?, "<link")
+		end
+	end
+end

From d2012977a310d7e7d1f2bfba904acda800d80d74 Mon Sep 17 00:00:00 2001
From: Sampo Kuokkanen <sampo.kuokkanen@gmail.com>
Date: Thu, 20 Aug 2026 19:10:44 +0900
Subject: [PATCH 3/3] Manage bundled components with `bake
 utopia:components:update`.

The bundled copy of `@socketry/syntax` was installed by hand, with no
record of which version it came from. Declare it in `package.json` and
install it using the same task as `utopia-project`, so that upgrading is
`npm update && bake utopia:components:update`.

The task reproduces the committed files exactly.
---
 .gitignore        |  2 ++
 gems.rb           |  1 +
 package-lock.json | 18 ++++++++++++++++++
 package.json      |  5 +++++
 4 files changed, 26 insertions(+)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
index ee82a6f..7e9e61a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@
 /gems.locked
 /.covered.db
 /external
+
+/node_modules
diff --git a/gems.rb b/gems.rb
index 8497a4e..77a2785 100644
--- a/gems.rb
+++ b/gems.rb
@@ -14,6 +14,7 @@
 	
 	gem "agent-context"
 	
+	gem "utopia"
 	gem "utopia-project"
 	
 	gem "decode"
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4e93934
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,18 @@
+{
+  "name": "luna",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@socketry/syntax": "^0.6.1"
+      }
+    },
+    "node_modules/@socketry/syntax": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@socketry/syntax/-/syntax-0.6.1.tgz",
+      "integrity": "sha512-PFhYoPxKxB9YJorfcOx92++tKpiET8KpuxHbo9VbcAj9bINeVYCkAsMNgbswnxf9whLNZsAj5FCqt0I8oGAe2g==",
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7f9a9f3
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@socketry/syntax": "^0.6.1"
+  }
+}