Vite & TypeScript Starter

1. Create a New Vite + TypeScript Project

# Create project
npm create vite@latest my-docking-app -- --template vanilla-ts

# Enter directory and install dependencies
cd my-docking-app
npm install strelit-ui-kit
npm run dev

2. Set Up the Layout in src/main.ts

Import StrelitLayout and its configuration types directly from the package:

import {
  StrelitLayout,
  LayoutConfig,
  ComponentContainer,
  ComponentItemConfig,
} from 'strelit-ui-kit';
import 'strelit-ui-kit/dist/css/strelit-base.css';
import 'strelit-ui-kit/dist/css/themes/strelit-dark-theme.css';
import './style.css';

// Type-safe layout configuration adhering to LayoutConfig
const config: LayoutConfig = {
  header: {
    show: 'top',
    popout: 'Open in Popout Window',
    maximise: 'Maximise Tab',
    close: 'Close Tab',
  },
  dimensions: {
    borderWidth: 5,
    borderGrabWidth: 5,
    defaultMinItemHeight: '120px',
    defaultMinItemWidth: '180px',
    headerHeight: 32,
  },
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'editorPanel',
        title: 'Source Code',
        size: '60%',
        componentState: { initialCode: 'console.log("Hello Strelit!");' },
      },
      {
        type: 'column',
        size: '40%',
        content: [
          {
            type: 'component',
            componentType: 'terminalPanel',
            title: 'Output Terminal',
          },
          {
            type: 'component',
            componentType: 'metricsPanel',
            title: 'Telemetry',
          },
        ],
      },
    ],
  },
};

const appRoot = document.getElementById('app');
if (!appRoot) throw new Error('Missing #app mount target');

// 1. Initialize StrelitLayout on mount target
const layout = new StrelitLayout(appRoot);

// 2. Register components with full native DOM access
layout.registerComponentFactoryFunction(
  'editorPanel',
  (container: ComponentContainer, itemConfig) => {
    const el = container.element;
    const state = (itemConfig.componentState as { initialCode?: string }) || {};
    el.innerHTML = `
    <div class="panel-inner">
      <h3>Code Editor</h3>
      <textarea class="code-area">${state.initialCode || ''}</textarea>
    </div>
  `;
  }
);

layout.registerComponentFactoryFunction('terminalPanel', (container: ComponentContainer) => {
  container.element.innerHTML = `<div class="panel-inner"><pre>[Ready] Vite HMR active.</pre></div>`;
});

layout.registerComponentFactoryFunction('metricsPanel', (container: ComponentContainer) => {
  container.element.innerHTML = `<div class="panel-inner"><p>Memory: 42MB | FPS: 60</p></div>`;
});

// 3. Load layout
layout.loadLayout(config);

// 4. Responsive auto-resizing
window.addEventListener('resize', () => layout.updateRootSize());

3. Fullscreen Workspace Styling (src/style.css)

Ensure the root HTML, body, and mount point stretch to 100% of the viewport:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1220;
  color: #f0f4f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.panel-inner {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-area {
  flex: 1;
  width: 100%;
  background: #070c16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #38bdf8;
  padding: 12px;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  border-radius: 6px;
  resize: none;
}

4. Production Build

When ready to ship, build an optimized production bundle with tree-shaken assets:

npm run build