@llms-sdk/representation-ui/src/app.ts

Multi-view representation-driven development UI prototype

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

// Import Shoelace components
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/select/select.js';
import '@shoelace-style/shoelace/dist/components/option/option.js';
import '@shoelace-style/shoelace/dist/components/range/range.js';
import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';

// Import our components
import './components/core/view-orchestrator.js';


/**
 * Main Application Component
 * 
 * Features:
 * - Initializes Shoelace theme
 * - Sets up application-wide styles
 * - Hosts the ViewOrchestrator
 */
@customElement('representation-ui-app')
export class RepresentationUIApp extends LitElement {
  
  static styles = css`
    :host {
      display: block;
      height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Shoelace CSS custom properties */
    :host {
      --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --sl-border-radius-medium: 6px;
      --sl-border-radius-large: 8px;
    }
  `;

  connectedCallback() {
    super.connectedCallback();
    
    // Set Shoelace base path for icons and assets
    import('@shoelace-style/shoelace/dist/utilities/base-path.js').then(({ setBasePath }) => {
      setBasePath('/node_modules/@shoelace-style/shoelace/dist/');
    });
  }

  render() {
    return html`
      <view-orchestrator></view-orchestrator>
    `;
  }
}