utopia-project 0.37.6 → 0.38.0

data/public/_components/@socketry/syntax/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@socketry/syntax",
+	"version": "0.3.3",
+	"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": "prettier --write '**/*.{js,json,md}'",
+		"format:check": "prettier --check '**/*.{js,json,md}'"
+	},
+	"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": {
+		"jsdom": "^25.0.0",
+		"prettier": "^3.6.2"
+	}
+}

data/public/_components/@socketry/syntax/readme.md

@@ -0,0 +1,162 @@
+# @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.
+
+## 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>
+```
+
+## 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

data/public/_components/@socketry/syntax/themes/base/apache.css

@@ -0,0 +1 @@
+/* Per-language overrides for Apache (empty by default). */

data/public/_components/@socketry/syntax/themes/base/applescript.css

@@ -0,0 +1 @@
+/* Per-language overrides for AppleScript (empty by default). */

data/public/_components/@socketry/syntax/themes/base/assembly.css

@@ -0,0 +1 @@
+/* Per-language overrides for Assembly (empty by default). */

data/public/_components/@socketry/syntax/themes/base/bash.css

@@ -0,0 +1 @@
+/* Per-language overrides for Bash (empty by default). */

data/public/_components/@socketry/syntax/themes/base/basic.css

@@ -0,0 +1 @@
+/* Per-language overrides for BASIC (empty by default). */

data/public/_components/@socketry/syntax/themes/base/c.css

@@ -0,0 +1 @@
+/* Per-language overrides for C (empty by default). */

data/public/_components/@socketry/syntax/themes/base/csharp.css

@@ -0,0 +1 @@
+/* Per-language overrides for C# (empty by default). */

data/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;
+	}
+}

data/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;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/go.css

@@ -0,0 +1 @@
+/* Per-language overrides for Go (empty by default). */

data/public/_components/@socketry/syntax/themes/base/haskell.css

@@ -0,0 +1 @@
+/* Per-language overrides for Haskell (empty by default). */

data/public/_components/@socketry/syntax/themes/base/html.css

@@ -0,0 +1 @@
+/* Per-language overrides for HTML (empty by default). */

data/public/_components/@socketry/syntax/themes/base/io.css

@@ -0,0 +1 @@
+/* Io Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/java.css

@@ -0,0 +1 @@
+/* Java Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/javascript.css

@@ -0,0 +1 @@
+/* Per-language overrides for JavaScript (empty by default). */

data/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;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/lisp.css

@@ -0,0 +1 @@
+/* Lisp Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/lua.css

@@ -0,0 +1 @@
+/* Lua Syntax Theme */

data/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)); }
+

data/public/_components/@socketry/syntax/themes/base/nginx.css

@@ -0,0 +1 @@
+/* Nginx Configuration Theme */

data/public/_components/@socketry/syntax/themes/base/ocaml.css

@@ -0,0 +1 @@
+/* OCaml/F# Theme */

data/public/_components/@socketry/syntax/themes/base/pascal.css

@@ -0,0 +1 @@
+/* Pascal/Delphi Theme */

data/public/_components/@socketry/syntax/themes/base/perl5.css

@@ -0,0 +1 @@
+/* Perl 5 Syntax Highlighting */

data/public/_components/@socketry/syntax/themes/base/php-script.css

@@ -0,0 +1 @@
+/* PHP-script Syntax Highlighting Theme */

data/public/_components/@socketry/syntax/themes/base/php.css

@@ -0,0 +1 @@
+/* PHP Syntax Highlighting Theme */

data/public/_components/@socketry/syntax/themes/base/plain.css

@@ -0,0 +1 @@
+/* Plain Text Syntax Highlighting */

data/public/_components/@socketry/syntax/themes/base/protobuf.css

@@ -0,0 +1 @@
+/* Protocol Buffers Syntax Highlighting */

data/public/_components/@socketry/syntax/themes/base/python.css

@@ -0,0 +1 @@
+/* Per-language overrides for Python (empty by default). */

data/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;
+	}
+}

data/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. */

data/public/_components/@socketry/syntax/themes/base/smalltalk.css

@@ -0,0 +1 @@
+/* Smalltalk Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/sql.css

@@ -0,0 +1 @@
+/* SQL Syntax Theme */

data/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;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/swift.css

@@ -0,0 +1 @@
+/* Swift specific styles */

data/public/_components/@socketry/syntax/themes/base/syntax.css

@@ -0,0 +1,63 @@
+:host {
+	/* Base color - all other colors derive from this via hue rotation */
+	--syntax-base-hue: 270;
+	--syntax-base-saturation: 60%;
+	--syntax-base-lightness: 50%;
+}
+
+@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;
+}
+
+: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)); }

data/public/_components/@socketry/syntax/themes/base/xml.css

@@ -0,0 +1 @@
+/* XML specific styles */

data/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 */
+	}
+}

data/public/_components/@socketry/syntax/themes/base/yaml.css

@@ -0,0 +1 @@
+/* Per-language overrides for YAML (empty by default). */