meno-core 1.0.0

package/lib/shared/elementUtils.test.ts

@@ -0,0 +1,245 @@
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { findElementWithPath, findComponentInstanceRoot, findComponentInstanceRootByParent } from './elementUtils';
+
+/**
+ * elementUtils Tests
+ * Tests DOM element utility functions
+ */
+
+describe('elementUtils', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  describe('findElementWithPath', () => {
+    test('should find element with data-element-path attribute', () => {
+      const parent = document.createElement('div');
+      parent.setAttribute('data-element-path', '0,0');
+      const child = document.createElement('span');
+      parent.appendChild(child);
+      container.appendChild(parent);
+
+      const result = findElementWithPath(child);
+      expect(result).toBe(parent);
+    });
+
+    test('should return the element itself if it has data-element-path', () => {
+      const element = document.createElement('div');
+      element.setAttribute('data-element-path', '0,0');
+      container.appendChild(element);
+
+      const result = findElementWithPath(element);
+      expect(result).toBe(element);
+    });
+
+    test('should return null if no element with path is found', () => {
+      const element = document.createElement('div');
+      container.appendChild(element);
+
+      const result = findElementWithPath(element);
+      expect(result).toBeNull();
+    });
+
+    test('should return null for null input', () => {
+      const result = findElementWithPath(null);
+      expect(result).toBeNull();
+    });
+
+    test('should traverse multiple levels up', () => {
+      const grandparent = document.createElement('div');
+      grandparent.setAttribute('data-element-path', '0,0');
+      const parent = document.createElement('div');
+      const child = document.createElement('span');
+      grandparent.appendChild(parent);
+      parent.appendChild(child);
+      container.appendChild(grandparent);
+
+      const result = findElementWithPath(child);
+      expect(result).toBe(grandparent);
+    });
+
+    test('should find nearest ancestor with path', () => {
+      const grandparent = document.createElement('div');
+      grandparent.setAttribute('data-element-path', '0,0');
+      const parent = document.createElement('div');
+      parent.setAttribute('data-element-path', '0,0,0');
+      const child = document.createElement('span');
+      grandparent.appendChild(parent);
+      parent.appendChild(child);
+      container.appendChild(grandparent);
+
+      const result = findElementWithPath(child);
+      expect(result).toBe(parent);
+    });
+  });
+
+  describe('findComponentInstanceRoot', () => {
+    test('should find component root by matching parent-component', () => {
+      const root = document.createElement('div');
+      root.setAttribute('data-parent-component', 'Button');
+      root.setAttribute('data-element-path', '0,0');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      root.appendChild(child);
+      container.appendChild(root);
+
+      const result = findComponentInstanceRoot(child);
+      expect(result).toBe(root);
+    });
+
+    test('should return null if element has no data-parent-component', () => {
+      const element = document.createElement('div');
+      container.appendChild(element);
+
+      const result = findComponentInstanceRoot(element);
+      expect(result).toBeNull();
+    });
+
+    test('should find topmost element with same component name', () => {
+      const root = document.createElement('div');
+      root.setAttribute('data-parent-component', 'Button');
+      root.setAttribute('data-element-path', '0,0');
+
+      const middle = document.createElement('div');
+      middle.setAttribute('data-parent-component', 'Button');
+      middle.setAttribute('data-element-path', '0,0,0');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      root.appendChild(middle);
+      middle.appendChild(child);
+      container.appendChild(root);
+
+      const result = findComponentInstanceRoot(child);
+      expect(result).toBe(root);
+    });
+
+    test('should stop at different component boundary', () => {
+      const outerComponent = document.createElement('div');
+      outerComponent.setAttribute('data-parent-component', 'Container');
+      outerComponent.setAttribute('data-element-path', '0,0');
+
+      const innerComponent = document.createElement('div');
+      innerComponent.setAttribute('data-parent-component', 'Button');
+      innerComponent.setAttribute('data-element-path', '0,0,0');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      outerComponent.appendChild(innerComponent);
+      innerComponent.appendChild(child);
+      container.appendChild(outerComponent);
+
+      const result = findComponentInstanceRoot(child);
+      expect(result).toBe(innerComponent);
+    });
+
+    test('should handle element with path attribute', () => {
+      const element = document.createElement('div');
+      element.setAttribute('data-parent-component', 'Button');
+      element.setAttribute('data-element-path', '0,0');
+      container.appendChild(element);
+
+      const result = findComponentInstanceRoot(element);
+      expect(result).toBe(element);
+    });
+
+    test('should return null if no element with path is found in component', () => {
+      const parent = document.createElement('div');
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      parent.appendChild(child);
+      container.appendChild(parent);
+
+      const result = findComponentInstanceRoot(child);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('findComponentInstanceRootByParent', () => {
+    test('should find root element without data-parent-component', () => {
+      const root = document.createElement('div');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      root.appendChild(child);
+      container.appendChild(root);
+
+      const result = findComponentInstanceRootByParent(child);
+      expect(result).toBe(root);
+    });
+
+    test('should return element itself if it has no data-parent-component', () => {
+      const element = document.createElement('div');
+      container.appendChild(element);
+
+      const result = findComponentInstanceRootByParent(element);
+      expect(result).toBe(element);
+    });
+
+    test('should traverse multiple levels', () => {
+      const root = document.createElement('div');
+
+      const middle = document.createElement('div');
+      middle.setAttribute('data-parent-component', 'Button');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      root.appendChild(middle);
+      middle.appendChild(child);
+      container.appendChild(root);
+
+      const result = findComponentInstanceRootByParent(child);
+      expect(result).toBe(root);
+    });
+
+    test('should return null if no root found', () => {
+      // Create a detached element tree where all have data-parent-component
+      const parent = document.createElement('div');
+      parent.setAttribute('data-parent-component', 'Container');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      parent.appendChild(child);
+      // Don't append to container - it's detached
+
+      const result = findComponentInstanceRootByParent(child);
+      expect(result).toBeNull();
+    });
+
+    test('should find root in nested component structure', () => {
+      const root = document.createElement('div');
+
+      const outerComponent = document.createElement('div');
+      outerComponent.setAttribute('data-parent-component', 'Container');
+
+      const innerComponent = document.createElement('div');
+      innerComponent.setAttribute('data-parent-component', 'Button');
+
+      const child = document.createElement('span');
+      child.setAttribute('data-parent-component', 'Button');
+
+      root.appendChild(outerComponent);
+      outerComponent.appendChild(innerComponent);
+      innerComponent.appendChild(child);
+      container.appendChild(root);
+
+      const result = findComponentInstanceRootByParent(child);
+      expect(result).toBe(root);
+    });
+  });
+});

package/lib/shared/elementUtils.ts

@@ -0,0 +1,90 @@
+/**
+ * Shared element utility functions
+ * Used for finding and manipulating DOM elements in the editor
+ */
+
+/**
+ * Find an element with data-element-path attribute by traversing up the DOM tree
+ * 
+ * @param element - Starting element to search from
+ * @returns Element with data-element-path attribute, or null if not found
+ */
+export function findElementWithPath(element: HTMLElement | null): HTMLElement | null {
+  let current: HTMLElement | null = element;
+  while (current) {
+    if (current.hasAttribute('data-element-path')) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Find the component instance root element by walking up the DOM tree
+ * The component root is the topmost element (walking up) that:
+ * 1. Has data-element-path (is selectable in the tree)
+ * 2. Has data-parent-component matching the starting element's component
+ * 
+ * @param element - Starting element (should have data-parent-component attribute)
+ * @returns Component instance root element, or null if not found
+ */
+export function findComponentInstanceRoot(element: HTMLElement): HTMLElement | null {
+  const componentName = element.getAttribute('data-parent-component');
+  if (!componentName) return null;
+  
+  let current: HTMLElement | null = element;
+  let componentRoot: HTMLElement | null = null;
+  
+  // Walk up the DOM tree
+  while (current) {
+    const currentComponentName = current.getAttribute('data-parent-component');
+    const hasPath = current.hasAttribute('data-element-path');
+    
+    // If this element has the same component name and has a path, remember it
+    // We want the LAST (topmost) one we encounter while still in the component
+    if (currentComponentName === componentName && hasPath) {
+      componentRoot = current;
+    }
+    
+    // Stop if we've moved to a different component
+    if (currentComponentName && currentComponentName !== componentName) {
+      break;
+    }
+    
+    // If we've exited the component (no data-parent-component) and we found a root, stop
+    if (!currentComponentName && componentRoot) {
+      break;
+    }
+    
+    current = current.parentElement;
+  }
+  
+  return componentRoot;
+}
+
+/**
+ * Alternative implementation: Find component root by walking up until we find
+ * an element without data-parent-component (the component root)
+ * This is used by elementHighlighter.ts
+ * 
+ * @param element - Starting element
+ * @returns Component instance root element, or null if not found
+ */
+export function findComponentInstanceRootByParent(element: HTMLElement): HTMLElement | null {
+  let current: HTMLElement | null = element;
+  
+  // Walk up until we find an element without data-parent-component (the component root)
+  while (current) {
+    if (!current.hasAttribute('data-parent-component')) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  
+  return null;
+}
+
+
+
+

package/lib/shared/fontLoader.ts

@@ -0,0 +1,97 @@
+import { projectPaths } from '../server/projectContext';
+
+export interface FontConfig {
+  path: string;
+  family?: string;
+  weight?: number;
+  style?: 'normal' | 'italic';
+}
+
+interface ProjectConfig {
+  fonts?: FontConfig[];
+  [key: string]: unknown;
+}
+
+let cachedConfig: ProjectConfig | null = null;
+
+export async function loadProjectConfig(): Promise<ProjectConfig> {
+  if (cachedConfig) return cachedConfig;
+  const file = Bun.file(projectPaths.config());
+  if (await file.exists()) {
+    cachedConfig = await file.json();
+  } else {
+    cachedConfig = { fonts: [] };
+  }
+  return cachedConfig;
+}
+
+// For synchronous access after config is loaded
+export function getProjectConfig(): ProjectConfig {
+  return cachedConfig || { fonts: [] };
+}
+
+/**
+ * Detect font format from file extension
+ */
+function getFontFormat(path: string): string {
+  if (path.endsWith('.woff2')) return 'woff2';
+  if (path.endsWith('.woff')) return 'woff';
+  if (path.endsWith('.ttf')) return 'truetype';
+  if (path.endsWith('.otf')) return 'opentype';
+  return 'truetype';
+}
+
+/**
+ * Extract font family name from path if not provided
+ * Example: "/fonts/geomanist-regular.ttf" -> "Geomanist"
+ */
+function extractFamilyName(path: string): string {
+  const filename = path.split('/').pop() || 'Font';
+  const name = filename.replace(/\.(ttf|woff2?|otf)$/i, '');
+  // Capitalize and replace hyphens with spaces
+  return name
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+export function generateFontCSS(): string {
+  const config = getProjectConfig();
+  const fonts = config.fonts || [];
+
+  return fonts
+    .map((font: FontConfig) => {
+      const format = getFontFormat(font.path);
+      const family = font.family || extractFamilyName(font.path);
+      const weight = font.weight ?? 400;
+      const style = font.style ?? 'normal';
+
+      return `@font-face {
+  font-family: '${family}';
+  src: url('${font.path}') format('${format}');
+  font-weight: ${weight};
+  font-style: ${style};
+}`;
+    })
+    .join('\n\n');
+}
+
+export function getFontFamilies(): Record<string, number[]> {
+  const config = getProjectConfig();
+  const fonts = config.fonts || [];
+  const familiesMap: Record<string, number[]> = {};
+
+  fonts.forEach((font: FontConfig) => {
+    const family = font.family || extractFamilyName(font.path);
+    const weight = font.weight ?? 400;
+
+    if (!familiesMap[family]) {
+      familiesMap[family] = [];
+    }
+    if (!familiesMap[family].includes(weight)) {
+      familiesMap[family].push(weight);
+    }
+  });
+
+  return familiesMap;
+}