@origostudio/origo-design 0.0.0

package/packages/design-tokens/src/index.ts

@@ -0,0 +1,7 @@
+import baseTokensSchema from './schemas/base-tokens.schema.json';
+import semanticTokensSchema from './schemas/semantic-tokens.schema.json';
+import baseTokens from './tokens/base.json';
+import semanticTokens from './tokens/semantic.json';
+
+export * from './build';
+export { baseTokensSchema, semanticTokensSchema, baseTokens, semanticTokens };

package/packages/design-tokens/src/runtime/index.ts

@@ -0,0 +1,2 @@
+export * from './theme-injector';
+export * from './theme-fetcher';

package/packages/design-tokens/src/runtime/theme-fetcher.ts

@@ -0,0 +1,90 @@
+import { injectTheme } from './theme-injector';
+
+/**
+ * Fetches a theme.json file from the specified URL.
+ *
+ * - Gracefully handles SSR environments by returning an empty object.
+ * - Handles network errors by catching them and returning an empty object.
+ *
+ * @param url The URL to fetch the theme JSON from.
+ * @returns A promise that resolves to the parsed theme JSON object, or an empty object on failure/SSR.
+ */
+export async function fetchTheme(url: string): Promise<Record<string, unknown>> {
+  // SSR guard: fetch might not exist, or we are in a server environment
+  if (typeof fetch === 'undefined' || typeof document === 'undefined') {
+    return {};
+  }
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      console.warn(
+        `[origo-design] Failed to fetch theme from ${url}: ${response.status} ${response.statusText}`
+      );
+      return {};
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.warn(`[origo-design] Error fetching theme from ${url}:`, error);
+    return {};
+  }
+}
+
+const activeLoads = new Map<unknown, number>();
+let globalLoadCounter = 0;
+
+/**
+ * Fetches a theme.json file and injects it into the DOM.
+ * Measures the time taken using the Performance API to ensure NFR-PERF-005 limits.
+ *
+ * @param url The URL to fetch the theme JSON from.
+ * @param target The target HTMLElement to scope the injected styles to. Defaults to documentElement.
+ * @returns A promise that resolves to a teardown function to remove the injected style tag.
+ */
+export async function loadAndInjectTheme(
+  url: string,
+  target?: HTMLElement | null
+): Promise<() => void> {
+  const loadId = ++globalLoadCounter;
+  const loadKey = target || 'default';
+  activeLoads.set(loadKey, loadId);
+  const perfMarkStart = `theme-load-start-${url}`;
+  const perfMarkEnd = `theme-load-end-${url}`;
+  const perfMeasure = `theme-load-measure-${url}`;
+
+  if (typeof performance !== 'undefined' && performance.mark) {
+    performance.mark(perfMarkStart);
+  }
+
+  let teardown: () => void = () => {
+    // default no-op teardown
+  };
+  try {
+    const themeJson = await fetchTheme(url);
+    // Concurrency Lock: abort injection if a newer call has superseded this one for the same target
+    if (activeLoads.get(loadKey) !== loadId) {
+      return teardown;
+    }
+    const injected = injectTheme(themeJson, target);
+    if (typeof injected === 'function') {
+      teardown = injected;
+    }
+  } catch (error) {
+    console.warn('[origo-design] Error in loadAndInjectTheme', error);
+  } finally {
+    if (typeof performance !== 'undefined' && performance.mark && performance.measure) {
+      performance.mark(perfMarkEnd);
+      try {
+        performance.measure(perfMeasure, perfMarkStart, perfMarkEnd);
+      } catch {
+        // Ignore measure errors
+      }
+      performance.clearMarks(perfMarkStart);
+      performance.clearMarks(perfMarkEnd);
+      performance.clearMeasures(perfMeasure);
+    }
+  }
+
+  return teardown;
+}

package/packages/design-tokens/src/runtime/theme-injector.ts

@@ -0,0 +1,149 @@
+/** CSS custom property name allowlist — alphanumeric, hyphens, underscores only */
+const CSS_SAFE_KEY = /^[a-zA-Z0-9_-]+$/;
+
+/** Keys that must never be set on a plain object to prevent prototype pollution */
+const BLOCKED_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+
+/**
+ * Allowed CSS value patterns for semantic token overrides.
+ * Validates concrete formats rather than relying solely on a denylist.
+ */
+const SAFE_VALUE_PATTERNS: RegExp[] = [
+  /^#[0-9a-fA-F]{3,8}$/, // hex colors: #fff, #ffffff, #ffffffaa
+  /^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+(?:\s*,\s*[\d.]+)?\s*\)$/, // rgb / rgba
+  /^hsla?\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%(?:\s*,\s*[\d.]+)?\s*\)$/, // hsl / hsla
+  /^[\d.]+(?:px|rem|em|%|vh|vw|vmin|vmax|pt|ch|ex|fr|deg|rad|turn|ms|s)$/, // numeric with units
+  /^[\d.]+$/, // plain numbers (opacity, z-index, line-height)
+  /^[a-zA-Z][-a-zA-Z0-9]*$/, // CSS named values: red, transparent, inherit, currentColor, etc.
+  /^var\(--[a-zA-Z0-9_-]+\)$/, // CSS variables
+  /^calc\([^)]+\)$/, // CSS calc
+  /^clamp\([^)]+\)$/, // CSS clamp
+  /^(?:linear|radial|conic)-gradient\([^)]+\)$/, // CSS gradients
+];
+
+function isSafeValue(value: string): boolean {
+  return SAFE_VALUE_PATTERNS.some(pattern => pattern.test(value.trim()));
+}
+
+/**
+ * Parses and sanitises a flat or single-level-nested theme JSON object into
+ * a safe map of `token-key → CSS value`.
+ *
+ * - Keys are validated against a CSS identifier allowlist.
+ * - Values are validated against explicit CSS format patterns.
+ * - Prototype-poisoning keys (`__proto__`, `constructor`, `prototype`) are blocked.
+ * - Arrays are rejected at every nesting level.
+ */
+export function parseTheme(themeJson: unknown): Record<string, string> {
+  if (!themeJson || typeof themeJson !== 'object' || Array.isArray(themeJson)) {
+    return {};
+  }
+
+  // Object.create(null) avoids prototype setter side-effects for any key written
+  const result = Object.create(null) as Record<string, string>;
+
+  const flatten = (
+    obj: Record<string, unknown>,
+    prefix = '',
+    depth = 0,
+    visited = new WeakSet()
+  ) => {
+    if (depth > 1) return; // Prevent arbitrary depth beyond single-level
+    if (visited.has(obj)) return; // Prevent circular reference crashes
+    visited.add(obj);
+
+    for (const key of Object.keys(obj)) {
+      if (BLOCKED_KEYS.has(key) || !CSS_SAFE_KEY.test(key)) continue;
+
+      const value = obj[key];
+
+      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        flatten(value as Record<string, unknown>, `${prefix}${key}-`, depth + 1, visited);
+      } else if (typeof value === 'string' || typeof value === 'number') {
+        const strVal = String(value).trim();
+        const fullKey = `${prefix}${key}`;
+
+        // Block base token overrides, enforce semantic overrides
+        if (!fullKey.startsWith('base-') && isSafeValue(strVal)) {
+          result[fullKey] = strVal;
+        }
+      }
+    }
+  };
+
+  flatten(themeJson as Record<string, unknown>);
+  return result;
+}
+
+/**
+ * Applies a parsed theme to the DOM by injecting a `<style>` tag into
+ * `document.head` scoped to the target element.
+ *
+ * - When `target` is `document.documentElement` (the default), the style block
+ *   targets `:root` for global override.
+ * - When `target` is any other element, the element receives a stable
+ *   `data-origo-theme-id` attribute and the style block is scoped to that
+ *   attribute selector, enabling per-subtree theme isolation.
+ * - Passing an empty or fully-invalid theme removes the previously injected
+ *   style tag for that target rather than leaving stale rules.
+ * - Safe to call in SSR environments — returns immediately if `document` is
+ *   not defined.
+ */
+let nextTagId = 0;
+
+export function injectTheme(themeJson: unknown, target?: HTMLElement | null): () => void {
+  // SSR guard — DOM APIs are not available in Node.js environments
+  if (typeof document === 'undefined') return () => undefined;
+
+  const actualTarget = target === undefined ? document.documentElement : target;
+  if (!actualTarget) return () => undefined;
+
+  const head = document.head || document.documentElement;
+  if (!head) return () => undefined;
+
+  const parsed = parseTheme(themeJson);
+
+  // Determine the CSS selector and the style-tag attribute for this target
+  let selector: string;
+  let tagId: string;
+
+  if (actualTarget === document.documentElement) {
+    selector = ':root';
+    tagId = 'runtime';
+  } else {
+    // Assign a stable per-element ID so repeated calls reuse the same tag
+    if (!actualTarget.dataset['origoThemeId']) {
+      actualTarget.dataset['origoThemeId'] = `t${++nextTagId}`;
+    }
+    tagId = actualTarget.dataset['origoThemeId'] as string;
+    selector = `[data-origo-theme-id="${CSS.escape(tagId)}"]`;
+  }
+
+  let styleTag = head.querySelector<HTMLStyleElement>(
+    `style[data-origo-theme="${CSS.escape(tagId)}"]`
+  );
+
+  // Empty theme → remove the style tag to prevent stale overrides
+  if (Object.keys(parsed).length === 0) {
+    styleTag?.remove();
+    return () => undefined;
+  }
+
+  if (!styleTag) {
+    styleTag = document.createElement('style');
+    styleTag.setAttribute('data-origo-theme', tagId);
+    head.appendChild(styleTag);
+  }
+
+  let cssVariables = '';
+  for (const [key, value] of Object.entries(parsed)) {
+    cssVariables += `  --origo-${key}: ${value};\n`;
+  }
+
+  styleTag.textContent = `${selector} {\n${cssVariables}}\n`;
+
+  // Return a teardown function to clean up scoped injections
+  return () => {
+    styleTag?.remove();
+  };
+}

package/packages/design-tokens/src/schemas/base-tokens.schema.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://origo.dev/schemas/base-tokens.schema.json",
+  "title": "Origo Base Tokens Schema",
+  "description": "JSON Schema for Origo Base Tokens",
+  "type": "object",
+  "patternProperties": {
+    "^[^$][a-zA-Z0-9_\\-]*$": {
+      "$ref": "#/$defs/tokenOrGroup"
+    }
+  },
+  "additionalProperties": false,
+  "$defs": {
+    "tokenOrGroup": {
+      "anyOf": [{ "$ref": "#/$defs/token" }, { "$ref": "#/$defs/tokenGroup" }]
+    },
+    "token": {
+      "type": "object",
+      "properties": {
+        "$value": {
+          "type": ["string", "number", "object", "array", "boolean"]
+        },
+        "$type": {
+          "type": "string",
+          "enum": [
+            "color",
+            "dimension",
+            "fontFamily",
+            "fontWeight",
+            "duration",
+            "cubicBezier",
+            "number",
+            "shadow",
+            "strokeStyle",
+            "border",
+            "transition",
+            "typography",
+            "spacing",
+            "borderRadius",
+            "elevation",
+            "animation",
+            "motion",
+            "breakpoints",
+            "opacity",
+            "density"
+          ]
+        },
+        "$description": {
+          "type": "string"
+        }
+      },
+      "required": ["$value"],
+      "additionalProperties": false,
+      "allOf": [
+        {
+          "if": { "properties": { "$type": { "const": "typography" } }, "required": ["$type"] },
+          "then": { "properties": { "$value": { "$ref": "#/$defs/typographyValue" } } }
+        },
+        {
+          "if": { "properties": { "$type": { "const": "shadow" } }, "required": ["$type"] },
+          "then": { "properties": { "$value": { "$ref": "#/$defs/shadowValue" } } }
+        },
+        {
+          "if": { "properties": { "$type": { "const": "border" } }, "required": ["$type"] },
+          "then": { "properties": { "$value": { "$ref": "#/$defs/borderValue" } } }
+        }
+      ]
+    },
+    "tokenGroup": {
+      "type": "object",
+      "properties": {
+        "$type": {
+          "type": "string"
+        },
+        "$description": {
+          "type": "string"
+        }
+      },
+      "patternProperties": {
+        "^[^$][a-zA-Z0-9_\\-]*$": {
+          "$ref": "#/$defs/tokenOrGroup"
+        }
+      },
+      "additionalProperties": false
+    },
+    "typographyValue": {
+      "type": "object",
+      "properties": {
+        "fontFamily": { "type": "string" },
+        "fontSize": { "type": ["string", "number"] },
+        "fontWeight": { "type": ["string", "number"] },
+        "letterSpacing": { "type": ["string", "number"] },
+        "lineHeight": { "type": ["string", "number"] }
+      },
+      "required": ["fontFamily", "fontSize"],
+      "additionalProperties": false
+    },
+    "shadowValue": {
+      "anyOf": [
+        { "$ref": "#/$defs/singleShadowValue" },
+        { "type": "array", "items": { "$ref": "#/$defs/singleShadowValue" } }
+      ]
+    },
+    "singleShadowValue": {
+      "type": "object",
+      "properties": {
+        "color": { "type": "string" },
+        "offsetX": { "type": ["string", "number"] },
+        "offsetY": { "type": ["string", "number"] },
+        "blur": { "type": ["string", "number"] },
+        "spread": { "type": ["string", "number"] }
+      },
+      "required": ["color", "offsetX", "offsetY"],
+      "additionalProperties": false
+    },
+    "borderValue": {
+      "type": "object",
+      "properties": {
+        "color": { "type": "string" },
+        "width": { "type": ["string", "number"] },
+        "style": { "type": "string" }
+      },
+      "required": ["color", "width", "style"],
+      "additionalProperties": false
+    }
+  }
+}

package/packages/design-tokens/src/schemas/semantic-tokens.schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://origo.dev/schemas/semantic-tokens.schema.json",
+  "title": "Origo Semantic Tokens Schema",
+  "description": "JSON Schema for Origo Semantic Tokens (ensures references)",
+  "type": "object",
+  "patternProperties": {
+    "^[^$][a-zA-Z0-9_\\-]*$": {
+      "$ref": "#/$defs/tokenOrGroup"
+    }
+  },
+  "additionalProperties": false,
+  "$defs": {
+    "tokenOrGroup": {
+      "anyOf": [{ "$ref": "#/$defs/token" }, { "$ref": "#/$defs/tokenGroup" }]
+    },
+    "token": {
+      "type": "object",
+      "properties": {
+        "$value": {
+          "type": "string",
+          "pattern": "^.*\\{[a-zA-Z0-9_\\-\\.]+\\}.*$"
+        },
+        "$type": {
+          "type": "string"
+        },
+        "$description": {
+          "type": "string"
+        }
+      },
+      "required": ["$value"],
+      "additionalProperties": false
+    },
+    "tokenGroup": {
+      "type": "object",
+      "properties": {
+        "$type": {
+          "type": "string"
+        },
+        "$description": {
+          "type": "string"
+        }
+      },
+      "patternProperties": {
+        "^[^$][a-zA-Z0-9_\\-]*$": {
+          "$ref": "#/$defs/tokenOrGroup"
+        }
+      },
+      "additionalProperties": false
+    }
+  }
+}

package/packages/design-tokens/src/tokens/base.json

@@ -0,0 +1,46 @@
+{
+  "color": {
+    "base": {
+      "blue": {
+        "100": {
+          "$value": "#E6F0FF",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#0066FF",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#002966",
+          "$type": "color"
+        }
+      },
+      "neutral": {
+        "100": {
+          "$value": "#F5F5F5",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#1A1A1A",
+          "$type": "color"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "base": {
+      "1": {
+        "$value": "4px",
+        "$type": "dimension"
+      },
+      "2": {
+        "$value": "8px",
+        "$type": "dimension"
+      },
+      "4": {
+        "$value": "16px",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/packages/design-tokens/src/tokens/semantic.json

@@ -0,0 +1,33 @@
+{
+  "color": {
+    "surface": {
+      "primary": {
+        "$value": "{color.base.blue.500}",
+        "$type": "color",
+        "$description": "Primary surface color for main actions"
+      },
+      "background": {
+        "$value": "{color.base.neutral.100}",
+        "$type": "color"
+      }
+    },
+    "text": {
+      "primary": {
+        "$value": "{color.base.neutral.900}",
+        "$type": "color"
+      },
+      "inverse": {
+        "$value": "{color.base.neutral.100}",
+        "$type": "color"
+      }
+    }
+  },
+  "spacing": {
+    "container": {
+      "padding": {
+        "$value": "{spacing.base.4}",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/packages/playground/CHANGELOG.md

@@ -0,0 +1,12 @@
+## 0.0.22 (2026-09-04)
+
+### 🚀 Features
+
+- add tsconfig.app.json to playground package for application-specific build configuration ([3a9d8e4](https://github.com/OrigoStudio/origo-design/commit/3a9d8e4))
+- add test setup configuration for vitest and browser environment mocks ([e75ad98](https://github.com/OrigoStudio/origo-design/commit/e75ad98))
+- scaffold playground application and e2e testing suite with initial editor component and schema registry ([f097894](https://github.com/OrigoStudio/origo-design/commit/f097894))
+- add GitHub Actions workflow to automate library releases using Nx Release ([3d6651f](https://github.com/OrigoStudio/origo-design/commit/3d6651f))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse

package/packages/playground/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@origo/playground",
+  "version": "0.0.22",
+  "private": true,
+  "dependencies": {},
+  "peerDependencies": {
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0"
+  }
+}

package/packages/playground/src/app/app.component.html

@@ -0,0 +1 @@
+<origo-badl-editor [initialValue]="'{}'"></origo-badl-editor>

package/packages/playground/src/app/app.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  height: 100%;
+}

package/packages/playground/src/app/app.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { BadlEditorComponent } from '../editor/badl-editor.component';
+
+@Component({
+  standalone: true,
+  imports: [BadlEditorComponent],
+  selector: 'origo-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+})
+export class AppComponent {
+  protected title = 'playground';
+}

package/packages/playground/src/app/app.config.ts

@@ -0,0 +1,9 @@
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection()],
+};

package/packages/playground/src/editor/badl-editor.component.html

@@ -0,0 +1 @@
+<div class="editor-container" #editorContainer></div>

package/packages/playground/src/editor/badl-editor.component.scss

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.editor-container {
+  width: 100%;
+  height: 100%;
+}

package/packages/playground/src/editor/badl-editor.component.ts

@@ -0,0 +1,57 @@
+import {
+  Component,
+  AfterViewInit,
+  OnDestroy,
+  ElementRef,
+  ViewChild,
+  input,
+  NgZone,
+  inject,
+} from '@angular/core';
+import * as monaco from 'monaco-editor';
+import './monaco-environment'; // MUST be first monaco import — side-effect only
+import { registerBadlSchema } from './schema-registry';
+
+@Component({
+  selector: 'origo-badl-editor',
+  standalone: true,
+  templateUrl: './badl-editor.component.html',
+  styleUrls: ['./badl-editor.component.scss'],
+})
+export class BadlEditorComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('editorContainer') editorContainer!: ElementRef<HTMLDivElement>;
+
+  readonly initialValue = input<string>('');
+  readonly theme = input<string>('vs-dark');
+  readonly readOnly = input<boolean>(false);
+
+  private editor: monaco.editor.IStandaloneCodeEditor | null = null;
+  private zone = inject(NgZone);
+
+  ngAfterViewInit(): void {
+    registerBadlSchema();
+    this.zone.runOutsideAngular(() => {
+      if (!this.editorContainer?.nativeElement) return;
+      try {
+        this.editor = monaco.editor.create(this.editorContainer.nativeElement, {
+          model: monaco.editor.createModel(
+            this.initialValue(),
+            'json',
+            monaco.Uri.parse('inmemory://model/domain.json')
+          ),
+          theme: this.theme(),
+          readOnly: this.readOnly(),
+          automaticLayout: true, // Required for split-pane resize in Story 7.2
+          minimap: { enabled: false },
+        });
+      } catch (e) {
+        console.error('Failed to initialize Monaco Editor', e);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.editor?.dispose(); // CRITICAL — prevents Monaco timer memory leak
+    this.editor = null;
+  }
+}

package/packages/playground/src/editor/editor.worker.ts

@@ -0,0 +1 @@
+import 'monaco-editor/esm/vs/editor/editor.worker';

package/packages/playground/src/editor/json.worker.ts

@@ -0,0 +1 @@
+import 'monaco-editor/esm/vs/language/json/json.worker';

package/packages/playground/src/editor/monaco-environment.ts

@@ -0,0 +1,11 @@
+// packages/playground/src/editor/monaco-environment.ts
+// This file MUST be imported before ANY other monaco-editor import (side-effect)
+
+(window as Window & typeof globalThis & { MonacoEnvironment: unknown }).MonacoEnvironment = {
+  getWorker(_: string, label: string) {
+    if (label === 'json') {
+      return new Worker(new URL('./json.worker', import.meta.url), { type: 'module' });
+    }
+    return new Worker(new URL('./editor.worker', import.meta.url), { type: 'module' });
+  },
+};