@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.10",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -9,65 +9,58 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.es.js"
     },
-    "./styles/tokens.css": {
-      "default": "./dist/styles/tokens.css"
+    "./themes/light.css": {
+      "default": "./dist/themes/light.css"
     },
-    "./styles/core.css": {
-      "default": "./dist/styles/core.css"
+    "./themes/dark.css": {
+      "default": "./dist/themes/dark.css"
+    },
+    "./base.css": {
+      "default": "./dist/base.css"
     },
     "./selfie": {
-      "types": "./dist/types/selfie/selfie.d.ts",
+      "types": "./dist/types/selfie.d.ts",
       "import": "./dist/selfie/selfie.es.js"
     },
     "./selfie/styles.css": {
       "default": "./dist/selfie/styles.css"
     },
     "./phone": {
-      "types": "./dist/types/phone/phone.d.ts",
+      "types": "./dist/types/phone.d.ts",
       "import": "./dist/phone/phone.es.js"
     },
     "./phone/styles.css": {
       "default": "./dist/phone/styles.css"
     },
     "./email": {
-      "types": "./dist/types/email/email.d.ts",
+      "types": "./dist/types/email.d.ts",
       "import": "./dist/email/email.es.js"
     },
     "./email/styles.css": {
       "default": "./dist/email/styles.css"
     },
     "./flow": {
-      "types": "./dist/types/flow/flow.d.ts",
+      "types": "./dist/types/flow.d.ts",
       "import": "./dist/flow/flow.es.js"
     },
     "./flow/styles.css": {
       "default": "./dist/flow/styles.css"
     }
   },
-  "scripts": {
-    "dev": "vite",
-    "build:dev": "vite build --watch",
-    "prebuild": "bun run ../../scripts/generate-asset-manifest.ts",
-    "build": "vite build",
-    "test": "vitest run",
-    "coverage": "vitest run --coverage",
-    "lint": "biome lint .",
-    "format": "biome format . --write",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
-  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "@incodetech/core": "workspace:*",
     "@tailwindcss/vite": "^4.1.17",
     "i18next": "^25.7.1",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "libphonenumber-js": "^1.11.0",
     "preact-custom-element": "^4.6.0",
-    "tailwindcss": "^4.1.17"
+    "tailwindcss": "^4.1.17",
+    "@incodetech/core": "2.0.0-alpha.10"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.7",
-    "@incodetech/config": "workspace:*",
     "@preact/preset-vite": "^2.10.2",
     "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/preact": "^3.2.4",
@@ -80,6 +73,19 @@
     "typescript": "^5.9.3",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.13"
+    "vitest": "^4.0.13",
+    "@incodetech/config": "1.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:dev": "vite build --watch",
+    "build": "vite build",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   }
-}
+}

package/dev/README.md

@@ -1,163 +0,0 @@
-# UI Dev Demos
-
-This folder contains various demo files to test and demonstrate different integration patterns for the Incode Web SDK.
-
-## Running the Demos
-
-```bash
-cd packages/ui
-pnpm dev
-```
-
-Then open the landing page at `/dev/index.html` to see all available demos.
-
-### Landing Page
-
-The landing page (`/dev/index.html`) provides:
-- Overview of all integration patterns
-- Config ID input field (persisted to localStorage)
-- Quick links to each demo with configId passed as query parameter
-
----
-
-## Demo Scenarios
-
-### 1. Simplified Flow (`/dev/simplified.html`)
-
-**Files:** `simplified.html`, `main-simplified.tsx`
-
-**Pattern:** Drop-in `<incode-flow>` web component
-
-**Best for:** Customers who want the simplest integration with minimal code.
-
-```html
-<incode-flow id="flow"></incode-flow>
-
-<script type="module">
-  import '@incodetech/ui/flow';
-
-  const flow = document.getElementById('flow');
-  flow.token = 'your-session-token';
-  flow.onComplete = (result) => {
-    console.log('Done!', result);
-  };
-</script>
-```
-
-**What it demonstrates:**
-- Single web component handles everything
-- No manual flow management needed
-- Automatic module orchestration
-
----
-
-### 2. Orchestrated Flow with Custom UI (`/dev/orchestrated-flow.html`)
-
-**Files:** `orchestrated-flow.html`, `main-orchestrated-flow.tsx`
-
-**Pattern:** `createOrchestratedFlowManager` with custom UI components
-
-**Best for:** Customers who want orchestration benefits but need custom UI.
-
-```tsx
-const [state, flowManager] = useManager(() =>
-  createOrchestratedFlowManager({
-    modules: { PHONE: phoneMachine },
-  })
-);
-
-// Render your own UI, signal completion when done
-<Phone
-  config={config}
-  onFinish={() => flowManager.completeModule()}
-/>
-```
-
-**What it demonstrates:**
-- Using the orchestrator directly
-- Custom UI rendering based on flow state
-- Signaling module completion with `completeModule()`
-- Access to `finishStatus` when flow completes
-
----
-
-### 3. Manual Flow Control (`/dev/manual.html`)
-
-**Files:** `manual.html`, `main-web-component.tsx`
-
-**Pattern:** `createFlowManager` with manual `nextStep()` calls
-
-**Best for:** Legacy pattern or customers needing full manual control.
-
-```tsx
-const [state, flowManager] = useManager(() => createFlowManager());
-
-// Manually advance the flow
-<Phone
-  config={config}
-  onFinish={() => flowManager.nextStep()}
-/>
-```
-
-**What it demonstrates:**
-- Original flow manager (non-orchestrated)
-- Manual step advancement
-- Full control over flow progression
-
----
-
-### 4. Headless Demo (`/dev/headless.html`)
-
-**Files:** `headless.html`, `main-headless.tsx`
-
-**Pattern:** Core SDK only, custom vanilla UI
-
-**Best for:** Customers building completely custom UIs (React, Vue, vanilla JS, etc.)
-
-```ts
-import { createPhoneManager } from '@incodetech/core/phone';
-
-const manager = createPhoneManager({ config });
-
-// Subscribe to state changes
-manager.subscribe((state) => {
-  // Render your own UI based on state
-  renderCustomUI(state);
-});
-
-// Call manager methods
-manager.setPhoneNumber('+1234567890', true);
-manager.submit();
-```
-
-**What it demonstrates:**
-- Using Core SDK without any Incode UI components
-- Building custom UI with vanilla JavaScript (or any framework)
-- Full state machine visibility and control
-- Manager pattern API
-
----
-
-## Comparison Chart
-
-| Demo | Flow Manager | UI Components | Complexity | Use Case |
-|------|--------------|---------------|------------|----------|
-| Simplified | Orchestrated (internal) | `<incode-flow>` | ⭐ Lowest | Drop-in integration |
-| Orchestrated | `createOrchestratedFlowManager` | Incode UI | ⭐⭐ Medium | Custom flow, Incode UI |
-| Manual | `createFlowManager` | Incode UI | ⭐⭐⭐ Higher | Full manual control |
-| Headless | None | Custom | ⭐⭐⭐⭐ Highest | Fully custom UI |
-
----
-
-## Architecture Layers
-
-All demos follow the three-layer architecture:
-
-```
-Layer 2 (UI)     → Preact components, CSS, web components
-Layer 1 (Core)   → State machines, managers, business logic
-Layer 0 (Infra)  → Browser APIs, WASM, utilities
-```
-
-See `/docs/ARCHITECTURE_GOALS.md` for full details.
-

package/dev/getToken.ts

@@ -1,36 +0,0 @@
-// this never will be export or use in production, this is for development purposes only
-
-const DEFAULT_CONFIG_ID = '67ddc65d36b9814a930c4dff';
-
-export function getConfigIdFromUrl(): string {
-  const params = new URLSearchParams(window.location.search);
-  return params.get('configId') ?? DEFAULT_CONFIG_ID;
-}
-
-type GetTokenOptions = {
-  configId?: string;
-};
-
-export const getToken = async (options: GetTokenOptions = {}) => {
-  const configId = options.configId ?? getConfigIdFromUrl();
-
-  const response = await fetch(
-    'https://user-service-k8s.stage.incodetest.com/omni/start',
-    {
-      headers: {
-        'x-api-key': '5fbc0ab5a652b7808fbec42fffd8b4c9ec248413',
-        'api-version': '1.0',
-        'Content-Type': 'application/json',
-        Accept: 'application/json',
-      },
-      body: JSON.stringify({
-        configurationId: configId,
-        uuid: null,
-        interviewId: null,
-        language: 'en-US',
-      }),
-      method: 'POST',
-    },
-  );
-  return response.json();
-};