@trineui/cli 0.1.0-beta.1 → 0.1.0

package/src/utils/eject-merger.ts

@@ -1,149 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,41 +0,0 @@
-// @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

@@ -1,35 +0,0 @@
-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

@@ -1,57 +0,0 @@
-// @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

@@ -1,44 +0,0 @@
-// @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 });
-  }
-}

package/templates/dialog.blueprint.ts.hbs

@@ -1,61 +0,0 @@
-// @trine-generated
-// @trine-version: {{engineVersion}}
-// @trine-schema: {{blueprintSchemaVersion}}
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { DialogEngine } from '@trineui/engine/dialog';
-import { DialogSkin } from './dialog.skin';
-import { DIALOG_STYLING_CONTRACT } from '@trineui/engine/dialog';
-
-@Component({
-  selector: 'ui-dialog',
-  standalone: true,
-  providers: [
-    DialogEngine,
-    {
-      provide: DIALOG_STYLING_CONTRACT,
-      useExisting: DialogEngine,
-    },
-  ],
-  template: `
-    <ng-template #dialogContent>
-      <div
-        class="dialog-panel"
-        role="dialog"
-        aria-modal="true"
-        [attr.aria-labelledby]="titleId"
-        [attr.data-state]="engine.dialogState()"
-      >
-        <ng-content select="[slot=title]"></ng-content>
-        <ng-content select="[slot=body]"></ng-content>
-        <ng-content select="[slot=footer]"></ng-content>
-      </div>
-    </ng-template>
-  `,
-  host: {
-    '[class]': 'skin.classes()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DialogComponent {
-  protected engine = inject(DialogEngine);
-  protected skin = inject(DialogSkin);
-  protected vcr = inject(ViewContainerRef);
-  protected titleId = `dialog-title-${Math.random().toString(36).slice(2)}`;
-
-  @ViewChild('dialogContent') dialogContent: any;
-
-  open(): void {
-    this.engine.setViewContainerRef(this.vcr);
-    this.engine.open(this.dialogContent);
-  }
-
-  close(): void {
-    this.engine.close();
-  }
-}

package/templates/dialog.skin.ts.hbs

@@ -1,27 +0,0 @@
-// @trine-owned
-// DO NOT EDIT — owned by user, never synced
-import { cva } from 'class-variance-authority';
-import { inject, Injectable } from '@angular/core';
-import { DIALOG_STYLING_CONTRACT, DialogStylingContract, DialogState } from '@trineui/engine/dialog';
-
-@Injectable()
-export class DialogSkin {
-  private contract = inject(DIALOG_STYLING_CONTRACT);
-
-  private dialogVariants = cva('dialog-base', {
-    variants: {
-      state: {
-        open: 'dialog-open',
-        closed: 'dialog-closed',
-      },
-    },
-    defaultVariants: {
-      state: 'closed',
-    },
-  });
-
-  classes(): string {
-    const state = this.contract.dialogState();
-    return this.dialogVariants({ state });
-  }
-}

package/templates/input.blueprint.ts.hbs

@@ -1,83 +0,0 @@
-// @trine-generated
-// @trine-version: {{engineVersion}}
-// @trine-schema: {{blueprintSchemaVersion}}
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { InputEngine } from '@trineui/engine/input';
-import { InputSkin } from './input.skin';
-import { INPUT_STYLING_CONTRACT } from '@trineui/engine/input';
-
-@Component({
-  selector: 'ui-input',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: InputEngine,
-      inputs: ['value', 'disabled', 'readonly', 'required', 'placeholder', 'errorMessage'],
-      outputs: ['valueChange'],
-    },
-  ],
-  providers: [
-    InputSkin,
-    {
-      provide: INPUT_STYLING_CONTRACT,
-      useExisting: InputEngine,
-    },
-  ],
-  template: `
-    <div class="input-wrapper" [attr.data-state]="engine.inputState()">
-      @if (engine.hasPrefix()) {
-        <div class="input-prefix">
-          <ng-content select="[slot=prefix]"></ng-content>
-        </div>
-      }
-
-      <input
-        class="input-field"
-        [value]="engine.value()"
-        [disabled]="engine.disabled()"
-        [readOnly]="engine.readonly()"
-        [placeholder]="engine.placeholder()"
-        [attr.aria-invalid]="engine.ariaInvalid()"
-        [attr.aria-required]="engine.ariaRequired()"
-        [attr.aria-describedby]="hintId"
-        (input)="onInput($event)"
-        (focus)="engine.isFocused.set(true)"
-        (blur)="onBlur()"
-      />
-
-      @if (engine.hasSuffix()) {
-        <div class="input-suffix">
-          <ng-content select="[slot=suffix]"></ng-content>
-        </div>
-      }
-    </div>
-
-    @if (engine.hasHint() || engine.isInvalid()) {
-      <div [id]="hintId" class="input-hint">
-        <ng-content select="[slot=hint]"></ng-content>
-        @if (engine.isInvalid() && engine.errorMessage()) {
-          <span class="input-error">\{{ engine.errorMessage() }}</span>
-        }
-      </div>
-    }
-  `,
-  host: {
-    '[class]': 'skin.classes()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class InputComponent {
-  protected engine = inject(InputEngine);
-  protected skin = inject(InputSkin);
-  protected hintId = `input-hint-${Math.random().toString(36).slice(2)}`;
-
-  onInput(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    this.engine.value.set(target.value);
-  }
-
-  onBlur(): void {
-    this.engine.isFocused.set(false);
-    this.engine.markTouched();
-  }
-}

package/templates/input.skin.ts.hbs

@@ -1,29 +0,0 @@
-// @trine-owned
-// DO NOT EDIT — owned by user, never synced
-import { cva } from 'class-variance-authority';
-import { inject, Injectable } from '@angular/core';
-import { INPUT_STYLING_CONTRACT, InputStylingContract, InputState } from '@trineui/engine/input';
-
-@Injectable()
-export class InputSkin {
-  private contract = inject(INPUT_STYLING_CONTRACT);
-
-  private inputVariants = cva('input-field-base', {
-    variants: {
-      state: {
-        idle: 'input-idle',
-        focused: 'input-focused',
-        error: 'input-error',
-        disabled: 'input-disabled',
-      },
-    },
-    defaultVariants: {
-      state: 'idle',
-    },
-  });
-
-  classes(): string {
-    const state = this.contract.inputState();
-    return this.inputVariants({ state });
-  }
-}