@wink-ai/unisim-ui

Unified UI definitions, component contracts, topology helpers, and dual-mode Vite build presets for Wink-AI peripherals.

Installation

npm install -D @wink-ai/unisim-ui @wink-ai/unisim vue

Quick Start (Authoring a Peripheral)

1. UI Definition (src/definition.ts)

import { definePeripheral, type PeripheralDefinition } from '@wink-ai/unisim-ui';
import CanvasGlyph from './CanvasGlyph.vue';
import WorldWidget from './WorldWidget.vue';

export default definePeripheral({
  type: 'led',
  size: { width: 50, height: 60 },
  wireColor: '#00ff88',
  pinsOverlay: {
    A: { relX: 10, relY: 55, wireNet: 'primary' },
    C: { relX: 40, relY: 55, wireNet: 'gnd' },
  },
  props: {
    color: {
      type: 'string',
      default: 'red',
      description: 'LED Color',
      options: ['red', 'green', 'blue', 'yellow', 'white'],
    },
    brightness: { type: 'number', default: 1.0, description: 'Brightness (0-1)' },
  },
  canvas: CanvasGlyph,
  world: WorldWidget,
});

2. UI Build Preset (vite.config.ts)

import { definePeripheralUiConfig } from '@wink-ai/unisim-ui/vite';

export default definePeripheralUiConfig({ type: 'led' });

3. Simulation Build Preset (vite.config.sim.ts)

import { definePeripheralSimConfig } from '@wink-ai/unisim-ui/vite';

export default definePeripheralSimConfig({ type: 'led' });

Host CSS Scoping Contract

Hosts render peripheral components within a container with .wink-peripheral-${type}:

<div :class="'wink-peripheral-' + peripheralType">
  <component :is="definition.canvas.component" />
</div>