@opencosmos/ui 1.3.1

package/src/lib/syntax-parser/tokenizer.ts

@@ -0,0 +1,117 @@
+/**
+ * Syntax Tokenizer
+ * Core tokenization logic for parsing code into syntax tokens
+ */
+
+import { SyntaxToken, Language } from './types';
+import { TOKEN_PATTERNS } from './patterns';
+
+interface Match {
+  text: string;
+  type: SyntaxToken['type'];
+  index: number;
+}
+
+/**
+ * Tokenizes source code into an array of syntax tokens
+ *
+ * @param code - The source code to tokenize
+ * @param language - The programming language (currently only affects metadata, all use same patterns)
+ * @returns Array of syntax tokens with text and type information
+ *
+ * @example
+ * ```ts
+ * const tokens = tokenize('const greeting = "Hello";');
+ * // Returns:
+ * // [
+ * //   { text: 'const', type: 'keyword' },
+ * //   { text: ' ', type: 'plain' },
+ * //   { text: 'greeting', type: 'plain' },
+ * //   { text: ' ', type: 'plain' },
+ * //   { text: '=', type: 'operator' },
+ * //   { text: ' ', type: 'plain' },
+ * //   { text: '"Hello"', type: 'string' },
+ * //   { text: ';', type: 'punctuation' },
+ * // ]
+ * ```
+ */
+export function tokenize(code: string, language: Language = 'typescript'): SyntaxToken[] {
+  // If empty, return plain token
+  if (!code || code.trim() === '') {
+    return [{ text: code, type: 'plain' }];
+  }
+
+  // Collect all matches from all patterns
+  const matches: Match[] = [];
+
+  for (const { type, pattern } of TOKEN_PATTERNS) {
+    // Reset regex lastIndex
+    pattern.lastIndex = 0;
+
+    let match;
+    while ((match = pattern.exec(code)) !== null) {
+      matches.push({
+        text: match[0],
+        type,
+        index: match.index,
+      });
+    }
+  }
+
+  // Sort matches by position
+  matches.sort((a, b) => a.index - b.index);
+
+  // Remove overlapping matches (keep first match at each position)
+  const nonOverlapping: Match[] = [];
+  let lastEnd = 0;
+
+  for (const match of matches) {
+    if (match.index >= lastEnd) {
+      nonOverlapping.push(match);
+      lastEnd = match.index + match.text.length;
+    }
+  }
+
+  // Build tokens array, filling gaps with plain text
+  const tokens: SyntaxToken[] = [];
+  let position = 0;
+
+  for (const match of nonOverlapping) {
+    // Add plain text before this match
+    if (match.index > position) {
+      const plainText = code.slice(position, match.index);
+      tokens.push({ text: plainText, type: 'plain' });
+    }
+
+    // Add the matched token
+    tokens.push({ text: match.text, type: match.type });
+    position = match.index + match.text.length;
+  }
+
+  // Add any remaining plain text
+  if (position < code.length) {
+    tokens.push({ text: code.slice(position), type: 'plain' });
+  }
+
+  return tokens;
+}
+
+/**
+ * Detects the language from code content or file extension
+ * Currently returns 'typescript' for all cases as patterns support TS/JS/JSX/TSX
+ *
+ * @param code - The source code
+ * @param filename - Optional filename for extension detection
+ * @returns Detected language
+ */
+export function detectLanguage(code: string, filename?: string): Language {
+  // For now, treat everything as TypeScript since our patterns support all variants
+  // Future: Could detect based on JSX syntax or file extension
+  if (filename) {
+    if (filename.endsWith('.tsx')) return 'tsx';
+    if (filename.endsWith('.jsx')) return 'jsx';
+    if (filename.endsWith('.js')) return 'javascript';
+  }
+
+  return 'typescript';
+}

package/src/lib/syntax-parser/types.ts

@@ -0,0 +1,27 @@
+/**
+ * Syntax Parser Types
+ * Type definitions for the syntax parsing system
+ */
+
+export type SyntaxType =
+  | 'comment'
+  | 'keyword'
+  | 'function'
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'operator'
+  | 'property'
+  | 'className'
+  | 'tag'
+  | 'attribute'
+  | 'variable'
+  | 'punctuation'
+  | 'plain';
+
+export interface SyntaxToken {
+  text: string;
+  type: SyntaxType;
+}
+
+export type Language = 'typescript' | 'javascript' | 'tsx' | 'jsx';

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/src/lib/validation.ts

@@ -0,0 +1,204 @@
+/**
+ * Form Validation Utilities
+ *
+ * Simple validation helpers for form fields.
+ * Works seamlessly with FormField and other form components.
+ */
+
+export type ValidationRule = {
+  validate: (value: any) => boolean;
+  message: string;
+};
+
+export type FieldValidation = {
+  required?: boolean | string;
+  minLength?: { value: number; message: string };
+  maxLength?: { value: number; message: string };
+  pattern?: { value: RegExp; message: string };
+  custom?: ValidationRule[];
+};
+
+export type FormErrors = Record<string, string | undefined>;
+
+/**
+ * Common validation patterns
+ */
+export const patterns = {
+  email: {
+    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+    message: 'Invalid email address',
+  },
+  url: {
+    value: /^https?:\/\/.+\..+/,
+    message: 'Invalid URL',
+  },
+  phone: {
+    value: /^[\d\s\-\+\(\)]+$/,
+    message: 'Invalid phone number',
+  },
+  alphanumeric: {
+    value: /^[a-zA-Z0-9]+$/,
+    message: 'Only letters and numbers allowed',
+  },
+  noSpaces: {
+    value: /^\S+$/,
+    message: 'Spaces are not allowed',
+  },
+};
+
+/**
+ * Validate a single field value against validation rules
+ *
+ * @param value - The field value to validate
+ * @param rules - Validation rules to apply
+ * @returns Error message if validation fails, undefined if valid
+ *
+ * @example
+ * ```tsx
+ * const error = validateField(email, {
+ *   required: true,
+ *   pattern: patterns.email
+ * });
+ * ```
+ */
+export function validateField(
+  value: any,
+  rules: FieldValidation
+): string | undefined {
+  // Required check
+  if (rules.required) {
+    const isEmpty =
+      value === undefined ||
+      value === null ||
+      value === '' ||
+      (Array.isArray(value) && value.length === 0);
+
+    if (isEmpty) {
+      return typeof rules.required === 'string'
+        ? rules.required
+        : 'This field is required';
+    }
+  }
+
+  // Skip other validations if value is empty and not required
+  if (!value && !rules.required) {
+    return undefined;
+  }
+
+  // Min length check
+  if (rules.minLength && value.length < rules.minLength.value) {
+    return rules.minLength.message;
+  }
+
+  // Max length check
+  if (rules.maxLength && value.length > rules.maxLength.value) {
+    return rules.maxLength.message;
+  }
+
+  // Pattern check
+  if (rules.pattern && !rules.pattern.value.test(value)) {
+    return rules.pattern.message;
+  }
+
+  // Custom validations
+  if (rules.custom) {
+    for (const rule of rules.custom) {
+      if (!rule.validate(value)) {
+        return rule.message;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Validate all fields in a form
+ *
+ * @param values - Object containing all form field values
+ * @param validations - Object containing validation rules for each field
+ * @returns Object containing errors for each field
+ *
+ * @example
+ * ```tsx
+ * const errors = validateForm(
+ *   { email: 'test', password: '123' },
+ *   {
+ *     email: { required: true, pattern: patterns.email },
+ *     password: { required: true, minLength: { value: 8, message: 'Min 8 chars' } }
+ *   }
+ * );
+ * // errors = { email: 'Invalid email address', password: 'Min 8 chars' }
+ * ```
+ */
+export function validateForm(
+  values: Record<string, any>,
+  validations: Record<string, FieldValidation>
+): FormErrors {
+  const errors: FormErrors = {};
+
+  for (const [field, rules] of Object.entries(validations)) {
+    const error = validateField(values[field], rules);
+    if (error) {
+      errors[field] = error;
+    }
+  }
+
+  return errors;
+}
+
+/**
+ * Check if form has any errors
+ *
+ * @param errors - Form errors object
+ * @returns true if there are any errors
+ *
+ * @example
+ * ```tsx
+ * if (hasErrors(errors)) {
+ *   console.log('Form has errors');
+ * }
+ * ```
+ */
+export function hasErrors(errors: FormErrors): boolean {
+  return Object.values(errors).some((error) => error !== undefined);
+}
+
+/**
+ * Common validation rule builders
+ */
+export const rules = {
+  required: (message = 'This field is required'): FieldValidation => ({
+    required: message,
+  }),
+
+  email: (message = 'Invalid email address'): FieldValidation => ({
+    pattern: { value: patterns.email.value, message },
+  }),
+
+  minLength: (length: number, message?: string): FieldValidation => ({
+    minLength: {
+      value: length,
+      message: message || `Minimum ${length} characters required`,
+    },
+  }),
+
+  maxLength: (length: number, message?: string): FieldValidation => ({
+    maxLength: {
+      value: length,
+      message: message || `Maximum ${length} characters allowed`,
+    },
+  }),
+
+  match: (
+    otherValue: any,
+    message = 'Values do not match'
+  ): FieldValidation => ({
+    custom: [
+      {
+        validate: (value) => value === otherValue,
+        message,
+      },
+    ],
+  }),
+};

package/src/lib/webgl/Color.ts

@@ -0,0 +1,11 @@
+/**
+ * Minimal Color implementation for WebGL shader uniforms.
+ * Replaces OGL's Color — stores three floats (r, g, b).
+ */
+export class Color {
+  data: Float32Array;
+
+  constructor(r = 0, g = 0, b = 0) {
+    this.data = new Float32Array([r, g, b]);
+  }
+}

package/src/lib/webgl/Mesh.ts

@@ -0,0 +1,41 @@
+/**
+ * Minimal Mesh that binds geometry attributes and draws.
+ * Replaces OGL's Mesh — combines a Triangle geometry with a Program.
+ */
+import type { Triangle } from './Triangle';
+import type { Program } from './Program';
+
+export class Mesh {
+  gl: WebGLRenderingContext;
+  geometry: Triangle;
+  program: Program;
+
+  constructor(gl: WebGLRenderingContext, { geometry, program }: { geometry: Triangle; program: Program }) {
+    this.gl = gl;
+    this.geometry = geometry;
+    this.program = program;
+  }
+
+  draw(): void {
+    const { gl, geometry, program } = this;
+
+    program.use();
+    program.uploadUniforms();
+
+    const posLoc = program.getAttribLocation('position');
+    if (posLoc >= 0) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, geometry.positionBuffer);
+      gl.enableVertexAttribArray(posLoc);
+      gl.vertexAttribPointer(posLoc, geometry.positionSize, gl.FLOAT, false, 0, 0);
+    }
+
+    const uvLoc = program.getAttribLocation('uv');
+    if (uvLoc >= 0) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, geometry.uvBuffer);
+      gl.enableVertexAttribArray(uvLoc);
+      gl.vertexAttribPointer(uvLoc, geometry.uvSize, gl.FLOAT, false, 0, 0);
+    }
+
+    gl.drawArrays(gl.TRIANGLES, 0, geometry.count);
+  }
+}

package/src/lib/webgl/Program.ts

@@ -0,0 +1,118 @@
+/**
+ * Minimal shader Program for compiling GLSL and managing uniforms.
+ * Replaces OGL's Program — handles compilation, linking, and uniform uploads.
+ *
+ * Supported uniform value types:
+ *   number        → gl.uniform1f
+ *   boolean       → gl.uniform1i (0 or 1, for GLSL bool)
+ *   Float32Array  → gl.uniform{2,3,4}fv (by length)
+ *   Vec3 / Color  → gl.uniform3fv (they extend Float32Array)
+ */
+
+interface UniformDef {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+}
+
+interface ProgramOptions {
+  vertex: string;
+  fragment: string;
+  uniforms?: Record<string, UniformDef>;
+}
+
+function compile(gl: WebGLRenderingContext, type: number, source: string): WebGLShader {
+  const shader = gl.createShader(type)!;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Shader compile error: ${info}`);
+  }
+  return shader;
+}
+
+export class Program {
+  gl: WebGLRenderingContext;
+  program: WebGLProgram;
+  uniforms: Record<string, UniformDef>;
+  private uniformLocations: Map<string, WebGLUniformLocation>;
+  private attributeLocations: Map<string, number>;
+
+  constructor(gl: WebGLRenderingContext, { vertex, fragment, uniforms = {} }: ProgramOptions) {
+    this.gl = gl;
+    this.uniforms = uniforms;
+
+    const vs = compile(gl, gl.VERTEX_SHADER, vertex);
+    const fs = compile(gl, gl.FRAGMENT_SHADER, fragment);
+
+    this.program = gl.createProgram()!;
+    gl.attachShader(this.program, vs);
+    gl.attachShader(this.program, fs);
+    gl.linkProgram(this.program);
+
+    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+      const info = gl.getProgramInfoLog(this.program);
+      throw new Error(`Program link error: ${info}`);
+    }
+
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+
+    // Cache uniform locations (only for uniforms the shader actually uses)
+    this.uniformLocations = new Map();
+    for (const name in uniforms) {
+      const loc = gl.getUniformLocation(this.program, name);
+      if (loc !== null) {
+        this.uniformLocations.set(name, loc);
+      }
+    }
+
+    // Cache attribute locations
+    this.attributeLocations = new Map();
+    const numAttribs = gl.getProgramParameter(this.program, gl.ACTIVE_ATTRIBUTES);
+    for (let i = 0; i < numAttribs; i++) {
+      const attrib = gl.getActiveAttrib(this.program, i);
+      if (attrib) {
+        this.attributeLocations.set(attrib.name, gl.getAttribLocation(this.program, attrib.name));
+      }
+    }
+  }
+
+  use(): void {
+    this.gl.useProgram(this.program);
+  }
+
+  getAttribLocation(name: string): number {
+    return this.attributeLocations.get(name) ?? -1;
+  }
+
+  uploadUniforms(): void {
+    const gl = this.gl;
+    for (const [name, loc] of this.uniformLocations) {
+      const value = this.uniforms[name]?.value;
+      if (value === undefined || value === null) continue;
+
+      if (typeof value === 'boolean') {
+        gl.uniform1i(loc, value ? 1 : 0);
+      } else if (typeof value === 'number') {
+        gl.uniform1f(loc, value);
+      } else if (value instanceof Float32Array) {
+        switch (value.length) {
+          case 1: gl.uniform1fv(loc, value); break;
+          case 2: gl.uniform2fv(loc, value); break;
+          case 3: gl.uniform3fv(loc, value); break;
+          case 4: gl.uniform4fv(loc, value); break;
+        }
+      } else if (value && value.data instanceof Float32Array) {
+        // Vec3, Color — classes that wrap a Float32Array in .data
+        const arr = value.data as Float32Array;
+        switch (arr.length) {
+          case 2: gl.uniform2fv(loc, arr); break;
+          case 3: gl.uniform3fv(loc, arr); break;
+          case 4: gl.uniform4fv(loc, arr); break;
+        }
+      }
+    }
+  }
+}

package/src/lib/webgl/Renderer.ts

@@ -0,0 +1,51 @@
+/**
+ * Minimal WebGL Renderer that creates a canvas and context.
+ * Replaces OGL's Renderer — provides context creation, resize, and render dispatch.
+ */
+import type { Mesh } from './Mesh';
+
+interface RendererOptions {
+  alpha?: boolean;
+  premultipliedAlpha?: boolean;
+  dpr?: number;
+}
+
+/** WebGLRenderingContext with canvas narrowed to HTMLCanvasElement. */
+export type GL = WebGLRenderingContext & { readonly canvas: HTMLCanvasElement };
+
+export class Renderer {
+  gl: GL;
+  private dpr: number;
+
+  constructor({ alpha = false, premultipliedAlpha = true, dpr = 1 }: RendererOptions = {}) {
+    const canvas = document.createElement('canvas');
+    this.dpr = dpr;
+
+    const attrs: WebGLContextAttributes = {
+      alpha,
+      premultipliedAlpha,
+      antialias: false,
+      preserveDrawingBuffer: false,
+    };
+
+    const gl =
+      (canvas.getContext('webgl2', attrs) as GL | null) ??
+      (canvas.getContext('webgl', attrs) as GL | null);
+
+    if (!gl) throw new Error('WebGL not supported');
+    this.gl = gl;
+  }
+
+  setSize(width: number, height: number): void {
+    const canvas = this.gl.canvas;
+    canvas.width = width * this.dpr;
+    canvas.height = height * this.dpr;
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    this.gl.viewport(0, 0, canvas.width, canvas.height);
+  }
+
+  render({ scene }: { scene: Mesh }): void {
+    scene.draw();
+  }
+}

package/src/lib/webgl/Triangle.ts

@@ -0,0 +1,27 @@
+/**
+ * Full-screen triangle geometry for fragment-shader-only rendering.
+ * Replaces OGL's Triangle — a single oversized triangle that clips to the viewport.
+ */
+export class Triangle {
+  gl: WebGLRenderingContext;
+  positionBuffer: WebGLBuffer;
+  uvBuffer: WebGLBuffer;
+  positionSize = 2;
+  uvSize = 2;
+  count = 3;
+
+  constructor(gl: WebGLRenderingContext) {
+    this.gl = gl;
+
+    // Oversized triangle covering the full viewport when clipped
+    const positions = new Float32Array([-1, -1, 3, -1, -1, 3]);
+    this.positionBuffer = gl.createBuffer()!;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+
+    const uvs = new Float32Array([0, 0, 2, 0, 0, 2]);
+    this.uvBuffer = gl.createBuffer()!;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);
+  }
+}

package/src/lib/webgl/Vec3.ts

@@ -0,0 +1,18 @@
+/**
+ * Minimal Vec3 implementation for WebGL shader uniforms.
+ * Replaces OGL's Vec3 — only the constructor and .set() are needed.
+ */
+export class Vec3 {
+  data: Float32Array;
+
+  constructor(x = 0, y = 0, z = 0) {
+    this.data = new Float32Array([x, y, z]);
+  }
+
+  set(x: number, y: number, z: number): this {
+    this.data[0] = x;
+    this.data[1] = y;
+    this.data[2] = z;
+    return this;
+  }
+}

package/src/lib/webgl/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Minimal WebGL utilities — drop-in replacement for the OGL subset used
+ * by the background shader components (OrbBackground, FaultyTerminal, WarpBackground).
+ *
+ * Only the classes actually consumed are implemented:
+ *   Renderer, Program, Mesh, Triangle, Vec3, Color
+ */
+export { Renderer, type GL } from './Renderer';
+export { Program } from './Program';
+export { Mesh } from './Mesh';
+export { Triangle } from './Triangle';
+export { Vec3 } from './Vec3';
+export { Color } from './Color';

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />