@trineui/cli 0.1.0-beta.1

package/src/commands/sync.ts

@@ -0,0 +1,113 @@
+import { Command } from 'commander';
+import { writeFileSync, existsSync, readFileSync } from 'fs';
+import { resolve } from 'path';
+import { computeNormalizedHash } from '../utils/hash.js';
+import { readManifest, writeManifest } from '../utils/manifest.js';
+import { renderTemplate } from '../utils/template.js';
+import { runInteractiveSync } from './sync-interactive.js';
+
+export const syncCommand = new Command('sync')
+  .argument('<component>', 'Component name (e.g. button)')
+  .option('--interactive', 'Interactive 3-way merge for resolving conflicts')
+  .option('--dry-run', 'Show what would be synced without making changes')
+  .description('Sync blueprint with latest upstream version')
+  .action(async (component: string, options: { interactive?: boolean; dryRun?: boolean }) => {
+    const projectRoot = process.cwd();
+
+    const manifest = readManifest(projectRoot);
+    if (!manifest?.components[component]) {
+      console.error(`✗ "${component}" not found in manifest`);
+      console.error(`  Run: trine add ${component}`);
+      process.exit(1);
+    }
+
+    const entry = manifest.components[component];
+
+    const blueprintPath = resolve(
+      projectRoot,
+      entry['output-dir'],
+      component,
+      `${component}.blueprint.ts`
+    );
+
+    if (!existsSync(blueprintPath)) {
+      console.error(`✗ Blueprint file not found: ${blueprintPath}`);
+      console.error(`  Run: trine add ${component}`);
+      process.exit(1);
+    }
+
+    const currentContent = readFileSync(blueprintPath, 'utf-8');
+    const currentHash = computeNormalizedHash(currentContent);
+    const manifestHash = entry['blueprint-hash'];
+
+    const upstreamContent = renderTemplate(`${component}.blueprint.ts.hbs`, {
+      engineVersion: entry['engine-version'],
+      blueprintSchemaVersion: entry['blueprint-schema-version'],
+    });
+
+    const upstreamHash = computeNormalizedHash(upstreamContent);
+
+    if (options.interactive) {
+      if (currentHash === manifestHash) {
+        console.log('✓ No local changes to merge.');
+        return;
+      }
+
+      const result = await runInteractiveSync(
+        component,
+        currentContent,
+        upstreamContent,
+        blueprintPath,
+        manifest
+      );
+      if (result === 'merged') {
+        writeManifest(manifest, projectRoot);
+        console.log('✓ manifest.json updated.');
+      }
+      return;
+    }
+
+    if (currentHash !== manifestHash) {
+      console.error('✗ Cannot auto-sync: blueprint has local modifications');
+      console.error('');
+      console.error(`  Local changes detected in: ${component}.blueprint.ts`);
+      console.error('');
+      console.error('  Options:');
+      console.error(`    trine sync ${component} --interactive    Resolve conflicts interactively`);
+      console.error(`    trine diff ${component}                  See what changed upstream`);
+      console.error(`    trine add ${component} --force           Overwrite (loses your changes)`);
+      console.error('');
+      console.error('  Tip: Run "trine diff" first to understand the changes.');
+      process.exit(1);
+    }
+
+    if (upstreamHash === manifestHash) {
+      console.log(`✓ ${component} blueprint already up to date`);
+      console.log('');
+      console.log('  Nothing to sync.');
+      return;
+    }
+
+    if (options.dryRun) {
+      console.log(`[dry-run] Would sync ${component} blueprint`);
+      console.log(`[dry-run] Blueprint: ${entry['output-dir']}/${component}/${component}.blueprint.ts`);
+      console.log('[dry-run] Skin: (not touched - user-owned)');
+      return;
+    }
+
+    writeFileSync(blueprintPath, upstreamContent, 'utf-8');
+
+    const newHash = computeNormalizedHash(upstreamContent);
+    entry['blueprint-hash'] = newHash;
+    entry['synced-at'] = new Date().toISOString();
+
+    writeManifest(manifest, projectRoot);
+
+    console.log(`✓ ${component} blueprint synced successfully`);
+    console.log('');
+    console.log('  Updates applied:');
+    console.log('    blueprint: updated');
+    console.log('    skin:      unchanged (user-owned)');
+    console.log('');
+    console.log(`  Run: trine diff ${component}   — check for more upstream changes`);
+  });

package/src/index.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { addCommand } from './commands/add.js';
+import { diffCommand } from './commands/diff.js';
+import { syncCommand } from './commands/sync.js';
+import { ejectCommand } from './commands/eject.js';
+import { initCommand } from './commands/init.js';
+
+const program = new Command();
+program.name('trine').description('Trine CLI').version('0.1.0');
+
+program.addCommand(addCommand);
+program.addCommand(diffCommand);
+program.addCommand(syncCommand);
+program.addCommand(ejectCommand);
+program.addCommand(initCommand);
+
+program.parse();

package/src/types/manifest.ts

@@ -0,0 +1,14 @@
+export interface TrineManifest {
+  'trine-spec': '1.0';
+  components: Record<string, ComponentEntry>;
+}
+
+export interface ComponentEntry {
+  'engine-version': string;
+  'blueprint-schema-version': string;
+  'blueprint-hash': string;
+  'blueprint-modified': boolean;
+  'synced-at': string;
+  'sync-model': 'normalized-text-v0.1';
+  'output-dir': string;
+}

package/src/utils/__tests__/hash.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { computeNormalizedHash } from '../hash.js';
+
+describe('computeNormalizedHash', () => {
+  it('ค่าเหมือนเดิมหลัง Prettier reformat whitespace', () => {
+    const original = `@Component({
+  selector: 'ui-button',
+})`;
+    const prettified = `@Component({ selector: 'ui-button' })`;
+    expect(computeNormalizedHash(original))
+      .toBe(computeNormalizedHash(prettified));
+  });
+
+  it('ค่าเหมือนเดิมหลังเพิ่ม/ลบ comment', () => {
+    const withComment = `// This is generated
+@Component({})`;
+    const withoutComment = `@Component({})`;
+    expect(computeNormalizedHash(withComment))
+      .toBe(computeNormalizedHash(withoutComment));
+  });
+
+  it('ค่าต่างเมื่อเปลี่ยน structure จริง', () => {
+    const v1 = `@Component({ selector: 'ui-button' })`;
+    const v2 = `@Component({ selector: 'ui-btn' })`;
+    expect(computeNormalizedHash(v1))
+      .not.toBe(computeNormalizedHash(v2));
+  });
+
+  it('import reorder ไม่เปลี่ยน hash', () => {
+    const order1 = `import { A } from 'a';\nimport { B } from 'b';`;
+    const order2 = `import { B } from 'b';\nimport { A } from 'a';`;
+    expect(computeNormalizedHash(order1))
+      .toBe(computeNormalizedHash(order2));
+  });
+});

package/src/utils/__tests__/template.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { renderTemplate } from '../template.js';
+
+describe('template rendering', () => {
+  it('renders blueprint template without unresolved placeholders', () => {
+    const result = renderTemplate('button.blueprint.ts.hbs', {
+      engineVersion: '0.1.0',
+      blueprintSchemaVersion: '1.0.0',
+    });
+    expect(result).not.toContain('{{');
+    expect(result).not.toContain('}}');
+    expect(result).toContain("selector: 'ui-button'");
+    expect(result).toContain('ButtonEngine');
+    expect(result).toContain('BUTTON_STYLING_CONTRACT');
+  });
+
+  it('renders skin template without ButtonEngine reference', () => {
+    const result = renderTemplate('button.skin.ts.hbs', {
+      engineVersion: '0.1.0',
+      blueprintSchemaVersion: '1.0.0',
+    });
+    expect(result).not.toContain('{{');
+    expect(result).toContain('BUTTON_STYLING_CONTRACT');
+    expect(result).not.toMatch(/import.*ButtonEngine/);
+    expect(result).not.toMatch(/inject\(ButtonEngine\)/);
+  });
+
+  it('injects engine version into blueprint header', () => {
+    const result = renderTemplate('button.blueprint.ts.hbs', {
+      engineVersion: '1.2.3',
+      blueprintSchemaVersion: '2.0.0',
+    });
+    expect(result).toContain('1.2.3');
+    expect(result).toContain('2.0.0');
+  });
+
+  it('skin template includes all variants including brand', () => {
+    const result = renderTemplate('button.skin.ts.hbs', {
+      engineVersion: '0.1.0',
+      blueprintSchemaVersion: '1.0.0',
+    });
+    expect(result).toContain('solid');
+    expect(result).toContain('outline');
+    expect(result).toContain('ghost');
+    expect(result).toContain('brand');
+  });
+});

package/src/utils/eject-merger.ts

@@ -0,0 +1,149 @@
+import { Project, SourceFile } from "ts-morph";
+
+export function mergeForEject(
+  component: string,
+  blueprintContent: string,
+  skinContent: string
+): string {
+  try {
+    const project = new Project({ useInMemoryFileSystem: true });
+
+    const blueprintFile = project.createSourceFile(
+      "blueprint.ts",
+      blueprintContent
+    );
+
+    const componentClass = blueprintFile.getClass(
+      `${capitalize(component)}Component`
+    );
+
+    if (!componentClass) {
+      return structuredFallback(component, blueprintContent, skinContent);
+    }
+
+    const date = new Date().toISOString().split("T")[0];
+    const lines: string[] = [
+      `// Ejected from Trine on ${date}.`,
+      `// This component is no longer managed by trine sync.`,
+      `// @trine/engine is still required as a dependency.`,
+      "",
+    ];
+
+    const imports = collectImports(blueprintFile);
+    lines.push(...imports);
+
+    lines.push("");
+    lines.push("@Component({");
+
+    const decoratorProps = extractDecoratorProps(componentClass, component);
+    lines.push(...decoratorProps);
+
+    lines.push("})");
+    lines.push(`export class ${capitalize(component)}Component {`);
+    lines.push("");
+    lines.push(`  protected engine = inject(${capitalize(component)}Engine);`);
+    lines.push(`  protected skin = inject(${capitalize(component)}Skin);`);
+    lines.push("}");
+    lines.push("");
+
+    return lines.join("\n");
+  } catch {
+    return structuredFallback(component, blueprintContent, skinContent);
+  }
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function collectImports(
+  blueprintFile: SourceFile
+): string[] {
+  const imports: string[] = [];
+
+  imports.push(
+    `import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';`
+  );
+
+  const engineImport = blueprintFile
+    .getImportDeclarations()
+    .find((imp) =>
+      imp.getModuleSpecifier().getText().match(/@trine(ui)?\/engine/)
+    );
+
+  if (engineImport) {
+    imports.push(engineImport.getText().replace(/"/g, "'"));
+  }
+
+  blueprintFile.getImportDeclarations().forEach((imp) => {
+    const moduleName = imp.getModuleSpecifier().getText();
+    if (
+      moduleName.includes("class-variance-authority")
+    ) {
+      imports.push(imp.getText());
+    }
+    if (
+      moduleName.includes("./") && moduleName.includes(".skin")
+    ) {
+      imports.push(imp.getText());
+    }
+  });
+
+  return imports;
+}
+
+function extractDecoratorProps(
+  componentClass: NonNullable<ReturnType<SourceFile["getClass"]>>,
+  component: string
+): string[] {
+  const props: string[] = [];
+  props.push(`  selector: "ui-${component}",`);
+  props.push("  standalone: true,");
+
+  const decoratorSource = componentClass.getText();
+  const templateMatch = decoratorSource.match(/template:\s*`[^`]*`/s);
+  if (templateMatch) {
+    props.push(`  ${templateMatch[0]},`);
+  }
+
+  const cdMatch = decoratorSource.match(/changeDetection:\s*ChangeDetectionStrategy\.\w+/);
+  if (cdMatch) {
+    props.push(`  ${cdMatch[0]},`);
+  }
+
+  const hostMatch = decoratorSource.match(/host:\s*\{[\s\S]*?\n\s*\}/);
+  if (hostMatch) {
+    props.push(`  ${hostMatch[0]},`);
+  }
+
+  const hostDirectivesMatch = decoratorSource.match(/hostDirectives:\s*\[[\s\S]*?\n\s*\]/);
+  if (hostDirectivesMatch) {
+    props.push(`  ${hostDirectivesMatch[0]},`);
+  }
+
+  const providersMatch = decoratorSource.match(/providers:\s*\[[\s\S]*?\n\s*\]/);
+  if (providersMatch) {
+    props.push(`  ${providersMatch[0]},`);
+  }
+
+  return props;
+}
+
+function structuredFallback(
+  _component: string,
+  blueprintContent: string,
+  skinContent: string
+): string {
+  const date = new Date().toISOString().split("T")[0];
+  return [
+    `// Ejected from Trine on ${date}.`,
+    `// ts-morph merge failed — using structured fallback.`,
+    `// Merge manually using the sections below.`,
+    "",
+    `// ===== BLUEPRINT =====`,
+    blueprintContent,
+    "",
+    `// ===== SKIN =====`,
+    skinContent,
+  ].join("\n\n");
+}

package/src/utils/hash.ts

@@ -0,0 +1,43 @@
+import { createHash } from 'crypto';
+
+export function normalizeContent(content: string): string {
+  let normalized = content
+    .replace(/\/\/.*$/gm, '')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/'([^']*)'/g, '"$1"')
+    .replace(/`[^`]*`/g, '``')
+    .replace(/\s+/g, ' ');
+  
+  normalized = normalized
+    .replace(/,\s*}/g, '}')
+    .replace(/,\s*]/g, ']')
+    .replace(/,\s*\)/g, ')')
+    .replace(/\[\s*/g, '[')
+    .replace(/\s*\]/g, ']')
+    .replace(/\(\s*/g, '(')
+    .replace(/\s+\)/g, ')')
+    .replace(/{\s*/g, '{')
+    .replace(/\s*}/g, '}')
+    .replace(/{\s+}/g, '{}')
+    .replace(/\[\s+\]/g, '[]')
+    .replace(/\(\s+\)/g, '()')
+    .replace(/,\s*/g, ',')
+    .replace(/:\s*/g, ':');
+  
+  const statements = normalized
+    .split(';')
+    .map(s => s.trim())
+    .filter(s => s.length > 0);
+  
+  const importStatements = statements.filter(s => s.startsWith('import'));
+  const otherStatements = statements.filter(s => !s.startsWith('import'));
+  
+  importStatements.sort((a, b) => a.localeCompare(b));
+  
+  return [...importStatements, ...otherStatements].join('; ') + ';';
+}
+
+export function computeNormalizedHash(content: string): string {
+  const normalized = normalizeContent(content);
+  return 'sha256-normalized:' + createHash('sha256').update(normalized).digest('hex');
+}

package/src/utils/manifest.ts

@@ -0,0 +1,43 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { TrineManifest } from '../types/manifest.js';
+
+const TRINE_DIR = '.trine';
+const MANIFEST_FILE = 'manifest.json';
+
+function getManifestPath(projectRoot: string): string {
+  return resolve(projectRoot, TRINE_DIR, MANIFEST_FILE);
+}
+
+export function readManifest(projectRoot: string): TrineManifest | null {
+  const manifestPath = getManifestPath(projectRoot);
+  
+  if (!existsSync(manifestPath)) {
+    return null;
+  }
+
+  try {
+    const content = readFileSync(manifestPath, 'utf-8');
+    return JSON.parse(content) as TrineManifest;
+  } catch {
+    return null;
+  }
+}
+
+export function writeManifest(manifest: TrineManifest, projectRoot: string): void {
+  const manifestPath = getManifestPath(projectRoot);
+  const dir = dirname(manifestPath);
+
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+
+  writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf-8');
+}
+
+export function createDefaultManifest(): TrineManifest {
+  return {
+    'trine-spec': '1.0',
+    components: {},
+  };
+}

package/src/utils/template.ts

@@ -0,0 +1,26 @@
+import Handlebars from 'handlebars';
+import { readFileSync, existsSync } from 'fs';
+import { resolve } from 'path';
+
+function findMonorepoRoot(cwd: string): string {
+  let dir = cwd;
+  for (;;) {
+    if (existsSync(resolve(dir, 'pnpm-workspace.yaml'))) {
+      return dir;
+    }
+    const parent = resolve(dir, '..');
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return cwd;
+}
+
+const monorepoRoot = findMonorepoRoot(process.cwd());
+const templatesDir = resolve(monorepoRoot, 'packages/cli/templates');
+
+export function renderTemplate(templateName: string, context: object): string {
+  const templatePath = resolve(templatesDir, templateName);
+  const templateSource = readFileSync(templatePath, 'utf-8');
+  const template = Handlebars.compile(templateSource);
+  return template(context);
+}

package/templates/button.blueprint.ts.hbs

@@ -0,0 +1,41 @@
+// @trine-generated
+// @trine-version: {{engineVersion}}
+// @trine-schema: {{blueprintSchemaVersion}}
+import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import { ButtonEngine } from '@trineui/engine/button';
+import { ButtonSkin } from './button.skin';
+import { BUTTON_STYLING_CONTRACT } from '@trineui/engine/button';
+
+@Component({
+  selector: 'ui-button',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: ButtonEngine,
+      inputs: ['variant', 'size', 'disabled', 'loading'],
+      outputs: ['pressed'],
+    },
+  ],
+  providers: [
+    ButtonSkin,
+    {
+      provide: BUTTON_STYLING_CONTRACT,
+      useExisting: ButtonEngine,
+    },
+  ],
+  template: `
+    @if (engine.loading()) {
+      <span class="animate-spin mr-2">⏳</span>
+    }
+    <ng-content />
+  `,
+  host: {
+    '[class]': 'skin.classes()',
+    '[attr.data-state]': 'engine.state()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent {
+  protected engine = inject(ButtonEngine);
+  protected skin = inject(ButtonSkin);
+}

package/templates/button.skin.ts.hbs

@@ -0,0 +1,35 @@
+import { Injectable, inject, computed } from '@angular/core';
+import { cva } from 'class-variance-authority';
+import { BUTTON_STYLING_CONTRACT } from '@trineui/engine/button';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center font-semibold transition-all duration-200',
+  {
+    variants: {
+      variant: {
+        solid:   'bg-primary text-white shadow-md hover:-translate-y-px',
+        outline: 'border-2 border-primary text-primary hover:bg-primary hover:text-white',
+        ghost:   'text-primary hover:bg-primary/10',
+        brand:   'bg-gradient-to-r from-violet-600 to-pink-500 text-white shadow-lg hover:-translate-y-px',
+      },
+      size: {
+        sm: 'h-8 px-3 text-xs rounded-lg',
+        md: 'h-10 px-5 text-sm rounded-xl',
+        lg: 'h-12 px-7 text-base rounded-2xl',
+      },
+    },
+    defaultVariants: { variant: 'solid', size: 'md' },
+  }
+);
+
+@Injectable()
+export class ButtonSkin {
+  private contract = inject(BUTTON_STYLING_CONTRACT);
+
+  readonly classes = computed(() =>
+    buttonVariants({
+      variant: this.contract.variant(),
+      size:    this.contract.size(),
+    })
+  );
+}

package/templates/checkbox.blueprint.ts.hbs

@@ -0,0 +1,57 @@
+// @trine-generated
+// @trine-version: {{engineVersion}}
+// @trine-schema: {{blueprintSchemaVersion}}
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CheckboxEngine } from '@trineui/engine/checkbox';
+import { CheckboxSkin } from './checkbox.skin';
+import { CHECKBOX_STYLING_CONTRACT } from '@trineui/engine/checkbox';
+
+@Component({
+  selector: 'ui-checkbox',
+  standalone: true,
+  providers: [
+    CheckboxEngine,
+    {
+      provide: CHECKBOX_STYLING_CONTRACT,
+      useExisting: CheckboxEngine,
+    },
+  ],
+  template: `
+    <button
+      type="button"
+      role="checkbox"
+      class="checkbox-host"
+      [attr.aria-checked]="engine.ariaChecked()"
+      [attr.aria-disabled]="engine.ariaDisabled()"
+      [attr.aria-required]="engine.ariaRequired()"
+      [attr.data-state]="engine.checkboxState()"
+      [disabled]="engine.disabled()"
+      (click)="engine.toggle()"
+      (keydown.space)="$event.preventDefault(); engine.toggle()"
+    >
+      <span class="checkbox-indicator" [attr.data-state]="engine.checkboxState()">
+        @if (engine.checkboxState() === 'checked') {
+          <svg class="checkbox-icon" viewBox="0 0 16 16" fill="none">
+            <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        }
+        @if (engine.checkboxState() === 'indeterminate') {
+          <svg class="checkbox-icon" viewBox="0 0 16 16" fill="none">
+            <path d="M4 8H12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        }
+      </span>
+      <span class="checkbox-label">
+        <ng-content></ng-content>
+      </span>
+    </button>
+  `,
+  host: {
+    '[class]': 'skin.classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckboxComponent {
+  protected engine = inject(CheckboxEngine);
+  protected skin = inject(CheckboxSkin);
+}

package/templates/checkbox.skin.ts.hbs

@@ -0,0 +1,44 @@
+// @trine-owned
+// DO NOT EDIT — owned by user, never synced
+import { cva } from 'class-variance-authority';
+import { inject, Injectable } from '@angular/core';
+import { CHECKBOX_STYLING_CONTRACT, CheckboxStylingContract, CheckboxState } from '@trineui/engine/checkbox';
+
+@Injectable()
+export class CheckboxSkin {
+  private contract = inject(CHECKBOX_STYLING_CONTRACT);
+
+  private checkboxVariants = cva('checkbox-base', {
+    variants: {
+      state: {
+        unchecked: 'checkbox-unchecked',
+        checked: 'checkbox-checked',
+        indeterminate: 'checkbox-indeterminate',
+      },
+      disabled: {
+        true: 'checkbox-disabled',
+      },
+    },
+    compoundVariants: [
+      {
+        state: 'checked',
+        disabled: true,
+        class: 'checkbox-checked-disabled',
+      },
+      {
+        state: 'indeterminate',
+        disabled: true,
+        class: 'checkbox-indeterminate-disabled',
+      },
+    ],
+    defaultVariants: {
+      state: 'unchecked',
+    },
+  });
+
+  classes(): string {
+    const state = this.contract.checkboxState();
+    const disabled = this.contract.disabled();
+    return this.checkboxVariants({ state, disabled });
+  }
+}