synthos 0.8.0 → 0.10.0

package/migration-rules/v2-to-v3.md

@@ -0,0 +1,481 @@
+# SynthOS v2 → v3 Migration Rules
+
+This document covers the migration from SynthOS v2 format to v3 (FluentLM-based).
+
+---
+
+## 1. Theme Migration
+
+### Overview
+
+In v2, theme files (~800 lines each) define **both** CSS custom properties and all shell component styles (chat panel, modals, forms, scrollbars, etc.).
+
+In v3, component styles live in `fluentlm.css`. Theme files **only** override FluentLM palette variables and set semantic color tokens. This brings each theme down to ~170 lines.
+
+### Structure of a v3 Theme File
+
+```
+:root, .theme-class {
+  /* 1. Palette overrides  — rebrand FluentLM's default blue to your theme ramp */
+  /* 2. Semantic tokens     — map palette vars to UI roles (same sections as theme-light/dark.css) */
+}
+```
+
+Zero component CSS. No selectors for `.chat-panel`, `.modal-*`, `.brainstorm-*`, scrollbars, etc.
+
+### Palette Variable Mapping (v2 → v3)
+
+#### Brand / Theme Colors
+
+| v2 variable | v3 palette variable | Notes |
+|---|---|---|
+| `--accent-primary` | `--themePrimary` | Primary brand color |
+| `--accent-secondary` | `--themeDark` | Darker accent |
+| `--accent-tertiary` | `--themeSecondary` | Secondary accent |
+| — | `--themeDarkAlt` | Interpolated from brand ramp |
+| — | `--themeDarker` | Interpolated from brand ramp |
+| — | `--themeTertiary` | Interpolated from brand ramp |
+| — | `--themeLight` | Interpolated from brand ramp |
+| — | `--themeLighter` | Interpolated from brand ramp |
+| — | `--themeLighterAlt` | Interpolated from brand ramp |
+
+#### Neutral Colors — Light Theme
+
+| v2 variable | v3 palette variable | Notes |
+|---|---|---|
+| `--bg-tertiary` | `--neutralLighterAlt` | Lightest background |
+| `--bg-primary` | `--neutralLighter` | Primary background |
+| `--bg-secondary` | `--neutralLight` | Secondary background |
+| `--text-secondary` | `--neutralSecondary` | Secondary text |
+| `--text-primary` | `--neutralPrimary` | Primary text |
+| `--white` | `--white` | White |
+
+#### Neutral Colors — Dark Theme
+
+| v2 variable | v3 palette variable | Notes |
+|---|---|---|
+| `--bg-primary` | `--neutralPrimary` | Dark primary background |
+| `--bg-secondary` | `--neutralDark` | Dark secondary background |
+| `--bg-tertiary` | `--neutralDarker` (custom) | Darkest background |
+| `--text-primary` | `--neutralLighter` | Light text on dark |
+| `--text-secondary` | `--neutralTertiaryAlt` | Secondary text on dark |
+
+### Variables Without FluentLM Equivalents
+
+The following v2 variables have **no** FluentLM palette equivalent. If a page uses them, the page author must define them in a page-level `<style>` block:
+
+| v2 variable | Typical value (Dawn) | Typical value (Dusk) |
+|---|---|---|
+| `--accent-glow` | `rgba(118,75,162,0.15)` | `rgba(138,43,226,0.3)` |
+| `--border-color` | `rgba(118,75,162,0.25)` | `rgba(138,43,226,0.3)` |
+| `--header-min-height` | `58px` | `58px` |
+| `--header-padding-vertical` | `14px` | `14px` |
+| `--header-padding-horizontal` | `20px` | `20px` |
+| `--header-line-height` | `1.25` | `1.25` |
+
+### Semantic Tokens
+
+v3 themes set semantic tokens (e.g. `--bodyBackground`, `--bodyText`, `--link`) by referencing the overridden palette variables. The token assignments follow FluentLM's reference themes:
+
+- **Light themes** → follow `static-files/theme-light.css`
+- **Dark themes** → follow `static-files/theme-dark.css`
+
+### What to Remove
+
+All CSS rules targeting component selectors. The full list from v2 themes that are now handled by `fluentlm.css`:
+
+- Base resets: `*`, `body`, `html`
+- Chat: `.chat-panel`, `.chat-header`, `.chat-messages`, `.chat-message`, etc.
+- Viewer: `.viewer-panel`, `.viewer-panel::before`, `.viewer-panel.full-viewer`
+- Loading: `.loading-overlay`, `.spinner`, `#loadingOverlay`
+- Toggle: `.chat-toggle`, `.chat-toggle-dots`, `.chat-toggle-dot`, etc.
+- Modals: `.modal-overlay`, `.modal-content`, `.modal-header`, etc.
+- Forms: `.form-group`, `.form-label`, `.form-input`, etc.
+- Brainstorm: All `.brainstorm-*` selectors
+- Animations: `@keyframes spin`, `@keyframes nebula-pulse`
+- Scrollbars: All `::-webkit-scrollbar*` rules
+- Attachments: `.attach-btn`, `.attach-menu`, `.attachment-pill*`
+- Save line: `.save-line`, `.save-line-label`
+- Screenshot: `.screenshot-overlay`, `.screenshot-rect`
+
+---
+
+## 2. Shell Chrome Changes
+
+### Chat input
+
+v2 used a single-line `<input>` with a separate submit button:
+
+```html
+<!-- v2 -->
+<form action="/" method="POST" id="chatForm" data-locked="true">
+    <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message..." data-locked="true">
+    <button type="submit" class="chat-submit" data-locked="true">Send</button>
+</form>
+```
+
+v3 replaces this with a multi-line `<textarea>`. The Send button is removed — submission is handled by the v3 page script (Enter to send, Shift+Enter for newline):
+
+```html
+<!-- v3 -->
+<form action="/" method="POST" id="chatForm" data-locked="true">
+    <textarea class="chat-input" id="chatInput" name="message" rows="2" placeholder="Type a message..." data-locked="true"></textarea>
+</form>
+```
+
+### Static script versions
+
+v3 pages reference the v3 static files. Update both script tags at the bottom of every page:
+
+```html
+<!-- v2 -->
+<script id="page-helpers" src="/api/page-helpers.js?v=2" data-locked="true"></script>
+<script id="page-script" src="/api/page-script.js?v=2" data-locked="true"></script>
+
+<!-- v3 -->
+<script id="page-helpers" src="/api/page-helpers.js?v=3" data-locked="true"></script>
+<script id="page-script" src="/api/page-script.js?v=3" data-locked="true"></script>
+```
+
+### Migration rules for the LLM (shell chrome)
+
+When migrating a v2 page's shell chrome to v3:
+
+1. **Replace the chat input** — swap the `<input type="text">` + `<button>Send</button>` pair with a single `<textarea rows="2">` as shown above.
+2. **Update script versions** — change `?v=2` to `?v=3` on both `page-helpers.js` and `page-script.js`.
+3. **Do NOT touch** page-specific `<input>` elements inside `.viewer-panel` — the chat input change only applies to the shell's `#chatForm`.
+
+---
+
+## 3. Page Migration
+
+### Overview
+
+v2 pages rely on the v2 theme CSS for **all** styling — shell chrome, viewer layout, and page content. In v3, the theme CSS only provides FluentLM palette tokens. When migrating a v2 page to run under a v3 theme, we must **inline** the v2 styles that the page content depends on so it keeps its look.
+
+### What the framework handles (NOT inlined)
+
+The shell chrome CSS (chat panel, modals, toggle, brainstorm, attachments, etc.) will be provided by a framework-level shell stylesheet. Pages do NOT need to carry these rules:
+
+- `.chat-panel`, `.chat-header`, `.chat-messages`, `.chat-message`, `.chat-message p`, `.chat-message p strong`, `.chat-message p code`
+- `.link-group`, `.link-group a`
+- `form` (chat form layout), `.chat-input`, `.chat-submit`
+- `.chat-toggle`, `.chat-toggle-dots`, `.chat-toggle-dot`, `body.chat-collapsed *`
+- `.chat-input-wrapper`, `.brainstorm-icon-btn`, `.brainstorm-*`
+- `.modal-overlay`, `.modal-content`, `.modal-header`, `.modal-body`, `.modal-footer`, `.modal-footer-right`
+- `.modal-btn`, `.modal-btn-primary`, `.modal-btn-secondary`, `.modal-btn-danger`
+- `.form-group`, `.form-label`, `.form-input`, `.checkbox-label`
+- `.loading-overlay`, `.spinner`, `#loadingOverlay`
+- `.save-line`, `.save-line-label`
+- `.attach-btn`, `.attach-menu`, `.attach-menu-item`, `.attachment-pill*`
+- `.screenshot-overlay`, `.screenshot-rect`
+
+### What must be inlined into each migrated page
+
+The following `<style>` block should be injected into the `<head>` of every migrated v2 page. It provides:
+
+1. **v2 CSS custom properties** — so `var(--bg-primary)` etc. still resolve
+2. **Viewer panel** styles — layout, background, decorative pseudo-element
+3. **Global resets** — `*` box-sizing, `body` font/color/layout
+4. **Scrollbar theming** — custom scrollbar appearance
+
+#### Inline style block (nebula-dusk)
+
+```html
+<style id="v2-compat">
+/* --- v2 CSS Custom Properties (nebula-dusk) --- */
+:root {
+    --bg-primary: #1a1a2e;
+    --bg-secondary: #16213e;
+    --bg-tertiary: #0f0f23;
+    --accent-primary: #667eea;
+    --accent-secondary: #764ba2;
+    --accent-tertiary: #f093fb;
+    --accent-glow: rgba(138,43,226,0.3);
+    --text-primary: #e0e0e0;
+    --text-secondary: #b794f6;
+    --border-color: rgba(138,43,226,0.3);
+    --header-min-height: 58px;
+    --header-padding-vertical: 14px;
+    --header-padding-horizontal: 20px;
+    --header-line-height: 1.25;
+}
+
+/* --- Global Reset --- */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
+    color: var(--text-primary);
+    height: 100vh;
+    display: flex;
+}
+
+/* --- Viewer Panel --- */
+.viewer-panel {
+    flex: 1;
+    min-width: 0;
+    padding: 20px 20px 20px 44px;
+    background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(15,15,35,0.95) 100%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-shadow: inset 0 0 60px rgba(75,0,130,0.15);
+    position: relative;
+    overflow: hidden;
+}
+
+.viewer-panel::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(ellipse at center, rgba(138,43,226,0.05) 0%, transparent 70%);
+    animation: nebula-pulse 8s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes nebula-pulse {
+    0%,100% { opacity: 0.5; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.1); }
+}
+
+.viewer-panel.full-viewer {
+    padding: 0;
+}
+
+/* --- Scrollbar --- */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: rgba(15,15,35,0.6); border-radius: 10px; }
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%);
+    border-radius: 10px;
+    border: 2px solid rgba(15,15,35,0.6);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%);
+    box-shadow: 0 0 15px rgba(240,147,251,0.5);
+}
+::-webkit-scrollbar-corner { background: rgba(15,15,35,0.6); }
+* { scrollbar-width: thin; scrollbar-color: var(--accent-secondary) rgba(15,15,35,0.6); }
+</style>
+```
+
+### Migration rules for the LLM
+
+When migrating a v2 page to v3:
+
+1. **Inject the `<style id="v2-compat">` block** into `<head>` as the first child (before any other styles or scripts). This preserves the v2 look while running under a v3 theme.
+
+2. **Do NOT modify** existing page content, classes, or inline styles inside `.viewer-panel`. The v2-compat block ensures all `var()` references continue to resolve.
+
+3. **Do NOT convert** v2 class names to FluentLM `flm-*` classes. That's a separate opt-in redesign, not part of version migration.
+
+4. **Do NOT remove** any existing `<style>` blocks the page already has. The v2-compat block supplements, it doesn't replace.
+
+### Per-theme compat blocks
+
+Each v2 theme needs its own compat block because the CSS variable values and hardcoded colors differ. The block above is for **nebula-dusk**. When migrating:
+
+- Use the compat block matching the theme the page was originally built under
+- If the original theme is unknown, default to **nebula-dusk** (the system default)
+
+---
+
+## 4. Component Migration
+
+### Overview
+
+Component migration (v2 classes → FluentLM `flm-*` classes) is **not** part of the automatic v2→v3 page migration. It is an optional, manual redesign step.
+
+### Why not auto-convert?
+
+v2 pages use custom HTML structures with v2-specific classes. FluentLM components have different HTML structures, attributes, and JS wiring. A class-name find-and-replace would break layouts. Instead:
+
+- **Migrated v2 pages** keep working as-is via the v2-compat inline styles
+- **New v3 pages** are built fresh using FluentLM components
+- **Manual redesign** can optionally convert a v2 page to use FluentLM components
+
+### Key differences
+
+| Aspect | v2 | v3 (FluentLM) |
+|---|---|---|
+| Button | `<button class="modal-btn modal-btn-primary">` | `<button class="flm-button flm-button--primary">` |
+| Input | `<input class="form-input">` | `<input class="flm-textfield-input">` wrapped in `<div class="flm-textfield">` |
+| Modal | `.modal-overlay > .modal-content > .modal-header` | `<div class="flm-dialog">` with `flm-dialog-header` etc. |
+| Colors | `var(--accent-primary)`, `var(--bg-primary)` | `var(--themePrimary)`, `var(--bodyBackground)` |
+| Icons | Manual SVG / emoji | `data-icon="Name"` attribute, auto-injected by FluentLM JS |
+| Theme mode | `.light-mode` / `.dark-mode` on `<html>` | `FluentLM.setTheme('light'/'dark')` or `.fluent-dark` class |
+
+### Pages gallery (required-pages/pages.html)
+
+The pages gallery uses FluentLM for dialogs, context menus, search, and pivot tabs, but page links themselves are rendered as **large rounded buttons** (`.page-btn`) rather than `flm-documentcard` cards. This was a deliberate design choice:
+
+- Each page link is an `<a class="page-btn">` with `border-radius: 12px` and a centered `.btn-label` text span (120×20px plus padding)
+- Variant classes: `.builder-page` (gradient background), `.pinned` (accent border), `.needs-upgrade` (dashed border + glow animation)
+- The grid uses `display: flex; flex-wrap: wrap; gap: 12px` for layout. **Note:** CSS Grid `gap` did not work reliably inside the viewer panel — flexbox `gap` is the proven alternative
+- Scrolling text animation on hover for names that overflow the button width
+- Context menu uses `flm-contextmenu` + `flm-contextmenu-item`
+- Modals use `flm-dialog-overlay` / `flm-dialog` with `flm-dialog-header/body/footer`
+- Category filtering uses `flm-pivot--tabs` with `flm-pivot-tab` buttons
+- Search uses `flm-searchbox` with `flm-searchbox-input`
+- Toast uses `flm-messagebar--success` with fixed positioning
+
+### Dialog overlay visibility class
+
+The `flm-dialog-overlay` is hidden by default (`opacity: 0; pointer-events: none`). To show it programmatically, use `flm-dialog-overlay--open`:
+
+```js
+el.classList.add('flm-dialog-overlay--open');    // show
+el.classList.remove('flm-dialog-overlay--open'); // hide
+```
+
+**Important:** The class is `--open`, not `--visible`. Only `--open` has CSS backing (`opacity: 1; pointer-events: auto`).
+For declarative usage, use `data-dialog-open="id"` / `data-dialog-close` attributes.
+
+### Confirmation dialogs
+
+v2 pages use `window.confirm()` or `alert()` for confirmations. v3 pages should use an `flm-dialog-overlay` instead. The pattern:
+
+```html
+<div class="flm-dialog-overlay" id="myConfirm" data-light-dismiss>
+  <div class="flm-dialog" style="max-width:400px;width:90%;">
+    <div class="flm-dialog-header">
+      <h2 class="flm-dialog-title">Confirm</h2>
+    </div>
+    <div class="flm-dialog-body">
+      <p class="flm-text">Are you sure?</p>
+    </div>
+    <div class="flm-dialog-footer">
+      <div style="flex:1;"></div>
+      <button class="flm-button" id="confirmCancel">Cancel</button>
+      <button class="flm-button" id="confirmOk" style="color:var(--errorText);">Confirm</button>
+    </div>
+  </div>
+</div>
+```
+
+Open/close programmatically:
+
+```js
+document.getElementById('myConfirm').classList.add('flm-dialog-overlay--open');    // show
+document.getElementById('myConfirm').classList.remove('flm-dialog-overlay--open'); // hide
+```
+
+### Navigation guards (unsaved changes)
+
+When a page tracks dirty state, use a FluentLM confirmation dialog to intercept in-page navigation instead of relying solely on the browser's `beforeunload` prompt.
+
+**Key pitfalls and solutions:**
+
+1. **Shell page-script handlers navigate immediately.** Toolbar buttons (`#pagesBtn`, etc.) and link-group anchors have click handlers registered by the page-script that set `window.location` directly. A simple `e.preventDefault()` is not enough — those handlers still fire. Fix: use `e.stopImmediatePropagation()` **and** register in the **capture phase** (`true` as the third argument) so the guard runs before any bubble-phase handlers:
+
+    ```js
+    function guardNavigation(el, url) {
+        el.addEventListener('click', function(e) {
+            if (!isDirty) return;           // clean — let default behavior through
+            e.preventDefault();
+            e.stopImmediatePropagation();   // block page-script handlers
+            showConfirmDialog(url);
+        }, true);                           // capture phase
+    }
+    ```
+
+2. **Capture the pending URL before closing the dialog.** If your `hideDialog()` helper nulls the pending URL, the leave handler must snapshot it into a local variable first:
+
+    ```js
+    leaveBtn.addEventListener('click', function() {
+        var url = pendingNavUrl;    // snapshot before hide nulls it
+        isDirty = false;            // disarm beforeunload
+        hideDialog();
+        if (url) window.location.href = url;
+    });
+    ```
+
+3. **Suppress `beforeunload` while the dialog is open.** Otherwise the browser shows its native prompt on top of the themed one:
+
+    ```js
+    window.addEventListener('beforeunload', function(e) {
+        if (isDirty && !overlay.classList.contains('flm-dialog-overlay--open')) {
+            e.preventDefault();
+        }
+    });
+    ```
+
+4. **Keep `beforeunload` as a fallback.** The themed dialog can only intercept in-page link clicks. Browser close, tab close, and address-bar navigation can only be caught by `beforeunload`.
+
+---
+
+## 5. My Notes Migration — Decisions
+
+This section documents design decisions made during the full FluentLM rewrite of `default-pages/my_notes.html`.
+
+### 1. Sidebar is custom layout
+
+FluentLM does not provide a sidebar component. The sidebar uses custom layout CSS (`.notes-sidebar` with fixed width, flex column, border) while the **items inside** use `flm-list flm-list--bordered` and `flm-list-item` / `flm-list-item--selected`. This keeps the list items visually consistent with other v3 pages.
+
+### 2. Toast UI editor kept as-is
+
+The Toast UI rich text editor is a third-party widget and was not migrated to FluentLM components. Only the **container sizing** (`#editor-container` flex layout) uses layout CSS. The editor's own styles and theme detection (`window.themeInfo.mode`) remain unchanged.
+
+### 3. `confirm()` → `flm-dialog`
+
+The browser `window.confirm()` for note deletion was replaced with an `flm-dialog-overlay` + `flm-dialog` confirmation dialog, following the pattern established in §4 (Component Migration — Confirmation dialogs). The dialog uses `flm-dialog-overlay--open` for visibility toggling.
+
+### 4. Sidebar background uses `--defaultStateBackground`, not `--bodyStandoutBackground`
+
+Initial attempt used `--bodyStandoutBackground` for the sidebar, but in light themes this token is nearly identical to `--bodyBackground`, producing no visible contrast. `--defaultStateBackground` (used by cards and tiles in settings.html/pages.html) provides reliable contrast in both light and dark themes. The sidebar border was also bumped from 1px to 2px for clearer separation.
+
+### 5. Glow and gradient effects dropped
+
+v2 styles used `linear-gradient` backgrounds, `box-shadow` glow effects (`--accent-glow`), and animated hover transforms. These are all removed in the v3 rewrite. FluentLM uses flat semantic tokens (`--bodyBackground`, `--bodyStandoutBackground`, `--neutralLight`) with no glow or gradient effects.
+
+### 6. Button ordering convention
+
+In FluentLM dialog footers and action bars, **primary actions (Save, OK) dock rightmost** and **secondary/destructive actions (Delete, Cancel) go to their left**. This is achieved by placing destructive buttons first in HTML source order with `justify-content: flex-end` on the container. The pattern matches the `flm-dialog-footer` layout used in pages.html and the delete confirmation dialog.
+
+### 7. Full component rewrite, not version-bump migration
+
+This was a **full rewrite** to FluentLM components, not a v2-compat migration. There is no `<style id="v2-compat">` block — all v2 CSS variables and custom classes were removed and replaced with `flm-*` classes and semantic tokens. The `.light-mode` CSS overrides were also removed since FluentLM handles theme switching automatically.
+
+---
+
+## 6. Games, Animations & Visual-Heavy Pages
+
+### Overview
+
+Pages that are primarily canvas-based games, animations, or full-screen visual experiences (e.g. `neon_asteroids`) follow a simplified migration path. These pages typically own all their styling via hardcoded colors and self-contained CSS — they do not depend on v2 theme variables.
+
+### Migration checklist
+
+1. **Add `full-viewer` class** — change `class="viewer-panel"` to `class="viewer-panel full-viewer"` so the content fills the entire viewer area with zero padding. Games and visual pages almost always need this.
+
+2. **Retain all inline styles** — keep the page's existing `<style>` block untouched. These pages use hardcoded colors (e.g. `#0ff`, `#f0f`, `rgba(...)`) and custom fonts, not v2 theme variables. Do not convert them to FluentLM tokens.
+
+3. **No v2-compat block needed** — if the page's `<style>` and inline `style=` attributes do not reference v2 CSS variables (`var(--bg-primary)`, `var(--accent-primary)`, etc.), skip the `<style id="v2-compat">` block entirely. It adds unnecessary weight.
+
+4. **If v2 variables ARE used** — some visual pages may reference a few v2 variables for background or text color. In that case, inject the v2-compat block per §3. But audit first — often only 1–2 variables are used and it may be simpler to replace them with hardcoded values matching the page's aesthetic.
+
+5. **Bump `pageVersion`** — set `"pageVersion": 3` in the page's `page.json`.
+
+6. **Do not convert to FluentLM components** — these pages have no forms, dialogs, or standard UI to migrate. Their content is entirely custom (canvas, SVG, absolute-positioned overlays). Leave the HTML structure and class names as-is.
+
+### Canvas sizing
+
+Games that use `<canvas>` typically size to the viewer panel via JavaScript (`viewerPanel.clientWidth` / `clientHeight`). The `full-viewer` class ensures the panel has `padding: 0`, so the canvas fills edge-to-edge. Verify the resize handler still works after migration — it should, since the panel element and ID are unchanged.
+
+### What NOT to change
+
+- Game logic scripts — leave all `<script>` blocks untouched
+- Custom fonts (e.g. Google Fonts `<link>` tags) — keep as-is
+- CDN library imports (e.g. html2canvas) — keep as-is
+- Inline `style=` attributes on game elements (e.g. `style="display: none;"` on overlays) — preserve exactly

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "synthos",
     "author": "Steven Ickman",
-    "description": "The Hyper-Personalized App Builder That Turns Everyone Into a Programmer.",
-    "version": "0.8.0",
+    "description": "The Hyper-Personalized App Builder That Turns Everyone into a Programmer.",
+    "version": "0.10.0",
     "license": "MIT",
     "keywords": [
         "synthos",
         "ai"
     ],
     "bugs": {
-        "url": "https://github.com/Stevenic/synthos/issues"
+        "url": "https://github.com/Stevenic-microsoft/synthtabs/issues"
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/Stevenic/synthos.git"
+        "url": "https://github.com/Stevenic-microsoft/synthtabs.git"
     },
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -45,22 +45,23 @@
         "typescript": "^4.2.3"
     },
     "scripts": {
-        "build": "tsc -b && node scripts/copy-connector-json.js",
+        "build": "tsc -b",
         "clean": "rimraf dist tsconfig.tsbuildinfo node_modules",
-        "start": "node ./bin/synthos.js",
+        "start": "node ./bin/synthos.js start",
         "test": "npm run build && npm run test:mocha",
-        "test:mocha": "nyc ts-mocha tests/**/*.spec.ts"
+        "test:mocha": "nyc ts-mocha tests/**/*.spec.ts teams-tests/**/*.spec.ts"
     },
     "files": [
         "dist",
         "bin",
         "src",
-        "tests",
         "default-pages",
         "default-scripts",
         "default-themes",
-        "page-scripts",
+        "static-files",
         "required-pages",
-        "images"
+        "service-connectors",
+        "migration-rules",
+        "tests"
     ]
 }

package/required-pages/builder/page.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS</title>
+    <script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
+    <link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
+    <style>.idle-container{position:absolute;width:100%;height:100%;pointer-events:none;opacity:1;transition:opacity 1s ease-out}.idle-container.hidden{opacity:0}.breathing-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(102,126,234,.15) 0,transparent 70%);animation:4s ease-in-out infinite breathe}.breathing-orb::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:rgba(183,148,246,.6);box-shadow:0 0 20px rgba(183,148,246,.4);animation:4s ease-in-out infinite core-pulse}@keyframes breathe{0%,100%{width:80px;height:80px;opacity:.3}50%{width:120px;height:120px;opacity:.6}}@keyframes core-pulse{0%,100%{opacity:.4;box-shadow:0 0 20px rgba(183,148,246,.3)}50%{opacity:.8;box-shadow:0 0 30px rgba(183,148,246,.5)}}.orbit-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border:1px solid rgba(102,126,234,.1);border-radius:50%;animation:20s linear infinite orbit-rotate}.orbit-ring::after{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;background:rgba(240,147,251,.5);border-radius:50%;box-shadow:0 0 10px rgba(240,147,251,.3)}@keyframes orbit-rotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}</style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script id="page-info" src="/api/page-info.js?page=builder"></script>
+</head>
+<body>
+    <div class="shell-toolbar" data-locked="true">
+        <button class="shell-toolbar-btn" id="builderToggle" aria-label="Page Builder" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 18.5H6.2c-1.77 0-3.2-1.43-3.2-3.2V7.7C3 5.93 4.43 4.5 6.2 4.5h11.6c1.77 0 3.2 1.43 3.2 3.2v7.6c0 1.77-1.43 3.2-3.2 3.2H12l-4.2 3.2c-.5.38-1.2.02-1.2-.6V18.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><circle cx="8.5" cy="11.5" r="1" fill="currentColor"/><circle cx="12" cy="11.5" r="1" fill="currentColor"/><circle cx="15.5" cy="11.5" r="1" fill="currentColor"/></svg></button>
+        <button class="shell-toolbar-btn" id="pagesBtn" aria-label="View All Pages" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><rect x="3" y="3" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M6 7.5h5M6 10h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="18" y="3" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M21 7.5h5M21 10h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="3" y="18" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M6 22.5h5M6 25h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="18" y="18" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M21 22.5h5M21 25h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
+        <button class="shell-toolbar-btn" id="saveBtn" aria-label="Save Page" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M17 21v-8H7v8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M7 3v5h8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></button>
+        <div class="shell-toolbar-spacer" data-locked="true"></div>
+        <button class="shell-toolbar-btn" id="settingsBtn" aria-label="Settings" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.8"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+    </div>
+    <div class="chat-panel" data-locked="true">
+        <div class="chat-header" data-locked="true"><span>Page Builder</span><button class="chat-header-close" id="builderClose" aria-label="Close builder" data-locked="true">&times;</button></div>
+        <div class="chat-messages" id="chatMessages" data-locked="true">
+            <div class="chat-message" id="defaultGreeting"><p><strong>SynthOS:</strong> What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!</p></div>
+        </div>
+        <form action="/" method="POST" id="chatForm" data-locked="true">
+            <textarea class="chat-input" id="chatInput" name="message" rows="2" placeholder="Type a message..." data-locked="true"></textarea>
+        </form>
+    </div>
+    <div class="viewer-panel" id="viewerPanel">
+        <div class="idle-container" id="idleAnimation">
+            <div class="orbit-ring"></div>
+            <div class="breathing-orb"></div>
+        </div>
+        <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    </div>
+    <div id="instructions" style="display: none;" data-locked="true"></div>
+    <div id="thoughts" style="display: none;" data-locked="true"></div>
+    <script id="idle-animation">function hideIdleAnimation(){const idleContainer=document.getElementById("idleAnimation");idleContainer&&(idleContainer.classList.add("hidden"),setTimeout(()=>{idleContainer.style.display="none"},1e3))}function showIdleAnimation(){const idleContainer=document.getElementById("idleAnimation");idleContainer&&(idleContainer.style.display="block",setTimeout(()=>{idleContainer.classList.remove("hidden")},10))}</script>
+<script id="page-helpers" src="/api/page-helpers.js?v=3" data-locked="true"></script>
+<script id="page-script" src="/api/page-script.js?v=3" data-locked="true"></script>
+</body></html>

package/required-pages/builder/page.json

@@ -0,0 +1,10 @@
+{
+    "title": "Page Builder",
+    "categories": [
+        "System"
+    ],
+    "pinned": true,
+    "showInAll": true,
+    "pageVersion": 3,
+    "mode": "unlocked"
+}