scribe-widget 1.0.0

package/src/styles/widget.css

@@ -0,0 +1,495 @@
+:host {
+  all: initial;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.scribe-panel {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  z-index: 2147483647;
+  overflow: hidden;
+  min-width: 320px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #eee;
+  cursor: grab;
+}
+
+.panel-header:active {
+  cursor: grabbing;
+}
+
+.drag-handle {
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  width: 16px;
+  opacity: 0.4;
+}
+
+.drag-handle span {
+  width: 4px;
+  height: 4px;
+  background: #666;
+  border-radius: 50%;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.header-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.header-btn:hover {
+  color: #333;
+}
+
+.header-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.panel-content {
+  padding: 20px 24px;
+}
+
+/* Idle State */
+.idle-state {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  width: 32px;
+  height: 32px;
+}
+
+.logo-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.logo-text {
+  font-size: 20px;
+  font-weight: 600;
+  color: #2563eb;
+}
+
+.start-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.start-btn:hover {
+  background: #1d4ed8;
+}
+
+.start-btn:disabled {
+  background: #93c5fd;
+  cursor: not-allowed;
+}
+
+.mic-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.mic-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Recording State */
+.recording-state {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.recording-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #666;
+}
+
+.recording-icon {
+  width: 24px;
+  height: 24px;
+  color: #666;
+}
+
+.recording-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.recording-icon.active {
+  color: #ef4444;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.timer {
+  font-size: 20px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: #374151;
+}
+
+.recording-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.resume-btn {
+  background: white;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.resume-btn:hover {
+  background: #eff6ff;
+}
+
+.pause-btn {
+  background: white;
+  color: #f59e0b;
+  border: 2px solid #f59e0b;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.pause-btn:hover {
+  background: #fffbeb;
+}
+
+.stop-btn {
+  background: #ef4444;
+  color: white;
+  border: none;
+  padding: 10px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.stop-btn:hover {
+  background: #dc2626;
+}
+
+.stop-icon {
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 2px;
+}
+
+/* Processing State */
+.processing-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.processing-text {
+  color: #6b7280;
+  font-size: 14px;
+}
+
+/* Results State */
+.results-state {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 400px;
+}
+
+.results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.results-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.new-recording-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.new-recording-btn:hover {
+  background: #1d4ed8;
+}
+
+.results-content {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
+.transcript-section {
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.transcript-text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #374151;
+  background: #f9fafb;
+  padding: 12px;
+  border-radius: 8px;
+  white-space: pre-wrap;
+}
+
+/* Error State */
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  text-align: center;
+}
+
+.error-icon {
+  width: 48px;
+  height: 48px;
+  color: #ef4444;
+}
+
+.error-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.error-message {
+  color: #ef4444;
+  font-size: 14px;
+}
+
+.retry-btn {
+  background: #ef4444;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.retry-btn:hover {
+  background: #dc2626;
+}
+
+/* Permission Request */
+.permission-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  text-align: center;
+}
+
+.permission-icon {
+  width: 48px;
+  height: 48px;
+  color: #2563eb;
+}
+
+.permission-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.permission-text {
+  color: #374151;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.permission-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.permission-btn:hover {
+  background: #1d4ed8;
+}
+
+/* Config State */
+.config-state {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.config-state .logo {
+  justify-content: center;
+}
+
+.config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.config-form .form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.config-form label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+}
+
+.config-form input {
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #111827;
+  background: #fff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.config-form input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.config-form input::placeholder {
+  color: #9ca3af;
+}
+
+.config-error {
+  color: #ef4444;
+  font-size: 13px;
+  margin: 0;
+}
+
+.config-submit-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-top: 4px;
+}
+
+.config-submit-btn:hover {
+  background: #1d4ed8;
+}

package/src/types.ts

@@ -0,0 +1,14 @@
+import { GetSessionStatusResponse } from 'med-scribe-alliance-ts-sdk';
+
+export type WidgetState = 'idle' | 'permission' | 'recording' | 'paused' | 'processing' | 'results' | 'error';
+
+export interface ScribeWidgetConfig {
+  apiKey: string;
+  baseUrl: string;
+  templates?: string[];
+  languageHint?: string[];
+  position?: { bottom?: number; right?: number; top?: number; left?: number };
+  onResult?: (result: GetSessionStatusResponse) => void;
+  onError?: (error: Error) => void;
+  debug?: boolean;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'EkaScribe',
+      fileName: (format) => `scribe-widget.${format}.js`,
+      formats: ['umd', 'es'],
+    },
+    rollupOptions: {
+      // Don't externalize React - bundle it for standalone use
+      output: {
+        globals: {},
+      },
+    },
+    cssCodeSplit: false,
+    minify: 'terser',
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});