vibe-preview-ui

Interactive preview shell with annotation overlay, dev handoff, and deploy panel for Azure Fluent prototypes.

Install

npm install vibe-preview-ui

Peer dependencies

npm install react react-dom @fluentui/react-components @fluentui/react-icons

Usage

PlaygroundShell

Wrap your prototype screens in PlaygroundShell to get a full preview experience with version switching, screen flow navigation, annotation overlay, dark/light/high-contrast modes, and dev handoff.

import { PlaygroundShell } from 'vibe-preview-ui';
import type { ExperimentVersion } from 'vibe-preview-ui';

const versions: ExperimentVersion[] = [
  {
    key: 'main',
    label: 'Main',
    screens: {
      Overview: () => <div>Overview screen</div>,
      Details: () => <div>Details screen</div>,
    },
    flow: ['Overview', 'Details'],
  },
];

function App() {
  return <PlaygroundShell versions={versions} />;
}

Vite Plugin

The vibeMetaPlugin Vite plugin scans your source at build time and emits a meta.json with component usage, token usage, and source files.

// vite.config.ts
import { defineConfig } from 'vite';
import { vibeMetaPlugin } from 'vibe-preview-ui/plugin';

export default defineConfig({
  plugins: [
    vibeMetaPlugin({ root: './src/experiments/my-prototype' }),
  ],
});

Components

| Export | Description | |---|---| | PlaygroundShell | Full preview shell with toolbar, screen nav, and side panels | | AnnotationOverlay | Pin annotations on any UI with agent identity and threading | | DevHandoff | Source code viewer with schema and dependency info | | DeployPanel | Azure Static Web Apps deploy flow | | ReactGrab | Inspect and grab React component props from rendered UI |

Types

All prop types and data interfaces are fully exported. See src/index.ts for the complete public API.

Development

npm install
npm run build       # one-shot build
npm run dev         # watch mode

Publishing

npm version patch   # or minor / major
npm publish

License

MIT