presently 0.1.0

data/public/_components/@socketry/syntax/Syntax/CodeElement.js

@@ -0,0 +1,337 @@
+import Syntax from '../Syntax.js';
+
+const supportsAdopted =
+	typeof CSSStyleSheet !== 'undefined' &&
+	'adoptedStyleSheets' in Document.prototype;
+
+/**
+ * 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;
+	#adoptedHrefs = new Set();
+	#highlighted = false;
+	#readyResolve = null;
+
+	constructor() {
+		super();
+		
+		/**
+		 * A promise that resolves when the element has been fully rendered.
+		 * Use this to ensure line measurement APIs return valid results.
+		 * @type {Promise<void>}
+		 */
+		this.ready = new Promise(resolve => {
+			this.#readyResolve = 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.#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;
+	}
+	
+	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.#render();
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) {
+			return;
+		}
+
+		if (
+			(name === 'language' || name === 'theme' || name === 'wrap') &&
+			this.isConnected &&
+			this.#shadow
+		) {
+			// Reset highlighted flag and ready promise to allow re-rendering
+			this.#highlighted = false;
+			this.ready = new Promise(resolve => {
+				this.#readyResolve = resolve;
+			});
+			this.#adoptedHrefs.clear();
+			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 code content to highlight
+	 */
+	#getCodeContent() {
+		// Check if there's a <code> child element
+		const codeElement = this.querySelector('code');
+		if (codeElement) {
+			return codeElement.textContent;
+		}
+
+		return this.textContent;
+	}
+
+	/**
+	 * 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;
+
+			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);
+
+			const code = this.#getCodeContent();
+
+			// Clear shadow DOM before rendering (must happen before appendChild to remove old content, but after loadStylesheets since fallback path may have appended <style> elements):
+			this.#shadow.innerHTML = '';
+
+			// Highlight and append - language.process() returns a <code> element:
+			const highlighted = await language.process(this.syntax, code);
+			this.#shadow.appendChild(highlighted);
+
+			// Clear light DOM only after successful render to avoid losing content on errors:
+			this.textContent = '';
+
+			this.#highlighted = true;
+			this.#readyResolve?.();
+		} 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);
+		}
+
+		// Copy the code content into the wrapper
+		wrapper.textContent = element.textContent;
+
+		// Replace <code> with <syntax-code>, leaving <pre> parent in place
+		const parent = element.parentElement;
+		parent.replaceChild(wrapper, element);
+	}
+}
+
+export {Syntax};
+export default CodeElement;

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

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

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

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