From 4025ed2be2f39550be35b5fb2162065cfe09cefa Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Tue, 24 Feb 2026 14:08:55 -0800 Subject: [PATCH 01/13] added missing scripts to support screenshots --- .architecture/ARCHITECTURE.md | 26 +- UPSTREAM_CHANGES.md | 71 ----- default-pages/application.html | 1 + default-pages/json_tools.html | 1 + default-pages/my_notes.html | 1 + default-pages/neon_asteroids.html | 1 + default-pages/oregon_trail.html | 1 + default-pages/sidebar_page.html | 1 + default-pages/solar_explorer.html | 4 +- default-pages/solar_tutorial.html | 1 + default-pages/two-panel_page.html | 1 + default-pages/us_map.html | 1 + default-pages/us_map_1850.html | 1 + default-pages/western_cities_1850.html | 1 + extending_synthos.md | 42 +-- package.json | 2 +- required-pages/pages.html | 1 + required-pages/settings.html | 1 + required-pages/synthos_apis.html | 1 + required-pages/synthos_scripts.html | 1 + src/builders/types.ts | 47 ++-- src/connectors/registry.ts | 32 ++- src/customizer/Customizer.ts | 41 +-- src/files.ts | 57 ++++ src/init.ts | 187 +++++++------ src/pages.ts | 38 +-- src/service/transformPage.ts | 178 ++++++------- src/service/useApiRoutes.ts | 42 +-- src/service/useConnectorRoutes.ts | 12 +- src/service/usePageRoutes.ts | 15 +- src/themes.ts | 29 +- {page-scripts => static-files}/helpers-v2.js | 0 {page-scripts => static-files}/page-v2.js | 0 tests/pages.spec.ts | 16 +- tests/transformPage.spec.ts | 264 ++++++------------- 35 files changed, 515 insertions(+), 603 deletions(-) delete mode 100644 UPSTREAM_CHANGES.md rename {page-scripts => static-files}/helpers-v2.js (100%) rename {page-scripts => static-files}/page-v2.js (100%) diff --git a/.architecture/ARCHITECTURE.md b/.architecture/ARCHITECTURE.md index 695924d..6aec86a 100644 --- a/.architecture/ARCHITECTURE.md +++ b/.architecture/ARCHITECTURE.md @@ -67,7 +67,7 @@ synthtabs/ ├── default-pages/ Starter HTML templates (copied on init) ├── default-scripts/ OS-specific shell script templates ├── default-themes/ Theme CSS + JSON (Nebula Dusk/Dawn) -├── page-scripts/ Versioned page scripts (page-v2.js, helpers-v2.js) +├── static-files/ Versioned static files (page-v2.js, helpers-v2.js) ├── required-pages/ System pages (builder, settings, pages, scripts, apis) ├── service-connectors/ 28+ connector JSON definitions ├── migration-rules/ Markdown rules for page upgrades @@ -75,7 +75,7 @@ synthtabs/ ├── teams-default-pages/ [TEAMS] Custom page templates ├── teams-default-scripts/ [TEAMS] Custom shell scripts ├── teams-default-themes/ [TEAMS] Custom themes -├── teams-page-scripts/ [TEAMS] Custom versioned page scripts +├── teams-static-files/ [TEAMS] Custom versioned static files ├── teams-required-pages/ [TEAMS] Custom system pages ├── teams-service-connectors/ [TEAMS] Custom connectors └── .synthos/ USER DATA (created at runtime, git-ignored) @@ -127,13 +127,15 @@ with an injected ` + diff --git a/default-pages/json_tools.html b/default-pages/json_tools.html index 1f07c51..68eb9f1 100644 --- a/default-pages/json_tools.html +++ b/default-pages/json_tools.html @@ -7,6 +7,7 @@ + diff --git a/default-pages/my_notes.html b/default-pages/my_notes.html index b06f214..18fe22f 100644 --- a/default-pages/my_notes.html +++ b/default-pages/my_notes.html @@ -8,6 +8,7 @@ + diff --git a/default-pages/neon_asteroids.html b/default-pages/neon_asteroids.html index 455f722..375a158 100644 --- a/default-pages/neon_asteroids.html +++ b/default-pages/neon_asteroids.html @@ -6,6 +6,7 @@ + diff --git a/default-pages/oregon_trail.html b/default-pages/oregon_trail.html index 02c7ac0..b450bce 100644 --- a/default-pages/oregon_trail.html +++ b/default-pages/oregon_trail.html @@ -8,6 +8,7 @@ + diff --git a/default-pages/sidebar_page.html b/default-pages/sidebar_page.html index ffd7c0e..9379eb8 100644 --- a/default-pages/sidebar_page.html +++ b/default-pages/sidebar_page.html @@ -6,6 +6,7 @@ + diff --git a/default-pages/solar_explorer.html b/default-pages/solar_explorer.html index 07321e4..0139130 100644 --- a/default-pages/solar_explorer.html +++ b/default-pages/solar_explorer.html @@ -404,7 +404,9 @@ background: rgba(255,255,255,0.1); color: #f093fb; } - + + +
SynthOS
diff --git a/default-pages/solar_tutorial.html b/default-pages/solar_tutorial.html index 24cec70..e031679 100644 --- a/default-pages/solar_tutorial.html +++ b/default-pages/solar_tutorial.html @@ -123,6 +123,7 @@ } + diff --git a/default-pages/two-panel_page.html b/default-pages/two-panel_page.html index a05fd96..6b764a7 100644 --- a/default-pages/two-panel_page.html +++ b/default-pages/two-panel_page.html @@ -7,6 +7,7 @@ + diff --git a/default-pages/us_map.html b/default-pages/us_map.html index 3d589bc..fe13ed3 100644 --- a/default-pages/us_map.html +++ b/default-pages/us_map.html @@ -8,6 +8,7 @@ + diff --git a/default-pages/western_cities_1850.html b/default-pages/western_cities_1850.html index 040caf4..c1d2769 100644 --- a/default-pages/western_cities_1850.html +++ b/default-pages/western_cities_1850.html @@ -8,6 +8,7 @@ + diff --git a/extending_synthos.md b/extending_synthos.md index 81b0dae..2912f67 100644 --- a/extending_synthos.md +++ b/extending_synthos.md @@ -65,31 +65,33 @@ class MyApp extends Customizer { ### Content folders -Override these to supply your own default pages, themes, scripts, etc. Each getter returns an absolute path to a folder on disk. +Override these to supply your own default pages, themes, scripts, etc. Each getter returns a `string[]` array of folder paths. The sentinel value `'default'` is resolved at config time to the built-in SynthOS folder for that getter. This lets forks layer custom folders alongside (or instead of) the defaults — first folder wins on name collisions. -| Getter | Default location | Contents | -|--------|-----------------|----------| -| `requiredPagesFolder` | `required-pages/` | Built-in system pages (builder, settings). | -| `defaultPagesFolder` | `default-pages/` | Starter page templates copied on first init. | -| `defaultThemesFolder` | `default-themes/` | Theme CSS/JSON files. | -| `defaultScriptsFolder` | `default-scripts/` | Platform-specific terminal scripts. | -| `pageScriptsFolder` | `page-scripts/` | Versioned page runtime scripts (page-v2.js, etc.). | -| `serviceConnectorsFolder` | `service-connectors/` | Connector JSON definitions. | +| Getter | Default | Contents | +|--------|---------|----------| +| `requiredPagesFolders` | `['default']` | Built-in system pages (builder, settings). | +| `defaultPagesFolders` | `['default']` | Starter page templates copied on first init. | +| `defaultThemesFolders` | `['default']` | Theme CSS/JSON files. | +| `defaultScriptsFolders` | `['default']` | Platform-specific terminal scripts. | +| `staticFilesFolders` | `['default']` | Versioned static files (page-v2.js, etc.). | +| `serviceConnectorsFolders` | `['default']` | Connector JSON definitions. | ```typescript import path from 'path'; class MyApp extends Customizer { - get defaultPagesFolder() { - return path.join(__dirname, '../my-pages'); + // Custom pages take priority, built-in pages used as fallback + get defaultPagesFolders() { + return [path.join(__dirname, '../my-pages'), 'default']; } - get defaultThemesFolder() { - return path.join(__dirname, '../my-themes'); + // Replace built-in themes entirely + get defaultThemesFolders() { + return [path.join(__dirname, '../my-themes')]; } } ``` -When you don't override a folder, SynthOS uses its own built-in assets from the npm package. +When you don't override a folder, the `['default']` array resolves to the built-in SynthOS assets from the npm package. ### Feature flags @@ -330,12 +332,12 @@ These are handled internally and npm consumers won't encounter them: |--------|---------|---------| | `productName` | `string` | `'SynthOS'` | | `localFolder` | `string` | `'.synthos'` | -| `requiredPagesFolder` | `string` | Built-in required-pages | -| `defaultPagesFolder` | `string` | Built-in default-pages | -| `defaultThemesFolder` | `string` | Built-in default-themes | -| `defaultScriptsFolder` | `string` | Built-in default-scripts | -| `pageScriptsFolder` | `string` | Built-in page-scripts | -| `serviceConnectorsFolder` | `string` | Built-in service-connectors | +| `requiredPagesFolders` | `string[]` | `['default']` → built-in required-pages | +| `defaultPagesFolders` | `string[]` | `['default']` → built-in default-pages | +| `defaultThemesFolders` | `string[]` | `['default']` → built-in default-themes | +| `defaultScriptsFolders` | `string[]` | `['default']` → built-in default-scripts | +| `staticFilesFolders` | `string[]` | `['default']` → built-in static-files | +| `serviceConnectorsFolders` | `string[]` | `['default']` → built-in service-connectors | | `tabsListRoute` | `string` | `'/pages'` | ### Customizer methods (call on instance) diff --git a/package.json b/package.json index 1c81f54..5250a6a 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "default-pages", "default-scripts", "default-themes", - "page-scripts", + "static-files", "required-pages", "service-connectors", "migration-rules", diff --git a/required-pages/pages.html b/required-pages/pages.html index 3d74315..44b5b3e 100644 --- a/required-pages/pages.html +++ b/required-pages/pages.html @@ -80,6 +80,7 @@ + diff --git a/required-pages/settings.html b/required-pages/settings.html index 655e61c..907f3bc 100644 --- a/required-pages/settings.html +++ b/required-pages/settings.html @@ -8,6 +8,7 @@ +
diff --git a/required-pages/synthos_apis.html b/required-pages/synthos_apis.html index 3f2567f..aa62b7a 100644 --- a/required-pages/synthos_apis.html +++ b/required-pages/synthos_apis.html @@ -8,6 +8,7 @@ + diff --git a/required-pages/synthos_scripts.html b/required-pages/synthos_scripts.html index 23500b1..a8308bf 100644 --- a/required-pages/synthos_scripts.html +++ b/required-pages/synthos_scripts.html @@ -8,6 +8,7 @@ + diff --git a/src/builders/types.ts b/src/builders/types.ts index 2cea2c6..da068b0 100644 --- a/src/builders/types.ts +++ b/src/builders/types.ts @@ -26,20 +26,17 @@ Each operation must be one of: { "op": "style-element", "nodeId": "", "style": "" } — sets the style attribute of the target element (must be unlocked) -{ "op": "update-lines", "nodeId": "", "startLine": , "endLine": , "content": "" } - — replaces lines startLine..endLine (inclusive, 1-based) in a script/style block +{ "op": "search-replace", "nodeId": "", "search": "", "replace": "" } + — finds exact text within a script/style block and replaces it. Use empty string for replace to delete. -{ "op": "delete-lines", "nodeId": "", "startLine": , "endLine": } - — removes lines startLine..endLine (inclusive, 1-based) from a script/style block +{ "op": "search-insert", "nodeId": "", "after": "", "content": "" } + — inserts new content immediately after the matched text in a script/style block. -{ "op": "insert-lines", "nodeId": "", "afterLine": , "content": "" } - — inserts lines after line n (1-based; 0 = before first line) in a script/style block - -Script and style blocks have line numbers prefixed (e.g. "01: let x = 1;"). Use these for -line-range ops. Do not include line number prefixes in your content. For small edits to large -scripts/styles, prefer update-lines/delete-lines/insert-lines over update to reduce output. -When using multiple line-range ops on the same block, apply from bottom to top (highest line -numbers first) to avoid line drift. +For partial edits to large scripts/styles, use search-replace or search-insert instead of +replacing the entire block with update. +Copy the search/after text exactly as it appears in the source. +When making multiple edits to the same block, ensure each search string targets distinct text. +To delete code, use search-replace with an empty replace string. Return ONLY the JSON array. Example: [ @@ -112,35 +109,23 @@ export const CHANGE_OPS_SCHEMA: Record = { { type: 'object', properties: { - op: { type: 'string', const: 'update-lines' }, - nodeId: { type: 'string' }, - startLine: { type: 'integer' }, - endLine: { type: 'integer' }, - content: { type: 'string' }, - }, - required: ['op', 'nodeId', 'startLine', 'endLine', 'content'], - additionalProperties: false, - }, - { - type: 'object', - properties: { - op: { type: 'string', const: 'delete-lines' }, + op: { type: 'string', const: 'search-replace' }, nodeId: { type: 'string' }, - startLine: { type: 'integer' }, - endLine: { type: 'integer' }, + search: { type: 'string' }, + replace: { type: 'string' }, }, - required: ['op', 'nodeId', 'startLine', 'endLine'], + required: ['op', 'nodeId', 'search', 'replace'], additionalProperties: false, }, { type: 'object', properties: { - op: { type: 'string', const: 'insert-lines' }, + op: { type: 'string', const: 'search-insert' }, nodeId: { type: 'string' }, - afterLine: { type: 'integer' }, + after: { type: 'string' }, content: { type: 'string' }, }, - required: ['op', 'nodeId', 'afterLine', 'content'], + required: ['op', 'nodeId', 'after', 'content'], additionalProperties: false, }, ], diff --git a/src/connectors/registry.ts b/src/connectors/registry.ts index f3ae531..8d880bf 100644 --- a/src/connectors/registry.ts +++ b/src/connectors/registry.ts @@ -12,19 +12,31 @@ function loadConnectorJson(dir: string): ConnectorDefinition | null { }; } -export function loadConnectorRegistry(connectorsDir: string): ConnectorDefinition[] { - if (!fs.existsSync(connectorsDir)) return []; - return fs.readdirSync(connectorsDir, { withFileTypes: true }) - .filter(d => d.isDirectory()) - .map(d => loadConnectorJson(path.join(connectorsDir, d.name))) - .filter((d): d is ConnectorDefinition => d !== null) - .sort((a, b) => a.name.localeCompare(b.name)); +export function loadConnectorRegistry(connectorsDirs: string[]): ConnectorDefinition[] { + const seen = new Set(); + const results: ConnectorDefinition[] = []; + for (const dir of connectorsDirs) { + if (!fs.existsSync(dir)) continue; + const entries = fs.readdirSync(dir, { withFileTypes: true }) + .filter(d => d.isDirectory()); + for (const d of entries) { + const def = loadConnectorJson(path.join(dir, d.name)); + if (def && !seen.has(def.id)) { + seen.add(def.id); + results.push(def); + } + } + } + return results.sort((a, b) => a.name.localeCompare(b.name)); } let _registry: ConnectorDefinition[] | undefined; -export function getConnectorRegistry(connectorsDir?: string): ConnectorDefinition[] { - if (!_registry || connectorsDir) { - _registry = loadConnectorRegistry(connectorsDir ?? path.join(__dirname, '../../service-connectors')); +let _registryKey: string | undefined; +export function getConnectorRegistry(connectorsDirs?: string[]): ConnectorDefinition[] { + const key = connectorsDirs ? connectorsDirs.join('|') : undefined; + if (!_registry || (connectorsDirs && key !== _registryKey)) { + _registry = loadConnectorRegistry(connectorsDirs ?? [path.join(__dirname, '../../service-connectors')]); + _registryKey = key; } return _registry; } diff --git a/src/customizer/Customizer.ts b/src/customizer/Customizer.ts index c4e42fe..2ef81aa 100644 --- a/src/customizer/Customizer.ts +++ b/src/customizer/Customizer.ts @@ -1,7 +1,6 @@ import { Application } from 'express'; import { SynthOSConfig } from '../init'; import { ContextSection } from '../builders/types'; -import path from 'path'; export type RouteInstaller = (config: SynthOSConfig, app: Application) => void; @@ -28,35 +27,39 @@ export class Customizer { // --- Content folder paths --- // Override these in a derived class to point to your fork's folders. + // Each getter returns `string[]`. The sentinel value `'default'` is + // resolved by `createConfig()` to the built-in SynthOS folder for that + // getter. Forks can return additional paths alongside (or instead of) + // `'default'` to layer custom folders. - /** Folder containing built-in system pages (builder, settings, etc.) */ - get requiredPagesFolder(): string { - return path.join(__dirname, '../../required-pages'); + /** Folders containing built-in system pages (builder, settings, etc.) */ + get requiredPagesFolders(): string[] { + return ['default']; } - /** Folder containing starter page templates copied on init */ - get defaultPagesFolder(): string { - return path.join(__dirname, '../../default-pages'); + /** Folders containing starter page templates copied on init */ + get defaultPagesFolders(): string[] { + return ['default']; } - /** Folder containing theme CSS/JSON files */ - get defaultThemesFolder(): string { - return path.join(__dirname, '../../default-themes'); + /** Folders containing theme CSS/JSON files */ + get defaultThemesFolders(): string[] { + return ['default']; } - /** Folder containing versioned page scripts (page-v2.js, etc.) */ - get pageScriptsFolder(): string { - return path.join(__dirname, '../../page-scripts'); + /** Folders containing versioned static files (page-v2.js, helpers-v2.js, etc.) */ + get staticFilesFolders(): string[] { + return ['default']; } - /** Folder containing connector JSON definitions */ - get serviceConnectorsFolder(): string { - return path.join(__dirname, '../../service-connectors'); + /** Folders containing connector JSON definitions */ + get serviceConnectorsFolders(): string[] { + return ['default']; } - /** Folder containing default scripts copied on init */ - get defaultScriptsFolder(): string { - return path.join(__dirname, '../../default-scripts'); + /** Folders containing default scripts copied on init */ + get defaultScriptsFolders(): string[] { + return ['default']; } /** Route path for the "browse all pages/tabs" listing page. diff --git a/src/files.ts b/src/files.ts index 819cbf1..402618c 100644 --- a/src/files.ts +++ b/src/files.ts @@ -72,3 +72,60 @@ export async function copyFolderRecursive(srcFolder: string, destFolder: string) export async function deleteFolder(dirPath: string): Promise { await fs.rm(dirPath, { recursive: true }); } + +// --- Multi-folder helpers --- + +/** + * Search folders in order, return the full path to the first existing match + * for the given filename. + */ +export async function findFileInFolders(folders: string[], filename: string): Promise { + for (const folder of folders) { + const candidate = path.join(folder, filename); + if (await checkIfExists(candidate)) { + return candidate; + } + } + return undefined; +} + +/** + * Merge file listings from multiple folders. First folder takes priority on + * name collisions (earlier occurrence wins). + */ +export async function listFilesFromFolders(folders: string[]): Promise { + const seen = new Set(); + const result: string[] = []; + for (const folder of folders) { + if (!await checkIfExists(folder)) continue; + const files = await listFiles(folder); + for (const f of files) { + if (!seen.has(f)) { + seen.add(f); + result.push(f); + } + } + } + return result; +} + +/** + * Copy files from multiple source folders into a single destination. + * First folder takes priority on duplicate filenames (copy is skipped + * if the file already exists in dest from an earlier folder). + */ +export async function copyFilesFromFolders(folders: string[], destFolder: string): Promise { + await ensureFolderExists(destFolder); + const copied = new Set(); + for (const folder of folders) { + if (!await checkIfExists(folder)) continue; + const files = await fs.readdir(folder); + for (const file of files) { + if (copied.has(file)) continue; + copied.add(file); + const srcPath = path.join(folder, file); + const destPath = path.join(destFolder, file); + await fs.copyFile(srcPath, destPath); + } + } +} diff --git a/src/init.ts b/src/init.ts index 0eb09de..aa552b7 100644 --- a/src/init.ts +++ b/src/init.ts @@ -1,6 +1,6 @@ import * as fs from 'fs/promises'; import path from "path"; -import { checkIfExists, copyFile, copyFiles, deleteFile, ensureFolderExists, listFiles, saveFile } from "./files"; +import { checkIfExists, copyFile, copyFilesFromFolders, deleteFile, ensureFolderExists, findFileInFolders, listFiles, listFilesFromFolders, saveFile } from "./files"; import { PAGE_VERSION, getRequiredPages } from "./pages"; import { DefaultSettings } from "./settings"; import { getOutdatedThemes, parseThemeFilename } from "./themes"; @@ -9,33 +9,59 @@ import { Customizer } from './customizer'; export interface SynthOSConfig { localFolder: string; pagesFolder: string; - requiredPagesFolder: string; - defaultPagesFolder: string; - defaultScriptsFolder: string; - defaultThemesFolder: string; - pageScriptsFolder: string; - serviceConnectorsFolder: string; + requiredPagesFolders: string[]; + defaultPagesFolders: string[]; + defaultScriptsFolders: string[]; + defaultThemesFolders: string[]; + staticFilesFolders: string[]; + serviceConnectorsFolders: string[]; requiredPages: string[]; debug: boolean; debugPageUpdates: boolean; } +/** + * Resolve a folder array from a Customizer getter: replace the `'default'` + * sentinel with the built-in SynthOS path. + */ +function resolveFolders(folders: string[], builtInPath: string): string[] { + return folders.map(f => f === 'default' ? builtInPath : f); +} + export async function createConfig( pagesFolder = '.synthos', options?: { debug?: boolean; debugPageUpdates?: boolean }, customizer?: Customizer ): Promise { - const requiredPagesFolder = customizer?.requiredPagesFolder ?? path.join(__dirname, '../required-pages'); - const requiredPages = await getRequiredPages(requiredPagesFolder); + const requiredPagesFolders = resolveFolders( + customizer?.requiredPagesFolders ?? ['default'], + path.join(__dirname, '../required-pages') + ); + const requiredPages = await getRequiredPages(requiredPagesFolders); return { localFolder: pagesFolder, pagesFolder: path.join(process.cwd(), pagesFolder), - requiredPagesFolder, - defaultPagesFolder: customizer?.defaultPagesFolder ?? path.join(__dirname, '../default-pages'), - defaultScriptsFolder: customizer?.defaultScriptsFolder ?? path.join(__dirname, '../default-scripts'), - defaultThemesFolder: customizer?.defaultThemesFolder ?? path.join(__dirname, '../default-themes'), - pageScriptsFolder: customizer?.pageScriptsFolder ?? path.join(__dirname, '../page-scripts'), - serviceConnectorsFolder: customizer?.serviceConnectorsFolder ?? path.join(__dirname, '../service-connectors'), + requiredPagesFolders, + defaultPagesFolders: resolveFolders( + customizer?.defaultPagesFolders ?? ['default'], + path.join(__dirname, '../default-pages') + ), + defaultScriptsFolders: resolveFolders( + customizer?.defaultScriptsFolders ?? ['default'], + path.join(__dirname, '../default-scripts') + ), + defaultThemesFolders: resolveFolders( + customizer?.defaultThemesFolders ?? ['default'], + path.join(__dirname, '../default-themes') + ), + staticFilesFolders: resolveFolders( + customizer?.staticFilesFolders ?? ['default'], + path.join(__dirname, '../static-files') + ), + serviceConnectorsFolders: resolveFolders( + customizer?.serviceConnectorsFolders ?? ['default'], + path.join(__dirname, '../service-connectors') + ), requiredPages, debug: options?.debug ?? false, debugPageUpdates: options?.debugPageUpdates ?? false @@ -63,21 +89,15 @@ export async function init(config: SynthOSConfig, includeDefaultPages: boolean = console.log(`Copying default scripts to ${config.localFolder} folder...`); const scriptsFolder = path.join(config.pagesFolder, 'scripts'); await ensureFolderExists(scriptsFolder); - switch (process.platform) { - case 'win32': - await copyFile(path.join(config.defaultScriptsFolder, 'windows-terminal.json'), scriptsFolder); - break; - case 'darwin': - await copyFile(path.join(config.defaultScriptsFolder, 'mac-terminal.json'), scriptsFolder); - break; - case 'android': - await copyFile(path.join(config.defaultScriptsFolder, 'android-terminal.json'), scriptsFolder); - break; - case 'linux': - default: - await copyFile(path.join(config.defaultScriptsFolder, 'linux-terminal.json'), scriptsFolder); - break; - } + const scriptFilename = ({ + win32: 'windows-terminal.json', + darwin: 'mac-terminal.json', + android: 'android-terminal.json', + } as Record)[process.platform] ?? 'linux-terminal.json'; + const scriptSrc = await findFileInFolders(config.defaultScriptsFolders, scriptFilename); + if (scriptSrc) { + await copyFile(scriptSrc, scriptsFolder); + } await saveFile(path.join(scriptsFolder, 'example.sh'), `#!/bin/bash\n\n# This is an example script\n\n# You can run this script using the following command:\n# sh ${config.localFolder}/scripts/example.sh\n\n# This script will print "Hello, World!" to the console\n\necho "Hello, World!"\n`); @@ -85,12 +105,12 @@ export async function init(config: SynthOSConfig, includeDefaultPages: boolean = console.log(`Copying default themes to ${config.localFolder} folder...`); const themesFolder = path.join(config.pagesFolder, 'themes'); await ensureFolderExists(themesFolder); - await copyFiles(config.defaultThemesFolder, themesFolder); + await copyFilesFromFolders(config.defaultThemesFolders, themesFolder); // Copy pages if (includeDefaultPages) { console.log(`Copying default pages to ${config.localFolder} folder...`); - await copyDefaultPages(config.defaultPagesFolder, config.pagesFolder); + await copyDefaultPages(config.defaultPagesFolders, config.pagesFolder); } return true; @@ -102,20 +122,14 @@ async function repairMissingFolders(config: SynthOSConfig): Promise { if (!await checkIfExists(scriptsFolder)) { console.log(`Restoring default scripts to ${config.localFolder} folder...`); await ensureFolderExists(scriptsFolder); - switch (process.platform) { - case 'win32': - await copyFile(path.join(config.defaultScriptsFolder, 'windows-terminal.json'), scriptsFolder); - break; - case 'darwin': - await copyFile(path.join(config.defaultScriptsFolder, 'mac-terminal.json'), scriptsFolder); - break; - case 'android': - await copyFile(path.join(config.defaultScriptsFolder, 'android-terminal.json'), scriptsFolder); - break; - case 'linux': - default: - await copyFile(path.join(config.defaultScriptsFolder, 'linux-terminal.json'), scriptsFolder); - break; + const scriptFilename = ({ + win32: 'windows-terminal.json', + darwin: 'mac-terminal.json', + android: 'android-terminal.json', + } as Record)[process.platform] ?? 'linux-terminal.json'; + const scriptSrc = await findFileInFolders(config.defaultScriptsFolders, scriptFilename); + if (scriptSrc) { + await copyFile(scriptSrc, scriptsFolder); } await saveFile(path.join(scriptsFolder, 'example.sh'), `#!/bin/bash\n\n# This is an example script\n\n# You can run this script using the following command:\n# sh ${config.localFolder}/scripts/example.sh\n\n# This script will print "Hello, World!" to the console\n\necho "Hello, World!"\n`); } @@ -125,13 +139,13 @@ async function repairMissingFolders(config: SynthOSConfig): Promise { if (!await checkIfExists(themesFolder)) { console.log(`Restoring default themes to ${config.localFolder} folder...`); await ensureFolderExists(themesFolder); - await copyFiles(config.defaultThemesFolder, themesFolder); + await copyFilesFromFolders(config.defaultThemesFolders, themesFolder); } else { // Upgrade outdated themes — copy newer versioned CSS from defaults const outdated = await getOutdatedThemes(config); if (outdated.length > 0) { console.log(`Upgrading ${outdated.length} theme(s): ${outdated.join(', ')}...`); - const defaultFiles = await listFiles(config.defaultThemesFolder); + const defaultFiles = await listFilesFromFolders(config.defaultThemesFolders); for (const themeName of outdated) { // Remove old versioned CSS files for this theme const localFiles = await listFiles(themesFolder); @@ -141,11 +155,14 @@ async function repairMissingFolders(config: SynthOSConfig): Promise { await deleteFile(path.join(themesFolder, f)); } } - // Copy the new versioned CSS from defaults + // Copy the new versioned CSS from defaults — search all default folders for (const f of defaultFiles) { const parsed = parseThemeFilename(f); if (parsed && parsed.name === themeName) { - await copyFile(path.join(config.defaultThemesFolder, f), themesFolder); + const src = await findFileInFolders(config.defaultThemesFolders, f); + if (src) { + await copyFile(src, themesFolder); + } } } } @@ -159,7 +176,7 @@ async function repairMissingFolders(config: SynthOSConfig): Promise { const htmlFiles = (await listFiles(config.pagesFolder)).filter(f => f.endsWith('.html')); if (htmlFiles.length === 0) { console.log(`Restoring default pages to ${config.localFolder}/pages/ folder...`); - await copyDefaultPages(config.defaultPagesFolder, config.pagesFolder); + await copyDefaultPages(config.defaultPagesFolders, config.pagesFolder); } else { await ensureFolderExists(pagesSubdir); } @@ -213,40 +230,48 @@ async function migrateFlatPages(pagesFolder: string, localFolder: string): Promi } } -async function copyDefaultPages(srcFolder: string, destFolder: string): Promise { +async function copyDefaultPages(srcFolders: string[], destFolder: string): Promise { const pagesDir = path.join(destFolder, 'pages'); await ensureFolderExists(pagesDir); - const files = await fs.readdir(srcFolder); const now = new Date().toISOString(); - for (const file of files) { - if (!file.endsWith('.html')) continue; - const pageName = file.replace(/\.html$/, ''); - const pageFolder = path.join(pagesDir, pageName); - await ensureFolderExists(pageFolder); - await fs.copyFile(path.join(srcFolder, file), path.join(pageFolder, 'page.html')); - - // Read companion .json metadata from source folder, fall back to defaults - let metadata: Record = {}; - const jsonPath = path.join(srcFolder, `${pageName}.json`); - if (await checkIfExists(jsonPath)) { - try { - const raw = await fs.readFile(jsonPath, 'utf-8'); - metadata = JSON.parse(raw); - } catch { - // use defaults + const seen = new Set(); + + for (const srcFolder of srcFolders) { + if (!await checkIfExists(srcFolder)) continue; + const files = await fs.readdir(srcFolder); + for (const file of files) { + if (!file.endsWith('.html')) continue; + const pageName = file.replace(/\.html$/, ''); + if (seen.has(pageName)) continue; // first folder wins + seen.add(pageName); + + const pageFolder = path.join(pagesDir, pageName); + await ensureFolderExists(pageFolder); + await fs.copyFile(path.join(srcFolder, file), path.join(pageFolder, 'page.html')); + + // Read companion .json metadata from source folder, fall back to defaults + let metadata: Record = {}; + const jsonPath = path.join(srcFolder, `${pageName}.json`); + if (await checkIfExists(jsonPath)) { + try { + const raw = await fs.readFile(jsonPath, 'utf-8'); + metadata = JSON.parse(raw); + } catch { + // use defaults + } } + const fullMetadata = { + title: typeof metadata.title === 'string' ? metadata.title : '', + categories: Array.isArray(metadata.categories) ? metadata.categories : [], + pinned: typeof metadata.pinned === 'boolean' ? metadata.pinned : false, + showInAll: typeof metadata.showInAll === 'boolean' ? metadata.showInAll : true, + createdDate: now, + lastModified: now, + pageVersion: typeof metadata.pageVersion === 'number' ? metadata.pageVersion + : typeof metadata.uxVersion === 'number' ? metadata.uxVersion : PAGE_VERSION, + mode: metadata.mode === 'locked' ? 'locked' : 'unlocked', + }; + await saveFile(path.join(pageFolder, 'page.json'), JSON.stringify(fullMetadata, null, 4)); } - const fullMetadata = { - title: typeof metadata.title === 'string' ? metadata.title : '', - categories: Array.isArray(metadata.categories) ? metadata.categories : [], - pinned: typeof metadata.pinned === 'boolean' ? metadata.pinned : false, - showInAll: typeof metadata.showInAll === 'boolean' ? metadata.showInAll : true, - createdDate: now, - lastModified: now, - pageVersion: typeof metadata.pageVersion === 'number' ? metadata.pageVersion - : typeof metadata.uxVersion === 'number' ? metadata.uxVersion : PAGE_VERSION, - mode: metadata.mode === 'locked' ? 'locked' : 'unlocked', - }; - await saveFile(path.join(pageFolder, 'page.json'), JSON.stringify(fullMetadata, null, 4)); } } diff --git a/src/pages.ts b/src/pages.ts index b72dad2..8e2f853 100644 --- a/src/pages.ts +++ b/src/pages.ts @@ -1,4 +1,4 @@ -import {checkIfExists, deleteFile, deleteFolder, ensureFolderExists, listFiles, listFolders, loadFile, saveFile} from './files'; +import {checkIfExists, deleteFile, deleteFolder, ensureFolderExists, findFileInFolders, listFiles, listFilesFromFolders, listFolders, loadFile, saveFile} from './files'; import path from 'path'; // Page State Cache @@ -6,10 +6,10 @@ const _pages: { [name: string]: string } = {}; /** * Derive the list of required page names by scanning *.html files - * in the given requiredPagesFolder directory. + * across one or more requiredPages folders. */ -export async function getRequiredPages(requiredPagesFolder: string): Promise { - const files = await listFiles(requiredPagesFolder); +export async function getRequiredPages(requiredPagesFolders: string[]): Promise { + const files = await listFilesFromFolders(requiredPagesFolders); return files .filter(f => f.endsWith('.html')) .map(f => f.replace(/\.html$/, '')); @@ -31,7 +31,7 @@ export interface PageInfo { export type PageMetadata = Omit; -export async function loadPageMetadata(pagesFolder: string, name: string, fallbackFolder?: string): Promise { +export async function loadPageMetadata(pagesFolder: string, name: string, fallbackFolders?: string[]): Promise { // 1. Try user override: /pages//page.json const metadataPath = path.join(pagesFolder, 'pages', name, 'page.json'); if (await checkIfExists(metadataPath)) { @@ -44,12 +44,12 @@ export async function loadPageMetadata(pagesFolder: string, name: string, fallba } } - // 2. Try fallback: fallbackFolder/.json - if (fallbackFolder) { - const fallbackPath = path.join(fallbackFolder, `${name}.json`); - if (await checkIfExists(fallbackPath)) { + // 2. Try fallback folders: fallbackFolder/.json + if (fallbackFolders) { + const fallbackFile = await findFileInFolders(fallbackFolders, `${name}.json`); + if (fallbackFile) { try { - const raw = await loadFile(fallbackPath); + const raw = await loadFile(fallbackFile); const parsed = JSON.parse(raw); return parseMetadata(parsed); } catch { @@ -92,7 +92,7 @@ const DEFAULT_METADATA: PageMetadata = { mode: 'unlocked', }; -export async function listPages(pagesFolder: string, fallbackPagesFolder: string): Promise { +export async function listPages(pagesFolder: string, fallbackPagesFolders: string[]): Promise { const pageMap = new Map(); // Folder-based pages under pages/ subdirectory @@ -137,13 +137,13 @@ export async function listPages(pagesFolder: string, fallbackPagesFolder: string } } - // Add pages from fallback (required) pages folder - const fallbackFiles = (await listFiles(fallbackPagesFolder)).filter(file => file.endsWith('.html')); - for (const file of fallbackFiles) { + // Add pages from fallback (required) pages folders + const fallbackFiles = await listFilesFromFolders(fallbackPagesFolders); + for (const file of fallbackFiles.filter(f => f.endsWith('.html'))) { const name = file.replace(/\.html$/, ''); if (!pageMap.has(name)) { // System page not yet in map — check for user override, then fallback .json - const metadata = await loadPageMetadata(pagesFolder, name, fallbackPagesFolder); + const metadata = await loadPageMetadata(pagesFolder, name, fallbackPagesFolders); pageMap.set(name, { name, title: metadata?.title ?? '', @@ -238,13 +238,13 @@ export async function copyPage( targetName: string, title: string, categories: string[], - requiredPagesFolder: string + requiredPagesFolders: string[] ): Promise { - // Load source HTML from user folder, then try required folder as fallback + // Load source HTML from user folder, then try required folders as fallback let html = await loadPageState(pagesFolder, sourceName, true); if (!html) { - const requiredPath = path.join(requiredPagesFolder, `${sourceName}.html`); - if (await checkIfExists(requiredPath)) { + const requiredPath = await findFileInFolders(requiredPagesFolders, `${sourceName}.html`); + if (requiredPath) { html = await loadFile(requiredPath); } } diff --git a/src/service/transformPage.ts b/src/service/transformPage.ts index a9a0101..176f0b8 100644 --- a/src/service/transformPage.ts +++ b/src/service/transformPage.ts @@ -27,9 +27,8 @@ export type ChangeOp = | { op: "delete"; nodeId: string } | { op: "insert"; parentId: string; position: "prepend" | "append" | "before" | "after"; html: string } | { op: "style-element"; nodeId: string; style: string } - | { op: "update-lines"; nodeId: string; startLine: number; endLine: number; content: string } - | { op: "delete-lines"; nodeId: string; startLine: number; endLine: number } - | { op: "insert-lines"; nodeId: string; afterLine: number; content: string }; + | { op: "search-replace"; nodeId: string; search: string; replace: string } + | { op: "search-insert"; nodeId: string; after: string; content: string }; export type ChangeList = ChangeOp[]; @@ -51,50 +50,44 @@ export async function transformPage(args: TransformPageArgs): Promise', - content: numberedHtml, + content: annotatedHtml, instructions: '', }; - // 4. Determine newBuild: if isBuilder, count .chat-message in annotated HTML + // 3. Determine newBuild: if isBuilder, count .chat-message in annotated HTML let newBuild = false; if (args.isBuilder) { - const $ = cheerio.load(numberedHtml, { decodeEntities: false }); + const $ = cheerio.load(annotatedHtml, { decodeEntities: false }); const messageCount = $('#chatMessages .chat-message').length; newBuild = messageCount <= 1; } - // 5. Call builder + // 4. Call builder const result = await builder.run(currentPage, additionalSections, message, newBuild, args.attachments); - // 6. Switch on result kind + // 5. Switch on result kind switch (result.kind) { case 'transforms': { - const applied = applyChangeList(numberedHtml, result.changes); - const stripped = stripLineNumbers(applied); - const clean = stripNodeIds(stripped); + const applied = applyChangeList(annotatedHtml, result.changes); + const clean = stripNodeIds(applied); const deduped = deduplicateInlineScripts(clean); const safe = ensureScriptsBeforeBodyClose(deduped); return { completed: true, value: { html: safe, changeCount: result.changes.length } }; } case 'reply': { const productName = args.productName ?? 'SynthOS'; - const withReply = appendChatReply(numberedHtml, message, result.text, productName); - const stripped = stripLineNumbers(withReply); - const clean = stripNodeIds(stripped); + const withReply = appendChatReply(annotatedHtml, message, result.text, productName); + const clean = stripNodeIds(withReply); const deduped = deduplicateInlineScripts(clean); const safe = ensureScriptsBeforeBodyClose(deduped); return { completed: true, value: { html: safe, changeCount: 0 } }; } case 'error': { - const stripped = stripLineNumbers(numberedHtml); - const cleanOriginal = stripNodeIds(stripped); + const cleanOriginal = stripNodeIds(annotatedHtml); const errorMessage = result.error.message; const errorHtml = injectError(cleanOriginal, 'Something went wrong try again', errorMessage); return { completed: true, value: { html: errorHtml, changeCount: 0 } }; @@ -102,8 +95,7 @@ export async function transformPage(args: TransformPageArgs): Promise` and `'; - const result = addLineNumbers(html); - assert.ok(result.includes('01: .a { color: red; }')); - assert.ok(result.includes('02: .b { color: blue; }')); + it('finds exact match and returns correct positions', () => { + const result = normalizedIndexOf('let x = 1;', 'x = 1'); + assert.ok(result !== null); + assert.strictEqual(result.start, 4); + assert.strictEqual(result.end, 9); }); - it('uses 3-digit padding when 100+ lines', () => { - const lines = Array.from({ length: 100 }, (_, i) => `let v${i} = ${i};`).join('\n'); - const html = ``; - const result = addLineNumbers(html); - assert.ok(result.includes('001: let v0 = 0;')); - assert.ok(result.includes('100: let v99 = 99;')); + it('matches despite whitespace differences', () => { + const haystack = 'let x =\n 1;'; + const needle = 'x = 1;'; + const result = normalizedIndexOf(haystack, needle); + assert.ok(result !== null); + // Should span from 'x' to end of ';' + const matched = haystack.slice(result.start, result.end); + assert.ok(matched.includes('x')); + assert.ok(matched.includes('1;')); }); - it('skips scripts with src attribute', () => { - const html = ''; - const result = addLineNumbers(html); - assert.ok(!result.includes('01:')); - }); - - it('skips scripts with type="application/json"', () => { - const html = ''; - const result = addLineNumbers(html); - assert.ok(!result.includes('01:')); - }); - - it('leaves empty script blocks unchanged', () => { - const html = ''; - const result = addLineNumbers(html); - assert.ok(result.includes('')); + it('handles newlines vs spaces', () => { + const haystack = 'function foo() {\n return 1;\n}'; + const needle = 'foo() { return 1; }'; + const result = normalizedIndexOf(haystack, needle); + assert.ok(result !== null); }); }); // --------------------------------------------------------------------------- -// stripLineNumbers +// applyChangeList — search-replace / search-insert ops // --------------------------------------------------------------------------- -describe('stripLineNumbers', () => { - it('strips 2-digit line number prefixes', () => { - const html = ''; - const result = stripLineNumbers(html); - assert.ok(result.includes('let x = 1;\nlet y = 2;')); - assert.ok(!result.includes('01:')); - }); - - it('strips 3-digit line number prefixes', () => { - const html = ''; - const result = stripLineNumbers(html); - assert.ok(result.includes('let x = 1;\nlet y = 2;')); - assert.ok(!result.includes('001:')); - }); - - it('passes through lines without prefix unchanged', () => { - const html = ''; - const result = stripLineNumbers(html); - assert.ok(result.includes('no prefix here\nhas prefix')); - }); - - it('handles mixed lines (some with, some without prefixes)', () => { - const html = ''; - const result = stripLineNumbers(html); - assert.ok(result.includes('line one\nplain line\nline three')); - }); - - it('skips scripts with src attribute', () => { - const html = ''; - const result = stripLineNumbers(html); - assert.ok(result.includes('01: should stay')); - }); - - it('skips scripts with type="application/json"', () => { - const html = ''; - const result = stripLineNumbers(html); - assert.ok(result.includes('01: should stay')); - }); -}); - -// --------------------------------------------------------------------------- -// addLineNumbers -> stripLineNumbers roundtrip -// --------------------------------------------------------------------------- - -describe('addLineNumbers -> stripLineNumbers roundtrip', () => { - it('roundtrip preserves script content', () => { - const original = ''; - const numbered = addLineNumbers(original); - assert.ok(numbered.includes('01:')); - const stripped = stripLineNumbers(numbered); - assert.ok(!stripped.includes('01:')); - assert.ok(stripped.includes('let x = 1;\nlet y = 2;\nreturn x + y;')); - }); - - it('roundtrip preserves style content', () => { - const original = ''; - const numbered = addLineNumbers(original); - const stripped = stripLineNumbers(numbered); - assert.ok(stripped.includes('.a { color: red; }\n.b { color: blue; }')); - }); -}); - -// --------------------------------------------------------------------------- -// applyChangeList — line-range ops -// --------------------------------------------------------------------------- - -describe('applyChangeList — line-range ops', () => { +describe('applyChangeList — search-replace / search-insert ops', () => { const scriptHtml = '' + - '' + + '' + ''; - it('update-lines replaces a range of lines', () => { + it('search-replace replaces exact text match', () => { const changes: ChangeList = [ - { op: 'update-lines', nodeId: '5', startLine: 2, endLine: 3, content: 'let b = 20;\nlet c = 30;' }, + { op: 'search-replace', nodeId: '5', search: 'let b = 2;', replace: 'let b = 20;' }, ]; const result = applyChangeList(scriptHtml, changes); assert.ok(result.includes('let b = 20;')); - assert.ok(result.includes('let c = 30;')); - assert.ok(result.includes('01: let a = 1;')); - assert.ok(result.includes('04: let d = 4;')); - }); - - it('update-lines strips line number prefixes from model-provided content', () => { - const changes: ChangeList = [ - { op: 'update-lines', nodeId: '5', startLine: 2, endLine: 2, content: '02: let b = 99;' }, - ]; - const result = applyChangeList(scriptHtml, changes); - assert.ok(result.includes('let b = 99;')); - // Should not have double line number prefix - assert.ok(!result.includes('02: 02:')); + assert.ok(!result.includes('let b = 2;')); + assert.ok(result.includes('let a = 1;')); + assert.ok(result.includes('let c = 3;')); }); - it('update-lines can expand (replace 1 line with 3)', () => { + it('search-replace with empty replace deletes text', () => { const changes: ChangeList = [ - { op: 'update-lines', nodeId: '5', startLine: 3, endLine: 3, content: 'let c1 = 31;\nlet c2 = 32;\nlet c3 = 33;' }, + { op: 'search-replace', nodeId: '5', search: 'let c = 3;\n', replace: '' }, ]; const result = applyChangeList(scriptHtml, changes); - assert.ok(result.includes('let c1 = 31;')); - assert.ok(result.includes('let c2 = 32;')); - assert.ok(result.includes('let c3 = 33;')); - // Lines after should still be present - assert.ok(result.includes('04: let d = 4;')); + assert.ok(!result.includes('let c = 3;')); + assert.ok(result.includes('let b = 2;')); + assert.ok(result.includes('let d = 4;')); }); - it('update-lines can contract (replace 3 lines with 1)', () => { + it('search-replace falls back to normalized match', () => { + // Script has single spaces, search has different whitespace + const html = '' + + '' + + ''; const changes: ChangeList = [ - { op: 'update-lines', nodeId: '5', startLine: 2, endLine: 4, content: 'let combined = 234;' }, + { op: 'search-replace', nodeId: '5', search: 'function foo() { return 1; }', replace: 'function foo() { return 2; }' }, ]; - const result = applyChangeList(scriptHtml, changes); - assert.ok(result.includes('let combined = 234;')); - assert.ok(result.includes('01: let a = 1;')); - assert.ok(result.includes('05: let e = 5;')); - assert.ok(!result.includes('let b = 2;')); + const result = applyChangeList(html, changes); + assert.ok(result.includes('return 2;')); }); - it('delete-lines removes a range of lines', () => { + it('search-replace warns on no match found', () => { const changes: ChangeList = [ - { op: 'delete-lines', nodeId: '5', startLine: 2, endLine: 3 }, + { op: 'search-replace', nodeId: '5', search: 'nonexistent text', replace: 'replacement' }, ]; + // Should not throw const result = applyChangeList(scriptHtml, changes); - assert.ok(!result.includes('let b = 2;')); - assert.ok(!result.includes('let c = 3;')); - assert.ok(result.includes('01: let a = 1;')); - assert.ok(result.includes('04: let d = 4;')); + // Original content preserved + assert.ok(result.includes('let a = 1;')); + assert.ok(!result.includes('replacement')); }); - it('delete-lines removes a single line', () => { + it('search-replace works on style blocks', () => { + const styleHtml = ''; const changes: ChangeList = [ - { op: 'delete-lines', nodeId: '5', startLine: 3, endLine: 3 }, + { op: 'search-replace', nodeId: '3', search: '.b { color: blue; }', replace: '.b { color: purple; }' }, ]; - const result = applyChangeList(scriptHtml, changes); - assert.ok(!result.includes('let c = 3;')); - assert.ok(result.includes('02: let b = 2;')); - assert.ok(result.includes('04: let d = 4;')); + const result = applyChangeList(styleHtml, changes); + assert.ok(result.includes('.b { color: purple; }')); + assert.ok(!result.includes('color: blue')); }); - it('insert-lines inserts after a specific line', () => { + it('search-insert inserts after matched text', () => { const changes: ChangeList = [ - { op: 'insert-lines', nodeId: '5', afterLine: 2, content: 'let inserted = true;' }, + { op: 'search-insert', nodeId: '5', after: 'let b = 2;', content: '\nlet inserted = true;' }, ]; const result = applyChangeList(scriptHtml, changes); assert.ok(result.includes('let inserted = true;')); - // Verify ordering: line 2 content, then inserted, then line 3 content - const idx2 = result.indexOf('02: let b = 2;'); + const idxB = result.indexOf('let b = 2;'); const idxInserted = result.indexOf('let inserted = true;'); - const idx3 = result.indexOf('03: let c = 3;'); - assert.ok(idx2 < idxInserted); - assert.ok(idxInserted < idx3); - }); - - it('insert-lines at afterLine 0 inserts before first line', () => { - const changes: ChangeList = [ - { op: 'insert-lines', nodeId: '5', afterLine: 0, content: '// header comment' }, - ]; - const result = applyChangeList(scriptHtml, changes); - const idxComment = result.indexOf('// header comment'); - const idxFirst = result.indexOf('01: let a = 1;'); - assert.ok(idxComment < idxFirst); + const idxC = result.indexOf('let c = 3;'); + assert.ok(idxB < idxInserted); + assert.ok(idxInserted < idxC); }); - it('insert-lines at end inserts after last line', () => { + it('search-insert warns on no match found', () => { const changes: ChangeList = [ - { op: 'insert-lines', nodeId: '5', afterLine: 5, content: '// footer comment' }, + { op: 'search-insert', nodeId: '5', after: 'nonexistent text', content: '\nnew stuff' }, ]; const result = applyChangeList(scriptHtml, changes); - const idxLast = result.indexOf('05: let e = 5;'); - const idxComment = result.indexOf('// footer comment'); - assert.ok(idxLast < idxComment); + assert.ok(result.includes('let a = 1;')); + assert.ok(!result.includes('new stuff')); }); - it('warns but does not throw on missing node for line-range ops', () => { + it('warns but does not throw on missing node for search ops', () => { const ops: ChangeList = [ - { op: 'update-lines', nodeId: '999', startLine: 1, endLine: 1, content: 'x' }, - { op: 'delete-lines', nodeId: '999', startLine: 1, endLine: 1 }, - { op: 'insert-lines', nodeId: '999', afterLine: 1, content: 'x' }, + { op: 'search-replace', nodeId: '999', search: 'x', replace: 'y' }, + { op: 'search-insert', nodeId: '999', after: 'x', content: 'y' }, ]; for (const change of ops) { const result = applyChangeList(scriptHtml, [change]); - // Should not throw, content preserved assert.ok(result.includes('let a = 1;')); } }); - - it('works on '; - const changes: ChangeList = [ - { op: 'update-lines', nodeId: '3', startLine: 2, endLine: 2, content: '.b { color: purple; }' }, - ]; - const result = applyChangeList(styleHtml, changes); - assert.ok(result.includes('.b { color: purple; }')); - assert.ok(!result.includes('color: blue')); - }); }); // --------------------------------------------------------------------------- @@ -950,7 +836,7 @@ describe('transformPage', () => { assert.strictEqual(capturedNewBuild, false); }); - it('applies update-lines through full pipeline and strips line numbers', async () => { + it('applies search-replace through full pipeline', async () => { const pageWithScript = `

SynthOS: Welcome!

@@ -960,14 +846,14 @@ describe('transformPage', () => { `; const builder = makeBuilder(async (currentPage) => { - // The current page should have line numbers - assert.ok(currentPage.content.includes('01:'), 'currentPage should contain line numbers'); + // The current page should NOT have line numbers + assert.ok(!currentPage.content.includes('01:'), 'currentPage should not contain line numbers'); // Find the script node id const scriptNodeId = findNodeId(currentPage.content, 'id="page-script"'); return { kind: 'transforms', changes: [ - { op: 'update-lines', nodeId: scriptNodeId, startLine: 1, endLine: 1, content: 'let count = 42;' }, + { op: 'search-replace', nodeId: scriptNodeId, search: 'let count = 0;', replace: 'let count = 42;' }, ], }; }); @@ -977,8 +863,6 @@ describe('transformPage', () => { assert.ok(result.value); // Edit should be applied assert.ok(result.value.html.includes('let count = 42;')); - // Line numbers should be stripped - assert.ok(!result.value.html.match(/\d{2}: /), 'No line number prefixes should remain'); // Node ids should be stripped assert.ok(!result.value.html.includes('data-node-id')); assert.strictEqual(result.value.changeCount, 1); From e4ff8e77f4e4928cc82a20d1eb141ae35d1c381c Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Tue, 24 Feb 2026 15:03:00 -0800 Subject: [PATCH 02/13] new themes --- CLAUDE.md | 2 + Component-Explorer.html | 1966 +++++++++ Style-Guide.html | 1175 ++++++ default-themes/nebula-dawn.v3.css | 199 + default-themes/nebula-dusk.v3.css | 201 + migration-rules/v2-to-v3.md | 111 + static-files/fluentlm-instructions.llmd | 868 ++++ static-files/fluentlm-instructions.md | 1595 ++++++++ static-files/fluentlm.css | 4844 +++++++++++++++++++++++ static-files/fluentlm.js | 3602 +++++++++++++++++ static-files/fluentlm.min.css | 1 + static-files/fluentlm.min.js | 1 + static-files/theme-dark.css | 169 + static-files/theme-light.css | 169 + 14 files changed, 14903 insertions(+) create mode 100644 Component-Explorer.html create mode 100644 Style-Guide.html create mode 100644 default-themes/nebula-dawn.v3.css create mode 100644 default-themes/nebula-dusk.v3.css create mode 100644 migration-rules/v2-to-v3.md create mode 100644 static-files/fluentlm-instructions.llmd create mode 100644 static-files/fluentlm-instructions.md create mode 100644 static-files/fluentlm.css create mode 100644 static-files/fluentlm.js create mode 100644 static-files/fluentlm.min.css create mode 100644 static-files/fluentlm.min.js create mode 100644 static-files/theme-dark.css create mode 100644 static-files/theme-light.css diff --git a/CLAUDE.md b/CLAUDE.md index 1b4ba9b..f500330 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -314,6 +314,8 @@ Documentation should explain \*\*why\*\*, not restate code. \- **Architecture context:** Always read `.architecture/ARCHITECTURE.md` at the start of a task to understand the current system design before making changes. +\- **Page changes:** Always read `static-files/fluentlm-instructions.md` before making changes to pages or the page transformation pipeline. + --- diff --git a/Component-Explorer.html b/Component-Explorer.html new file mode 100644 index 0000000..540020b --- /dev/null +++ b/Component-Explorer.html @@ -0,0 +1,1966 @@ + + + + + + FluentLM + + + + + + + + + + + +
+ + + + + +
+ + +
+
Awarity Icons
+
+
Icons registered by awarity-v2.js
+
+
Awarity
+
Database
+
Org
+
Flow
+
Processing
+
TextDocument
+
Refresh
+
Tag
+
Download
+
FolderOpen
+
ViewList
+
Copy
+
Beaker
+
Play
+
ChevronLeft
+
ChevronUp
+
ChevronDown
+
Edit
+
CheckMark
+
Cancel
+
Back
+
Clock
+
+
+
+ + +
+
Confirmation Modal
+ +
+
Delete Confirmation
+

+ awarity.showConfirmation({ title, message, type: 'delete' }) — returns Promise<boolean> +

+
+ + +
+
+ +
+
Normal Confirmation
+

+ awarity.showConfirmation({ title, message, type: 'normal' }) — returns Promise<boolean> +

+
+ + +
+
+
+ + +
+
File & Folder Picker
+ +
+
Folder Picker
+
+ +
+ + +
+
+
+ +
+
File Picker
+
+ +
+ + +
+
+
+
+ + +
+
Button
+ +
+
Variants
+
+ + + + + +
+
+ +
+
With Icons
+
+ + + + + + + +
+
+ +
+
Compound
+
+ + +
+
+ +
+
Split Button
+
+ + +
+
+
+ + +
+
Text & Label
+ +
+
Text Sizes
+
+ tiny (10px) + small (12px) + medium (14px — default) + mediumPlus (16px) + large (18px) + xLarge (20px / semibold) + xxLarge (28px / semibold) +
+
+ +
+
+
Text Colors
+
+ Default body text + Secondary text + Disabled text + Error text + Success text + Semibold text + Bold text +
+
+ +
+
Labels
+
+ + + +
+
+
+
+ + + + + +
+
TextField
+ +
+
+
Standard
+
+
+ + +
+
+ + +
+
+ + + Must be a positive number +
+
+ + +
+
+
+ +
+
Variants
+
+
+ + +
+
+ + +
+
+ +
+ https:// + +
+
+
+ + +
+
+
+
+
+ + +
+
Checkbox
+ +
+
+ + + + +
+
+
+ + +
+
Toggle
+ +
+
+ + + +
+
+
+ + + + + +
+
Stack
+ +
+
+
Vertical (default)
+
+
Row 1
+
Row 2
+
Row 3
+
+
+ +
+
Horizontal + grow
+
+
Grows
+
Fixed
+
Fixed
+
+
+ +
+
Horizontal + center
+
+
Centered
+
Items
+
+
+ +
+
Horizontal + wrap
+
+
Tag 1
+
Tag 2
+
Tag 3
+
Tag 4
+
Tag 5
+
+
+
+
+ + +
+
Separator
+ +
+
+ Above separator +
+ Below separator +
+
+
+ Left +
+ Middle +
+ Right +
+
+
+ + +
+
Spinner
+ +
+
+
+ + xSmall +
+
+ + small +
+
+ + medium +
+ +
+
+
+ + +
+
MessageBar
+ +
+
This is an informational message.
+
Operation completed successfully.
+
Please review before continuing.
+
Immediate action is required.
+
Something went wrong. Please try again.
+
This action is blocked by your organization.
+
+
+ + +
+
Dialog
+
+ + +
+ +
+
+
+

Confirm Action

+ +
+
+

Are you sure you want to proceed? This action cannot be undone.

+
+
+ + +
+
+
+ +
+
+
+

Welcome

+ +
+
+

This dialog has a large header variant for prominent headings.

+
+
+ +
+
+
+
+ + +
+
Panel
+
+ + +
+ +
+
+
+

Settings

+ +
+
+
+
+ + +
+ +
+
+
+ + +
+
+ +
+
+
+

Medium Panel

+ +
+
+

This is a medium-width panel (592px).

+
+
+
+ + +
+
Callout
+ +
+
+
+ Callout Title + This is a callout with helpful information anchored to the button above. +
+
+
+ + +
+
CommandBar
+
+
+
+ + + + + + +
+
+ + +
+
+
+
+ + + + + + + + +
+
Pivot
+
+
+
+ + + + +
+
+

Overview content goes here. This is the first tab panel.

+
+
+

Details content with more information.

+
+
+

History of changes and activity.

+
+
+
+
+ + +
+
DetailsList
+
+
+
+
+ +
+
Name
+
Status
+
Modified
+
Owner
+
+
+
+
Quarterly Report.docx
+
Active
+
Feb 20, 2026
+
Jane Doe
+
+
+
+
Budget 2026.xlsx
+
Draft
+
Feb 18, 2026
+
John Smith
+
+
+
+
Presentation.pptx
+
Active
+
Feb 15, 2026
+
Alex Johnson
+
+
+
+
+ + + + + +
+
ContextualMenu
+
+ +
Right-click here
+
+ +
+
File
+ + + +
+ +
+ +
+ + + +
+
+ + +
+
ProgressIndicator
+
+
+
+
+ Uploading files… +
+ 65% complete +
+
+ Complete +
+
+
+ Processing… +
+
+
+
+
+
+ + +
+
Tooltip
+
+ Hover for tooltip + + Help link +
+
+ + +
+
Persona
+
+
+
Sizes & Presence
+
+
+
JD
+
+ Jane Doe +
+
+
+
JS
+
+ John Smith + Software Engineer +
+
+
+
AJ
+
+ Alex Johnson + Product Manager + Contoso Ltd +
+
+
+
MK
+
+ Maria Kim + Designer +
+
+
+
+
+
+ + +
+
ChoiceGroup
+
+
+
Vertical (default)
+
+ + + + +
+
+
+
Horizontal
+
+ + + +
+
+
+
+ + +
+
Shimmer
+
+
+
Lines
+
+
+
+
+
+
+
+
Row with avatar
+
+
+
+
+
+
+
+
+
+
Block
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
List
+
+
+
Bordered & Scrollable
+
+
+ Selected Item +
+
+ Second Item +
+
+
+ Two-line Item + Secondary text here +
+
+
+ Disabled Item +
+
+ Fifth Item +
+
+ Sixth Item +
+
+
+
+
Compact
+
+
Item Alpha
+
Item Beta
+
Item Gamma
+
Item Delta
+
+
+
+
+ + +
+
GroupedList
+
+
+
+ +
+
Document.docx
+
Report.xlsx
+
Slides.pptx
+
+
+
+ +
+
OldFile.doc
+
Locked.pdf
+
+
+
+
+
+ + +
+
Rating
+
+
+
Interactive
+
+ + + + + +
+
+
+
Readonly (4 stars)
+
+ + + + + +
+
+
+
Large
+
+ + + + + +
+
+
+
+ + +
+
Facepile
+
+
+
Default (all visible)
+
+ JD + AB + MK +
+
+
+
With overflow (max 3)
+
+ JD + AB + MK + TW + SR +
+
+
+
With add button
+
+ JD + AB + +
+
+
+
+ + +
+
SwatchColorPicker
+
+
+
Square
+
+ + + + + + + + + + +
+
+
+
Circle
+
+ + + + + +
+
+
+
+ + +
+
DocumentCard
+
+
+
+
+
+
+ Quarterly Report.docx +
+
+ JD +
+ Jane Doe + Modified Feb 20 +
+
+
+
+
+
+
+
+ Budget 2026.xlsx + John Smith · Feb 18 +
+
+
+
+ + +
+
SpinButton
+
+
+
Default
+
+ +
+ + + +
+
+
+
+
Disabled
+
+ +
+ + + +
+
+
+
+
+ + +
+
Slider
+
+
+
Horizontal
+
+
+ +
+
+ + 60 +
+
+
+
+
Disabled
+
+
+ +
+
+ + 40 +
+
+
+
+
+ + +
+
ComboBox
+
+
+
Single select
+
+ +
+ + +
+
+
Apple
+
Banana
+
Cherry
+
Grape
+
Mango
+
Orange
+
Peach
+
+
+
+
+
Multi-select
+
+ +
+ + +
+
+
Cheese
+
Pepperoni
+
Mushrooms
+
Olives
+
Onions
+
+
+
+
+
+ + +
+
TeachingBubble
+ +
+
+
+

Welcome to FluentLM!

+ +
+
+ This is a teaching bubble. It draws attention to a feature and provides guidance to help users understand it. +
+
+ + +
+
+
+ + +
+
HoverCard
+
+ Hover for details +
+
+
+
Jane Doe
+
Software Engineer · Contoso
+
+
+
+

jane.doe@contoso.com

+

Building 42, Room 3014

+
+
+
+
+ + +
+
Coachmark
+
+ Click the pulsing dot to see the teaching bubble: +
+
+
+
+
+
+
+

New Feature

+ +
+
+ This coachmark highlights a new feature. The beacon disappears once dismissed. +
+
+ +
+
+
+
+ + +
+
DatePicker
+
+
+
Default
+
+ +
+ + +
+
+
+
+
With constraints
+
+ +
+ + +
+
+
+
+
+ + +
+
TagPicker
+
+
+
Default
+
+ +
+ +
+
+
React
+
Angular
+
Vue
+
Svelte
+
TypeScript
+
JavaScript
+
+
+
+
+
Max 3 tags
+
+ +
+ +
+
+
Apple
+
Banana
+
Cherry
+
Grape
+
Mango
+
+
+
+
+
+
+
PeoplePicker
+
+ +
+ +
+
+
+ JD + + Jane Doe + Software Engineer + +
+
+ JS + + John Smith + Product Manager + +
+
+ AW + + Alice Wang + Designer + +
+
+ BJ + + Bob Johnson + QA Engineer + +
+
+
+
+
+
Disabled
+
+ +
+ + React + + + Vue + + +
+
+
+
+
+
+ + +
+
OverflowSet
+
+
Resize the container to see overflow
+
+
+
+ + + + + +
+ +
+
+
+
+
With far-side items
+
+
+
+ + + + +
+ +
+ + +
+
+
+
+
+ + +
+
TimePicker
+
+
+
Default (24h, 30-min)
+
+ +
+ + +
+
+
+
+
12-hour AM/PM
+
+ +
+ + +
+
+
+
+
Business hours (15-min)
+
+ +
+ + +
+
+
+
+
+ + +
+
Palette
+
+
Brand / Theme
+
+
themeDarker
#004578
+
themeDark
#005a9e
+
themeDarkAlt
#106ebe
+
themePrimary
#0078d4
+
themeSecondary
#2b88d8
+
themeTertiary
#71afe5
+
themeLight
#c7e0f4
+
themeLighter
#deecf9
+
themeLighterAlt
#eff6fc
+
+
+
+
Neutrals
+
+
black
+
neutralDark
+
neutralPrimary
+
neutralSecondary
+
neutralTertiary
+
neutralQuaternary
+
neutralLight
+
neutralLighter
+
neutralLighterAlt
+
white
+
+
+
+
Status
+
+
red
+
orange
+
yellow
+
green
+
teal
+
blue
+
purple
+
magenta
+
+
+
+ + +
+
Typography
+
+
+ tiny — 10px + small — 12px + medium — 14px (default) + mediumPlus — 16px + large — 18px + xLarge — 20px / semibold + xxLarge — 28px / semibold + superLarge — 42px +
+
+
+ + +
+
Elevation
+
+
depth 0
+
depth 4
+
depth 8
+
depth 16
+
depth 64
+
+
+ + +
+
Spacing
+
+
+
+ --spacingS2 — 4px +
+
+
+ --spacingS1 — 8px +
+
+
+ --spacingM — 16px +
+
+
+ --spacingL1 — 20px +
+
+
+ --spacingL2 — 32px +
+
+
+ +
+
+ + + + + + + diff --git a/Style-Guide.html b/Style-Guide.html new file mode 100644 index 0000000..89416cb --- /dev/null +++ b/Style-Guide.html @@ -0,0 +1,1175 @@ + + + + + + FluentLM — Stylable Properties + + + + + + + + + + + + +
+
+
FluentLM
+
Design System
+
+
+ + + +
+ + 1 / 22 + +
+
+
+ + +
+ + +
+
+

FluentLM

+

A complete design token and component system for building Fluent-styled web applications. Every property shown here is fully stylable.

+
← → to navigate · click a theme above to switch
+
+
+ + +
+

Theme Accent Ramp

+

The 9-stop accent ramp drives all interactive elements — buttons, links, focus rings, selections, and icons. Override these tokens per-theme to rebrand the entire system.

+
+

Semantic Usage

+ + + + + + + + + +
TokenUsed By
--themePrimaryPrimary buttons, active tabs, active nav borders, filter pills, links
--themeSecondaryInput focus borders, input icons, menu icons, hover accents
--themeDarkAltPrimary button hover, input checked hover
--themeDarkPrimary button pressed states
--themeTertiarySubtle accents, icon tints
--themeLightLight accent backgrounds, selection highlights
--themeLighterLightest accent wash, hover tints
+
+ + +
+

Neutral Palette

+

A 15-stop neutral ramp from black to white. These feed into all semantic surface, text, and border tokens.

+
+
+ + +
+

Accent Colors

+

Named accent colors for status indicators, data visualization, and brand expression.

+
+
+ + +
+

Typography

+

A complete type scale with matching line heights. Use the .flm-text--* utility classes or reference tokens directly.

+
+
+

Type Scale

+
+
+
+

Font Weights

+
+ Light (100) + Semilight (300) + Regular (400) + Semibold (600) + Bold (700) +
+

Monospace

+
+ const result = await awarity.ask(query);
+ console.log(result.answer); +
+

Text Utilities

+
+ flm-text--secondary + flm-text--disabled + flm-text--error + flm-text--success +
+
+
+
+ + +
+

Spacing, Radius & Elevation

+

Standardized spacing, corner radius, and shadow tokens for consistent depth and layout.

+
+
+

Spacing

+
+
+
+

Border Radius

+
+
+
+ roundedCorner2 (2px) +
+
+
+ roundedCorner4 (4px) +
+
+
+ roundedCorner6 (6px) +
+
+

Motion

+ + + + + +
--duration1100ms
--duration2200ms
--duration3300ms
--duration4400ms
+
+
+

Elevation

+
+
elevation4
+
elevation8
+
elevation16
+
elevation64
+
+
+
+
+ + +
+

Buttons

+

All button variants, states, and compositions. 16 button tokens control every visual state.

+
+
+

Variants

+
+ + + + +
+
Disabled
+
+ + + +
+
With Icons
+
+ + + +
+
+
+

Compound Button

+ +

Split Button

+
+ +
+

Button Tokens

+ + + + + + +
--buttonBackground
--buttonBackgroundHovered
--primaryButtonBackground
--primaryButtonBackgroundHovered
--buttonBorder
+
+
+
+ + +
+

Text Fields

+

Input fields with labels, required states, error states, prefixes/suffixes, and textarea support.

+
+
+

Standard

+
+
+ + +
+
+ + +
+
+ + + This field contains invalid characters. +
+
+ + +
+
+
+
+

Variants

+
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ + +
+
+

Input Tokens

+ + + + + +
--inputBackground
--inputBorder
--inputFocusBorderAlt
--inputText
+
+
+
+ + +
+

Dropdowns, ComboBox & Search

+

Selection controls with filtering, multi-select, and search capabilities.

+
+
+

Dropdown

+
+
+ +
+
+
+ +
+
+

ComboBox

+
+
+
+ + +
+
+
+
+
+
+

SearchBox

+
+
+ +
+
+ +
+
+

TagPicker

+
+
+
+ finance + regulatory + +
+
+
legal
+
compliance
+
technical
+
+
+
+

Swatch Color Picker

+
+ + + + + + +
+
+
+
+ + +
+

Selection Controls

+

Checkboxes, radio groups, toggles, sliders, spin buttons, and rating stars.

+
+
+

Checkbox

+
+ + + +
+

ChoiceGroup (Radio)

+
+ + + +
+
+
+

Toggle

+
+ + + +
+

Slider

+
+
+ +
+
Confidence65
+
+

SpinButton

+
+
+ + + +
+
+

Rating

+
+ + + + + +
+
+
+
+ + +
+

Date & Time Pickers

+

Calendar and time selection controls with min/max constraints and formatting options.

+
+
+

DatePicker

+
+
+
+ + +
+
+
+

DatePicker with Error

+
+
+
+ + +
+ Invalid date format. +
+
+
+
+

TimePicker

+
+
+
+ + +
+
+
+

TimePicker Disabled

+
+
+
+ + +
+
+
+
+
+
+ + +
+

CommandBar & Breadcrumb

+

Application-level navigation and action chrome.

+
+
+

CommandBar

+
+
+ + + + + +
+
+
+ +
+
+
+
+
+

Breadcrumb

+
+
Default
+
    +
  1. Home
    2. +
  2. Catalogs
    3. +
  3. sec-filings
    4. +
+
+
Large
+
    +
  1. Home
    2. +
  2. Workflows
    3. +
+
+
Small
+
    +
  1. Home
    2. +
  2. Structure
    3. +
  3. Labels
    4. +
+
+
+
+
+
+ + +
+

DetailsList & Lists

+

Data tables and list components with selection, grouping, and compact variants.

+
+

DetailsList

+
+
+
+
Name
+
Categories
+
Documents
+
Status
+
+
+
+
sec-filings
+
finance, regulatory
+
2,341
+
Ready
+
+
+
+
legal-contracts
+
legal, compliance
+
847
+
Missing
+
+
+
+
research-papers
+
research
+
512
+
Error
+
+
+
+
+
+

GroupedList

+
+
+
▸ Finance 2
+
+
sec-filings
+
compliance-docs
+
+
+
+
▸ Research 1
+
+
research-papers
+
+
+
+
+
+

List Tokens

+ + + + + +
--listBackground
--listItemBackgroundHovered
--listItemBackgroundChecked
--listText
+
+
+
+ + +
+

Pivots & Nav

+

Tab navigation (Pivots) and hierarchical navigation (Nav) components.

+
+
+

Pivot — Tabs Style

+
+
+ + + + +
+
Panel content for the Edit tab.
+
Panel content for the Abstracts tab.
+
Panel content for the Usage tab.
+
+

Pivot — Links Style

+
+
+ + + +
+
The synthesized answer appears here.
+
Source documents listed here.
+
Execution logs appear here.
+
+
+
+

Nav

+
+
+
▸ Catalogs
+
+ sec-filings + legal-contracts + research-papers +
+
+
+
▸ Workflows
+
+ financial-risk-report +
+
+ Settings + Disabled Link +
+
+
+
+ + +
+

Status & Loading

+

Message bars for status communication, progress indicators, spinners, and loading shimmers.

+
+
+

Message Bars

+
+
This is an informational message.
+
Operation completed successfully.
+
Abstracts are missing for 847 documents.
+
Classification model is nearing token limits.
+
Failed to connect to catalog source.
+
Access denied to this resource.
+
+

Status Tokens

+ + + + + +
--infoBackground--infoIcon
--successBackground--successText
--warningBackground--errorText
--errorBackground--errorIcon
+
+
+

Progress

+
+
+
Determinate — 56%
+
+
+
+
Indeterminate
+
+
+
+

Spinner

+
+
xSmall
+
small
+
default
+
large
+
+

Shimmer

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+

Panels & Dialogs

+

Overlay surfaces for detail editing, confirmation dialogs, and modal workflows. Click the buttons to preview.

+
+
+

Panel Sizes

+
+ + + +
+

Panel Tokens

+ + + + +
--overlayBackground
--cardStandoutBackground
--bodyFrameDivider
+
+
+

Dialogs

+
+ + +
+
+
+ + +
+
+

Small Panel

+

Panel body content. Width: small (340px).

+
+
+
+
+

Medium Panel

+

Panel body content. Width: medium (592px).

+
+
+
+
+

Large Panel

+

Panel body content. Width: large (940px).

+
+
+ + +
+
+

Confirm Action

+

Are you sure you want to delete this catalog? This action cannot be undone.

+
+
+
+
+
+

New Catalog Wizard

+

This dialog uses the flm-dialog--large-header variant for a taller title area. Ideal for multi-step wizards.

+
+
+
+
+ + +
+

Personas & Cards

+

Identity components and content cards with preview areas and activity indicators.

+
+
+

Persona Sizes

+
+
A
+
AB
Alice B.
+
JD
Jane Doe
Analyst
+
MS
Max Smith
Engineer
Online
+
+

Presence

+
+
A
Available
+
B
Busy
+
C
Away
+
D
Offline
+
E
DND
+
+

Facepile

+
+
AB
+
CD
+
EF
+
GH
+
IJ
+
KL
+
+
+
+

DocumentCard

+
+
+ +
+
+
10-K_ACME_2025.pdf
+
+ sec-filings + Feb 22, 2026 +
+
+
+

Card Tokens

+ + + + + +
--cardStandoutBackground
--cardShadowshadow value
--variantBorder
--variantBorderHovered
+
+
+
+ + +
+

Icons

+

All registered icons from the base library and Awarity extension. Use <i class="flm-icon" data-icon="Name"> or register custom SVG paths via FluentIcons.register().

+
+
+ +
+ + + + + + + + + diff --git a/default-themes/nebula-dawn.v3.css b/default-themes/nebula-dawn.v3.css new file mode 100644 index 0000000..29e4958 --- /dev/null +++ b/default-themes/nebula-dawn.v3.css @@ -0,0 +1,199 @@ +/* ========================================================================== + Nebula Dawn — Light Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Nebula purple. + ========================================================================== */ + +:root, +.nebula-dawn { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Nebula purple ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #667eea; + --themeDark: #764ba2; + --themeDarkAlt: #5639a0; + --themeDarker: #432d80; + --themeSecondary: #c054d4; + --themeTertiary: #8b9ef0; + --themeLight: #c5cff7; + --themeLighter: #e0e5fb; + --themeLighterAlt: #f3f5fe; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (warm purple-tinted) + ----------------------------------------------------------------------- */ + --neutralDark: #1e1830; + --neutralPrimary: #2d2640; + --neutralPrimaryAlt: #3d2e56; + --neutralSecondary: #6b4f8a; + --neutralSecondaryAlt: #5e4579; + --neutralTertiary: #8a7a9d; + --neutralTertiaryAlt: #a898b5; + --neutralQuaternary: #cbc0d6; + --neutralQuaternaryAlt: #d5cae0; + --neutralLight: #e8dff0; + --neutralLighter: #f0e6f6; + --neutralLighterAlt: #f7f2fa; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--white); + --bodyBackgroundHovered: var(--neutralLighter); + --bodyBackgroundChecked: var(--neutralLight); + --bodyStandoutBackground: var(--neutralLighterAlt); + --bodyFrameBackground: var(--white); + --bodyFrameDivider: var(--neutralLight); + --bodyDivider: var(--neutralLight); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralPrimary); + --bodyTextChecked: var(--neutralDark); + --bodySubtext: var(--neutralSecondary); + --disabledText: var(--neutralTertiary); + --disabledBodyText: var(--neutralTertiary); + --disabledSubtext: var(--neutralQuaternary); + --disabledBodySubtext: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: var(--themePrimary); + --linkHovered: var(--themeDarker); + --actionLink: var(--neutralPrimary); + --actionLinkHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--white); + --buttonBackgroundHovered: var(--neutralLighter); + --buttonBackgroundChecked: var(--neutralLight); + --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --buttonBackgroundPressed: var(--neutralLight); + --buttonBackgroundDisabled: var(--neutralLighter); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralLighter); + --buttonText: var(--neutralPrimary); + --buttonTextHovered: var(--neutralDark); + --buttonTextChecked: var(--neutralDark); + --buttonTextCheckedHovered: var(--black); + --buttonTextPressed: var(--neutralDark); + --buttonTextDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralLighter); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralQuaternary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--white); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeLighter); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralSecondary); + --smallInputBorder: var(--neutralSecondary); + --inputBorderHovered: var(--neutralPrimary); + --inputFocusBorderAlt: var(--themePrimary); + --inputText: var(--neutralPrimary); + --inputTextHovered: var(--neutralDark); + --inputPlaceholderText: var(--neutralSecondary); + --inputIcon: var(--themePrimary); + --inputIconHovered: var(--themeDark); + --inputIconDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--white); + --listText: var(--neutralPrimary); + --listItemBackgroundHovered: var(--neutralLighter); + --listItemBackgroundChecked: var(--neutralLight); + --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --listHeaderBackgroundHovered: var(--neutralLighter); + --listHeaderBackgroundPressed: var(--neutralLight); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--white); + --menuDivider: var(--neutralTertiaryAlt); + --menuIcon: var(--themePrimary); + --menuHeader: var(--themePrimary); + --menuItemBackgroundHovered: var(--neutralLighter); + --menuItemBackgroundPressed: var(--neutralLight); + --menuItemText: var(--neutralPrimary); + --menuItemTextHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--white); + --cardShadow: var(--elevation4); + --cardShadowHovered: var(--elevation8); + --variantBorder: var(--neutralLight); + --variantBorderHovered: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralLighter); + --disabledBorder: var(--neutralLighter); + --focusBorder: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralLighter); + --errorBackground: #FDE7E9; + --blockingBackground: #FDE7E9; + --warningBackground: #FFF4CE; + --severeWarningBackground: #FED9CC; + --successBackground: #DFF6DD; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralSecondary); + --errorIcon: #A80000; + --blockingIcon: #FDE7E9; + --warningIcon: #797775; + --severeWarningIcon: var(--orange); + --successIcon: var(--green); + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: var(--redDark); + --messageText: var(--neutralPrimary); + --messageLink: var(--themeDark); + --messageLinkHovered: var(--themeDarker); + --warningText: var(--neutralPrimary); + --successText: var(--green); + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralLighterAlt); + --overlayBackground: var(--blackTranslucent40); +} diff --git a/default-themes/nebula-dusk.v3.css b/default-themes/nebula-dusk.v3.css new file mode 100644 index 0000000..9ab7ef8 --- /dev/null +++ b/default-themes/nebula-dusk.v3.css @@ -0,0 +1,201 @@ +/* ========================================================================== + Nebula Dusk — Dark Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Nebula purple, dark mode. + ========================================================================== */ + +.nebula-dusk { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Nebula purple ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #667eea; + --themeDark: #764ba2; + --themeDarkAlt: #5639a0; + --themeDarker: #432d80; + --themeSecondary: #f093fb; + --themeTertiary: #8b9ef0; + --themeLight: #c5cff7; + --themeLighter: #e0e5fb; + --themeLighterAlt: #f3f5fe; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (inverted for dark mode) + ----------------------------------------------------------------------- */ + --black: #000000; + --neutralDarker: #0f0f23; + --neutralDark: #16213e; + --neutralPrimary: #1a1a2e; + --neutralPrimaryAlt: #222244; + --neutralSecondary: #2e2e52; + --neutralSecondaryAlt: #3a3a60; + --neutralTertiary: #5a5a80; + --neutralTertiaryAlt: #b794f6; + --neutralQuaternary: #7a7a9a; + --neutralQuaternaryAlt: #8a8aaa; + --neutralLight: #a0a0c0; + --neutralLighter: #e0e0e0; + --neutralLighterAlt: #f0f0f0; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--neutralPrimary); + --bodyBackgroundHovered: var(--neutralPrimaryAlt); + --bodyBackgroundChecked: var(--neutralSecondary); + --bodyStandoutBackground: var(--neutralDark); + --bodyFrameBackground: var(--neutralPrimary); + --bodyFrameDivider: var(--neutralSecondary); + --bodyDivider: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralLighter); + --bodyTextChecked: var(--white); + --bodySubtext: var(--neutralTertiaryAlt); + --disabledText: var(--neutralSecondary); + --disabledBodyText: var(--neutralSecondary); + --disabledSubtext: var(--neutralSecondaryAlt); + --disabledBodySubtext: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LINKS (Nebula purple instead of default blue) + ----------------------------------------------------------------------- */ + --link: #b794f6; + --linkHovered: #d4b8ff; + --actionLink: var(--neutralLighter); + --actionLinkHovered: var(--white); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--neutralPrimary); + --buttonBackgroundHovered: var(--neutralPrimaryAlt); + --buttonBackgroundChecked: var(--neutralSecondary); + --buttonBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --buttonBackgroundPressed: var(--neutralSecondary); + --buttonBackgroundDisabled: var(--neutralDark); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralDark); + --buttonText: var(--neutralLighter); + --buttonTextHovered: var(--white); + --buttonTextChecked: var(--white); + --buttonTextCheckedHovered: var(--white); + --buttonTextPressed: var(--white); + --buttonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralDark); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--neutralPrimary); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeDark); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralTertiary); + --smallInputBorder: var(--neutralTertiary); + --inputBorderHovered: var(--neutralLighter); + --inputFocusBorderAlt: var(--themeSecondary); + --inputText: var(--neutralLighter); + --inputTextHovered: var(--white); + --inputPlaceholderText: var(--neutralTertiaryAlt); + --inputIcon: var(--themeSecondary); + --inputIconHovered: var(--themePrimary); + --inputIconDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--neutralPrimary); + --listText: var(--neutralLighter); + --listItemBackgroundHovered: var(--neutralPrimaryAlt); + --listItemBackgroundChecked: var(--neutralSecondary); + --listItemBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --listHeaderBackgroundHovered: var(--neutralPrimaryAlt); + --listHeaderBackgroundPressed: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--neutralPrimary); + --menuDivider: var(--neutralSecondary); + --menuIcon: var(--themeSecondary); + --menuHeader: var(--themeSecondary); + --menuItemBackgroundHovered: var(--neutralPrimaryAlt); + --menuItemBackgroundPressed: var(--neutralSecondary); + --menuItemText: var(--neutralLighter); + --menuItemTextHovered: var(--white); + + /* ----------------------------------------------------------------------- + CARDS + In dark themes Fluent v8 drops shadows and uses borders instead. + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--neutralDark); + --cardShadow: none; + --cardShadowHovered: none; + --variantBorder: var(--neutralSecondary); + --variantBorderHovered: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralDark); + --disabledBorder: var(--neutralDark); + --focusBorder: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralPrimary); + --errorBackground: #442726; + --blockingBackground: #442726; + --warningBackground: #433519; + --severeWarningBackground: #4F2A0F; + --successBackground: #393D1B; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralTertiaryAlt); + --errorIcon: #F1707B; + --blockingIcon: #442726; + --warningIcon: var(--neutralTertiaryAlt); + --severeWarningIcon: #FCE100; + --successIcon: #92C353; + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: #F1707B; + --messageText: var(--neutralLighter); + --messageLink: #b794f6; + --messageLinkHovered: #d4b8ff; + --warningText: var(--neutralLighter); + --successText: #92C353; + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralDark); + --overlayBackground: rgba(0, 0, 0, 0.6); +} diff --git a/migration-rules/v2-to-v3.md b/migration-rules/v2-to-v3.md new file mode 100644 index 0000000..7a7aade --- /dev/null +++ b/migration-rules/v2-to-v3.md @@ -0,0 +1,111 @@ +# 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 ` + + + + +
+
+
FluentLM
+
Theme Gallery
+
+
+ + + + + + + + + + +
+
+ + +
+ + +
+

Nebula Dusk

+ Purple + Dark +
+ + +

Brand / Accent Ramp

+
+ + +

Neutral Ramp

+
+ + +

Component Preview

+
+
+

Buttons

+
+ + + + +
+
+ + +
+
+
+

Text Fields

+
+
+ + +
+
+ + + Invalid value. +
+
+
+
+

Card Example

+
+
Document Title
+
A card rendered with the current theme's surface and border tokens.
+
+ + +
+
+
+
+

Message Bars

+
+
Informational message.
+
Operation succeeded.
+
Warning: check inputs.
+
Severe warning issued.
+
An error occurred.
+
Access blocked.
+
+
+
+ +
+ + + + + + diff --git a/default-themes/aurora-dawn.json b/default-themes/aurora-dawn.json new file mode 100644 index 0000000..819cf9d --- /dev/null +++ b/default-themes/aurora-dawn.json @@ -0,0 +1,19 @@ +{ + "mode": "light", + "colors": { + "bg-primary": "#e9f4f6", + "bg-secondary": "#dceef0", + "bg-tertiary": "#f2f9fa", + "accent-primary": "#00b4d8", + "accent-secondary": "#008299", + "accent-tertiary": "#66d3e8", + "accent-glow": "rgba(0,180,216,0.15)", + "text-primary": "#18363c", + "text-secondary": "#40788a", + "border-color": "rgba(0,180,216,0.25)", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/aurora-dawn.v3.css b/default-themes/aurora-dawn.v3.css new file mode 100644 index 0000000..34af549 --- /dev/null +++ b/default-themes/aurora-dawn.v3.css @@ -0,0 +1,198 @@ +/* ========================================================================== + Aurora Dawn — Light Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Aurora teal/cyan. + ========================================================================== */ + +.aurora-dawn { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Aurora teal ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #00b4d8; + --themeDark: #008299; + --themeDarkAlt: #009ab8; + --themeDarker: #004d5e; + --themeSecondary: #33c3e0; + --themeTertiary: #66d3e8; + --themeLight: #b3e8f3; + --themeLighter: #d9f3f9; + --themeLighterAlt: #ecf9fc; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (cool teal-tinted) + ----------------------------------------------------------------------- */ + --neutralDark: #0e2a2e; + --neutralPrimary: #18363c; + --neutralPrimaryAlt: #1e4a52; + --neutralSecondary: #40788a; + --neutralSecondaryAlt: #366a79; + --neutralTertiary: #709da8; + --neutralTertiaryAlt: #8eb5be; + --neutralQuaternary: #bbd6db; + --neutralQuaternaryAlt: #cae0e4; + --neutralLight: #dceef0; + --neutralLighter: #e9f4f6; + --neutralLighterAlt: #f2f9fa; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--white); + --bodyBackgroundHovered: var(--neutralLighter); + --bodyBackgroundChecked: var(--neutralLight); + --bodyStandoutBackground: var(--neutralLighterAlt); + --bodyFrameBackground: var(--white); + --bodyFrameDivider: var(--neutralLight); + --bodyDivider: var(--neutralLight); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralPrimary); + --bodyTextChecked: var(--neutralDark); + --bodySubtext: var(--neutralSecondary); + --disabledText: var(--neutralTertiary); + --disabledBodyText: var(--neutralTertiary); + --disabledSubtext: var(--neutralQuaternary); + --disabledBodySubtext: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: var(--themePrimary); + --linkHovered: var(--themeDarker); + --actionLink: var(--neutralPrimary); + --actionLinkHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--white); + --buttonBackgroundHovered: var(--neutralLighter); + --buttonBackgroundChecked: var(--neutralLight); + --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --buttonBackgroundPressed: var(--neutralLight); + --buttonBackgroundDisabled: var(--neutralLighter); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralLighter); + --buttonText: var(--neutralPrimary); + --buttonTextHovered: var(--neutralDark); + --buttonTextChecked: var(--neutralDark); + --buttonTextCheckedHovered: var(--black); + --buttonTextPressed: var(--neutralDark); + --buttonTextDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralLighter); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralQuaternary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--white); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeLighter); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralSecondary); + --smallInputBorder: var(--neutralSecondary); + --inputBorderHovered: var(--neutralPrimary); + --inputFocusBorderAlt: var(--themePrimary); + --inputText: var(--neutralPrimary); + --inputTextHovered: var(--neutralDark); + --inputPlaceholderText: var(--neutralSecondary); + --inputIcon: var(--themePrimary); + --inputIconHovered: var(--themeDark); + --inputIconDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--white); + --listText: var(--neutralPrimary); + --listItemBackgroundHovered: var(--neutralLighter); + --listItemBackgroundChecked: var(--neutralLight); + --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --listHeaderBackgroundHovered: var(--neutralLighter); + --listHeaderBackgroundPressed: var(--neutralLight); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--white); + --menuDivider: var(--neutralTertiaryAlt); + --menuIcon: var(--themePrimary); + --menuHeader: var(--themePrimary); + --menuItemBackgroundHovered: var(--neutralLighter); + --menuItemBackgroundPressed: var(--neutralLight); + --menuItemText: var(--neutralPrimary); + --menuItemTextHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--white); + --cardShadow: var(--elevation4); + --cardShadowHovered: var(--elevation8); + --variantBorder: var(--neutralLight); + --variantBorderHovered: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralLighter); + --disabledBorder: var(--neutralLighter); + --focusBorder: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralLighter); + --errorBackground: #FDE7E9; + --blockingBackground: #FDE7E9; + --warningBackground: #FFF4CE; + --severeWarningBackground: #FED9CC; + --successBackground: #DFF6DD; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralSecondary); + --errorIcon: #A80000; + --blockingIcon: #FDE7E9; + --warningIcon: #797775; + --severeWarningIcon: var(--orange); + --successIcon: var(--green); + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: var(--redDark); + --messageText: var(--neutralPrimary); + --messageLink: var(--themeDark); + --messageLinkHovered: var(--themeDarker); + --warningText: var(--neutralPrimary); + --successText: var(--green); + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralLighterAlt); + --overlayBackground: var(--blackTranslucent40); +} diff --git a/default-themes/aurora-dusk.json b/default-themes/aurora-dusk.json new file mode 100644 index 0000000..4988757 --- /dev/null +++ b/default-themes/aurora-dusk.json @@ -0,0 +1,19 @@ +{ + "mode": "dark", + "colors": { + "bg-primary": "#0e2a2e", + "bg-secondary": "#0c2028", + "bg-tertiary": "#061518", + "accent-primary": "#00b4d8", + "accent-secondary": "#008299", + "accent-tertiary": "#66d3e8", + "accent-glow": "rgba(0,180,216,0.3)", + "text-primary": "#d4e6ea", + "text-secondary": "#66d3e8", + "border-color": "rgba(0,180,216,0.3)", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/aurora-dusk.v3.css b/default-themes/aurora-dusk.v3.css new file mode 100644 index 0000000..acb2765 --- /dev/null +++ b/default-themes/aurora-dusk.v3.css @@ -0,0 +1,200 @@ +/* ========================================================================== + Aurora Dusk — Dark Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Aurora teal/cyan, dark mode. + ========================================================================== */ + +.aurora-dusk { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Aurora teal ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #00b4d8; + --themeDark: #008299; + --themeDarkAlt: #009ab8; + --themeDarker: #004d5e; + --themeSecondary: #33c3e0; + --themeTertiary: #66d3e8; + --themeLight: #b3e8f3; + --themeLighter: #d9f3f9; + --themeLighterAlt: #ecf9fc; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (inverted for dark mode, cool teal-tinted) + ----------------------------------------------------------------------- */ + --black: #000000; + --neutralDarker: #061518; + --neutralDark: #0c2028; + --neutralPrimary: #0e2a2e; + --neutralPrimaryAlt: #163a42; + --neutralSecondary: #1e4a52; + --neutralSecondaryAlt: #2a5e68; + --neutralTertiary: #40788a; + --neutralTertiaryAlt: #66d3e8; + --neutralQuaternary: #709da8; + --neutralQuaternaryAlt: #8eb5be; + --neutralLight: #a8c8ce; + --neutralLighter: #d4e6ea; + --neutralLighterAlt: #e9f4f6; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--neutralPrimary); + --bodyBackgroundHovered: var(--neutralPrimaryAlt); + --bodyBackgroundChecked: var(--neutralSecondary); + --bodyStandoutBackground: var(--neutralDark); + --bodyFrameBackground: var(--neutralPrimary); + --bodyFrameDivider: var(--neutralSecondary); + --bodyDivider: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralLighter); + --bodyTextChecked: var(--white); + --bodySubtext: var(--neutralTertiaryAlt); + --disabledText: var(--neutralSecondary); + --disabledBodyText: var(--neutralSecondary); + --disabledSubtext: var(--neutralSecondaryAlt); + --disabledBodySubtext: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: #66d3e8; + --linkHovered: #b3e8f3; + --actionLink: var(--neutralLighter); + --actionLinkHovered: var(--white); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--neutralPrimary); + --buttonBackgroundHovered: var(--neutralPrimaryAlt); + --buttonBackgroundChecked: var(--neutralSecondary); + --buttonBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --buttonBackgroundPressed: var(--neutralSecondary); + --buttonBackgroundDisabled: var(--neutralDark); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralDark); + --buttonText: var(--neutralLighter); + --buttonTextHovered: var(--white); + --buttonTextChecked: var(--white); + --buttonTextCheckedHovered: var(--white); + --buttonTextPressed: var(--white); + --buttonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralDark); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--neutralPrimary); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeDark); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralTertiary); + --smallInputBorder: var(--neutralTertiary); + --inputBorderHovered: var(--neutralLighter); + --inputFocusBorderAlt: var(--themeSecondary); + --inputText: var(--neutralLighter); + --inputTextHovered: var(--white); + --inputPlaceholderText: var(--neutralTertiaryAlt); + --inputIcon: var(--themeSecondary); + --inputIconHovered: var(--themePrimary); + --inputIconDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--neutralPrimary); + --listText: var(--neutralLighter); + --listItemBackgroundHovered: var(--neutralPrimaryAlt); + --listItemBackgroundChecked: var(--neutralSecondary); + --listItemBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --listHeaderBackgroundHovered: var(--neutralPrimaryAlt); + --listHeaderBackgroundPressed: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--neutralPrimary); + --menuDivider: var(--neutralSecondary); + --menuIcon: var(--themeSecondary); + --menuHeader: var(--themeSecondary); + --menuItemBackgroundHovered: var(--neutralPrimaryAlt); + --menuItemBackgroundPressed: var(--neutralSecondary); + --menuItemText: var(--neutralLighter); + --menuItemTextHovered: var(--white); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--neutralDark); + --cardShadow: none; + --cardShadowHovered: none; + --variantBorder: var(--neutralSecondary); + --variantBorderHovered: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralDark); + --disabledBorder: var(--neutralDark); + --focusBorder: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralPrimary); + --errorBackground: #442726; + --blockingBackground: #442726; + --warningBackground: #433519; + --severeWarningBackground: #4F2A0F; + --successBackground: #393D1B; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralTertiaryAlt); + --errorIcon: #F1707B; + --blockingIcon: #442726; + --warningIcon: var(--neutralTertiaryAlt); + --severeWarningIcon: #FCE100; + --successIcon: #92C353; + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: #F1707B; + --messageText: var(--neutralLighter); + --messageLink: #66d3e8; + --messageLinkHovered: #b3e8f3; + --warningText: var(--neutralLighter); + --successText: #92C353; + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralDark); + --overlayBackground: rgba(0, 0, 0, 0.6); +} diff --git a/default-themes/cosmos-dawn.json b/default-themes/cosmos-dawn.json new file mode 100644 index 0000000..e2b1d0c --- /dev/null +++ b/default-themes/cosmos-dawn.json @@ -0,0 +1,19 @@ +{ + "mode": "light", + "colors": { + "bg-primary": "#eeedf6", + "bg-secondary": "#e4e1f0", + "bg-tertiary": "#f5f4fa", + "accent-primary": "#3f37c9", + "accent-secondary": "#2e28a0", + "accent-tertiary": "#908cdf", + "accent-glow": "rgba(63,55,201,0.15)", + "text-primary": "#1e1a40", + "text-secondary": "#4e488a", + "border-color": "rgba(63,55,201,0.25)", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/cosmos-dawn.v3.css b/default-themes/cosmos-dawn.v3.css new file mode 100644 index 0000000..457d5d3 --- /dev/null +++ b/default-themes/cosmos-dawn.v3.css @@ -0,0 +1,198 @@ +/* ========================================================================== + Cosmos Dawn — Light Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Cosmos deep indigo. + ========================================================================== */ + +.cosmos-dawn { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Cosmos indigo ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #3f37c9; + --themeDark: #2e28a0; + --themeDarkAlt: #3630b5; + --themeDarker: #1a1654; + --themeSecondary: #6560d4; + --themeTertiary: #908cdf; + --themeLight: #c3c1ed; + --themeLighter: #e0dff6; + --themeLighterAlt: #f0f0fb; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (cool indigo-tinted) + ----------------------------------------------------------------------- */ + --neutralDark: #121030; + --neutralPrimary: #1e1a40; + --neutralPrimaryAlt: #2a2556; + --neutralSecondary: #4e488a; + --neutralSecondaryAlt: #423c79; + --neutralTertiary: #7a74a0; + --neutralTertiaryAlt: #9994b8; + --neutralQuaternary: #c4c0d8; + --neutralQuaternaryAlt: #d2cee2; + --neutralLight: #e4e1f0; + --neutralLighter: #eeedf6; + --neutralLighterAlt: #f5f4fa; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--white); + --bodyBackgroundHovered: var(--neutralLighter); + --bodyBackgroundChecked: var(--neutralLight); + --bodyStandoutBackground: var(--neutralLighterAlt); + --bodyFrameBackground: var(--white); + --bodyFrameDivider: var(--neutralLight); + --bodyDivider: var(--neutralLight); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralPrimary); + --bodyTextChecked: var(--neutralDark); + --bodySubtext: var(--neutralSecondary); + --disabledText: var(--neutralTertiary); + --disabledBodyText: var(--neutralTertiary); + --disabledSubtext: var(--neutralQuaternary); + --disabledBodySubtext: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: var(--themePrimary); + --linkHovered: var(--themeDarker); + --actionLink: var(--neutralPrimary); + --actionLinkHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--white); + --buttonBackgroundHovered: var(--neutralLighter); + --buttonBackgroundChecked: var(--neutralLight); + --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --buttonBackgroundPressed: var(--neutralLight); + --buttonBackgroundDisabled: var(--neutralLighter); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralLighter); + --buttonText: var(--neutralPrimary); + --buttonTextHovered: var(--neutralDark); + --buttonTextChecked: var(--neutralDark); + --buttonTextCheckedHovered: var(--black); + --buttonTextPressed: var(--neutralDark); + --buttonTextDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralLighter); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralQuaternary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--white); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeLighter); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralSecondary); + --smallInputBorder: var(--neutralSecondary); + --inputBorderHovered: var(--neutralPrimary); + --inputFocusBorderAlt: var(--themePrimary); + --inputText: var(--neutralPrimary); + --inputTextHovered: var(--neutralDark); + --inputPlaceholderText: var(--neutralSecondary); + --inputIcon: var(--themePrimary); + --inputIconHovered: var(--themeDark); + --inputIconDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--white); + --listText: var(--neutralPrimary); + --listItemBackgroundHovered: var(--neutralLighter); + --listItemBackgroundChecked: var(--neutralLight); + --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --listHeaderBackgroundHovered: var(--neutralLighter); + --listHeaderBackgroundPressed: var(--neutralLight); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--white); + --menuDivider: var(--neutralTertiaryAlt); + --menuIcon: var(--themePrimary); + --menuHeader: var(--themePrimary); + --menuItemBackgroundHovered: var(--neutralLighter); + --menuItemBackgroundPressed: var(--neutralLight); + --menuItemText: var(--neutralPrimary); + --menuItemTextHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--white); + --cardShadow: var(--elevation4); + --cardShadowHovered: var(--elevation8); + --variantBorder: var(--neutralLight); + --variantBorderHovered: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralLighter); + --disabledBorder: var(--neutralLighter); + --focusBorder: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralLighter); + --errorBackground: #FDE7E9; + --blockingBackground: #FDE7E9; + --warningBackground: #FFF4CE; + --severeWarningBackground: #FED9CC; + --successBackground: #DFF6DD; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralSecondary); + --errorIcon: #A80000; + --blockingIcon: #FDE7E9; + --warningIcon: #797775; + --severeWarningIcon: var(--orange); + --successIcon: var(--green); + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: var(--redDark); + --messageText: var(--neutralPrimary); + --messageLink: var(--themeDark); + --messageLinkHovered: var(--themeDarker); + --warningText: var(--neutralPrimary); + --successText: var(--green); + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralLighterAlt); + --overlayBackground: var(--blackTranslucent40); +} diff --git a/default-themes/cosmos-dusk.json b/default-themes/cosmos-dusk.json new file mode 100644 index 0000000..ed00311 --- /dev/null +++ b/default-themes/cosmos-dusk.json @@ -0,0 +1,19 @@ +{ + "mode": "dark", + "colors": { + "bg-primary": "#121030", + "bg-secondary": "#0f0d28", + "bg-tertiary": "#08071a", + "accent-primary": "#3f37c9", + "accent-secondary": "#2e28a0", + "accent-tertiary": "#908cdf", + "accent-glow": "rgba(63,55,201,0.3)", + "text-primary": "#d4d0e2", + "text-secondary": "#908cdf", + "border-color": "rgba(63,55,201,0.3)", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/cosmos-dusk.v3.css b/default-themes/cosmos-dusk.v3.css new file mode 100644 index 0000000..40d44c8 --- /dev/null +++ b/default-themes/cosmos-dusk.v3.css @@ -0,0 +1,200 @@ +/* ========================================================================== + Cosmos Dusk — Dark Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Cosmos deep indigo, dark mode. + ========================================================================== */ + +.cosmos-dusk { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Cosmos indigo ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #3f37c9; + --themeDark: #2e28a0; + --themeDarkAlt: #3630b5; + --themeDarker: #1a1654; + --themeSecondary: #6560d4; + --themeTertiary: #908cdf; + --themeLight: #c3c1ed; + --themeLighter: #e0dff6; + --themeLighterAlt: #f0f0fb; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (inverted for dark mode, cool indigo-tinted) + ----------------------------------------------------------------------- */ + --black: #000000; + --neutralDarker: #08071a; + --neutralDark: #0f0d28; + --neutralPrimary: #121030; + --neutralPrimaryAlt: #1e1a44; + --neutralSecondary: #2a2556; + --neutralSecondaryAlt: #3a3468; + --neutralTertiary: #5a5480; + --neutralTertiaryAlt: #908cdf; + --neutralQuaternary: #7a74a0; + --neutralQuaternaryAlt: #9994b8; + --neutralLight: #b0aac8; + --neutralLighter: #d4d0e2; + --neutralLighterAlt: #eeedf6; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--neutralPrimary); + --bodyBackgroundHovered: var(--neutralPrimaryAlt); + --bodyBackgroundChecked: var(--neutralSecondary); + --bodyStandoutBackground: var(--neutralDark); + --bodyFrameBackground: var(--neutralPrimary); + --bodyFrameDivider: var(--neutralSecondary); + --bodyDivider: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralLighter); + --bodyTextChecked: var(--white); + --bodySubtext: var(--neutralTertiaryAlt); + --disabledText: var(--neutralSecondary); + --disabledBodyText: var(--neutralSecondary); + --disabledSubtext: var(--neutralSecondaryAlt); + --disabledBodySubtext: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: #908cdf; + --linkHovered: #c3c1ed; + --actionLink: var(--neutralLighter); + --actionLinkHovered: var(--white); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--neutralPrimary); + --buttonBackgroundHovered: var(--neutralPrimaryAlt); + --buttonBackgroundChecked: var(--neutralSecondary); + --buttonBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --buttonBackgroundPressed: var(--neutralSecondary); + --buttonBackgroundDisabled: var(--neutralDark); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralDark); + --buttonText: var(--neutralLighter); + --buttonTextHovered: var(--white); + --buttonTextChecked: var(--white); + --buttonTextCheckedHovered: var(--white); + --buttonTextPressed: var(--white); + --buttonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralDark); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--neutralPrimary); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeDark); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralTertiary); + --smallInputBorder: var(--neutralTertiary); + --inputBorderHovered: var(--neutralLighter); + --inputFocusBorderAlt: var(--themeSecondary); + --inputText: var(--neutralLighter); + --inputTextHovered: var(--white); + --inputPlaceholderText: var(--neutralTertiaryAlt); + --inputIcon: var(--themeSecondary); + --inputIconHovered: var(--themePrimary); + --inputIconDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--neutralPrimary); + --listText: var(--neutralLighter); + --listItemBackgroundHovered: var(--neutralPrimaryAlt); + --listItemBackgroundChecked: var(--neutralSecondary); + --listItemBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --listHeaderBackgroundHovered: var(--neutralPrimaryAlt); + --listHeaderBackgroundPressed: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--neutralPrimary); + --menuDivider: var(--neutralSecondary); + --menuIcon: var(--themeSecondary); + --menuHeader: var(--themeSecondary); + --menuItemBackgroundHovered: var(--neutralPrimaryAlt); + --menuItemBackgroundPressed: var(--neutralSecondary); + --menuItemText: var(--neutralLighter); + --menuItemTextHovered: var(--white); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--neutralDark); + --cardShadow: none; + --cardShadowHovered: none; + --variantBorder: var(--neutralSecondary); + --variantBorderHovered: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralDark); + --disabledBorder: var(--neutralDark); + --focusBorder: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralPrimary); + --errorBackground: #442726; + --blockingBackground: #442726; + --warningBackground: #433519; + --severeWarningBackground: #4F2A0F; + --successBackground: #393D1B; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralTertiaryAlt); + --errorIcon: #F1707B; + --blockingIcon: #442726; + --warningIcon: var(--neutralTertiaryAlt); + --severeWarningIcon: #FCE100; + --successIcon: #92C353; + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: #F1707B; + --messageText: var(--neutralLighter); + --messageLink: #908cdf; + --messageLinkHovered: #c3c1ed; + --warningText: var(--neutralLighter); + --successText: #92C353; + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralDark); + --overlayBackground: rgba(0, 0, 0, 0.6); +} diff --git a/default-themes/high-contrast-dark.json b/default-themes/high-contrast-dark.json new file mode 100644 index 0000000..3eb54a6 --- /dev/null +++ b/default-themes/high-contrast-dark.json @@ -0,0 +1,19 @@ +{ + "mode": "dark", + "colors": { + "bg-primary": "#000000", + "bg-secondary": "#0a0a0a", + "bg-tertiary": "#000000", + "accent-primary": "#ffffff", + "accent-secondary": "#ffffff", + "accent-tertiary": "#999999", + "accent-glow": "rgba(255,255,255,0.15)", + "text-primary": "#ffffff", + "text-secondary": "#e0e0e0", + "border-color": "#ffffff", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/high-contrast-dark.v3.css b/default-themes/high-contrast-dark.v3.css new file mode 100644 index 0000000..388d923 --- /dev/null +++ b/default-themes/high-contrast-dark.v3.css @@ -0,0 +1,200 @@ +/* ========================================================================== + High Contrast Dark — Dark Theme (v3) + Maximum contrast for accessibility (WCAG AAA 7:1+). + White primary on black body, yellow links. + ========================================================================== */ + +.high-contrast-dark { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (pure white ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #ffffff; + --themeDark: #ffffff; + --themeDarkAlt: #ffffff; + --themeDarker: #ffffff; + --themeSecondary: #cccccc; + --themeTertiary: #999999; + --themeLight: #333333; + --themeLighter: #1a1a1a; + --themeLighterAlt: #0d0d0d; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (inverted for dark mode, pure grayscale) + ----------------------------------------------------------------------- */ + --black: #000000; + --neutralDarker: #000000; + --neutralDark: #0a0a0a; + --neutralPrimary: #000000; + --neutralPrimaryAlt: #141414; + --neutralSecondary: #1e1e1e; + --neutralSecondaryAlt: #2e2e2e; + --neutralTertiary: #555555; + --neutralTertiaryAlt: #ffffff; + --neutralQuaternary: #767676; + --neutralQuaternaryAlt: #999999; + --neutralLight: #c8c8c8; + --neutralLighter: #e0e0e0; + --neutralLighterAlt: #f0f0f0; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: #000000; + --bodyBackgroundHovered: var(--neutralPrimaryAlt); + --bodyBackgroundChecked: var(--neutralSecondary); + --bodyStandoutBackground: #000000; + --bodyFrameBackground: #000000; + --bodyFrameDivider: #ffffff; + --bodyDivider: #ffffff; + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: #ffffff; + --bodyTextChecked: #ffffff; + --bodySubtext: #e0e0e0; + --disabledText: #767676; + --disabledBodyText: #767676; + --disabledSubtext: #555555; + --disabledBodySubtext: #555555; + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: #ffff00; + --linkHovered: #ffff99; + --actionLink: #ffffff; + --actionLinkHovered: #ffffff; + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: #000000; + --buttonBackgroundHovered: var(--neutralPrimaryAlt); + --buttonBackgroundChecked: var(--neutralSecondary); + --buttonBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --buttonBackgroundPressed: var(--neutralSecondary); + --buttonBackgroundDisabled: #000000; + --buttonBorder: #ffffff; + --buttonBorderDisabled: #767676; + --buttonText: #ffffff; + --buttonTextHovered: #ffffff; + --buttonTextChecked: #ffffff; + --buttonTextCheckedHovered: #ffffff; + --buttonTextPressed: #ffffff; + --buttonTextDisabled: #767676; + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: #ffffff; + --primaryButtonBackgroundHovered: #e0e0e0; + --primaryButtonBackgroundPressed: #c8c8c8; + --primaryButtonBackgroundDisabled: #555555; + --primaryButtonBorder: transparent; + --primaryButtonText: #000000; + --primaryButtonTextHovered: #000000; + --primaryButtonTextPressed: #000000; + --primaryButtonTextDisabled: #767676; + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: #ffffff; + --accentButtonText: #000000; + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: #000000; + --inputBackgroundChecked: #ffffff; + --inputBackgroundCheckedHovered: #e0e0e0; + --inputPlaceholderBackgroundChecked: #1a1a1a; + --inputForegroundChecked: #000000; + --inputBorder: #ffffff; + --smallInputBorder: #ffffff; + --inputBorderHovered: #ffffff; + --inputFocusBorderAlt: #ffff00; + --inputText: #ffffff; + --inputTextHovered: #ffffff; + --inputPlaceholderText: #c8c8c8; + --inputIcon: #ffffff; + --inputIconHovered: #ffff00; + --inputIconDisabled: #767676; + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: #000000; + --listText: #ffffff; + --listItemBackgroundHovered: var(--neutralPrimaryAlt); + --listItemBackgroundChecked: var(--neutralSecondary); + --listItemBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --listHeaderBackgroundHovered: var(--neutralPrimaryAlt); + --listHeaderBackgroundPressed: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: #000000; + --menuDivider: #ffffff; + --menuIcon: #ffffff; + --menuHeader: #ffffff; + --menuItemBackgroundHovered: var(--neutralPrimaryAlt); + --menuItemBackgroundPressed: var(--neutralSecondary); + --menuItemText: #ffffff; + --menuItemTextHovered: #ffffff; + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: #000000; + --cardShadow: none; + --cardShadowHovered: none; + --variantBorder: #ffffff; + --variantBorderHovered: #ffffff; + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: #1a1a1a; + --disabledBorder: #767676; + --focusBorder: #ffffff; + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: #1a1a1a; + --errorBackground: #440000; + --blockingBackground: #440000; + --warningBackground: #443300; + --severeWarningBackground: #442200; + --successBackground: #003300; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: #ffffff; + --errorIcon: #ff6666; + --blockingIcon: #ff6666; + --warningIcon: #ffff00; + --severeWarningIcon: #ff6600; + --successIcon: #66ff66; + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: #ff6666; + --messageText: #ffffff; + --messageLink: #ffff00; + --messageLinkHovered: #ffff99; + --warningText: #ffffff; + --successText: #66ff66; + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: #0a0a0a; + --overlayBackground: rgba(0, 0, 0, 0.8); +} diff --git a/default-themes/high-contrast-light.json b/default-themes/high-contrast-light.json new file mode 100644 index 0000000..a3a9795 --- /dev/null +++ b/default-themes/high-contrast-light.json @@ -0,0 +1,19 @@ +{ + "mode": "light", + "colors": { + "bg-primary": "#f0f0f0", + "bg-secondary": "#e0e0e0", + "bg-tertiary": "#f8f8f8", + "accent-primary": "#000000", + "accent-secondary": "#000000", + "accent-tertiary": "#666666", + "accent-glow": "rgba(0,0,0,0.15)", + "text-primary": "#000000", + "text-secondary": "#1a1a1a", + "border-color": "#000000", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/high-contrast-light.v3.css b/default-themes/high-contrast-light.v3.css new file mode 100644 index 0000000..3e5226d --- /dev/null +++ b/default-themes/high-contrast-light.v3.css @@ -0,0 +1,198 @@ +/* ========================================================================== + High Contrast Light — Light Theme (v3) + Maximum contrast for accessibility (WCAG AAA 7:1+). + Pure grayscale neutrals, black primary. + ========================================================================== */ + +.high-contrast-light { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (pure black ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #000000; + --themeDark: #000000; + --themeDarkAlt: #000000; + --themeDarker: #000000; + --themeSecondary: #333333; + --themeTertiary: #666666; + --themeLight: #cccccc; + --themeLighter: #e6e6e6; + --themeLighterAlt: #f5f5f5; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (pure untinted grayscale) + ----------------------------------------------------------------------- */ + --neutralDark: #000000; + --neutralPrimary: #1a1a1a; + --neutralPrimaryAlt: #2e2e2e; + --neutralSecondary: #555555; + --neutralSecondaryAlt: #444444; + --neutralTertiary: #767676; + --neutralTertiaryAlt: #999999; + --neutralQuaternary: #c8c8c8; + --neutralQuaternaryAlt: #d0d0d0; + --neutralLight: #e0e0e0; + --neutralLighter: #f0f0f0; + --neutralLighterAlt: #f8f8f8; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--white); + --bodyBackgroundHovered: var(--neutralLighter); + --bodyBackgroundChecked: var(--neutralLight); + --bodyStandoutBackground: var(--neutralLighterAlt); + --bodyFrameBackground: var(--white); + --bodyFrameDivider: #000000; + --bodyDivider: #000000; + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: #000000; + --bodyTextChecked: #000000; + --bodySubtext: #1a1a1a; + --disabledText: #767676; + --disabledBodyText: #767676; + --disabledSubtext: #999999; + --disabledBodySubtext: #999999; + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: #0000cc; + --linkHovered: #000066; + --actionLink: #000000; + --actionLinkHovered: #000000; + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--white); + --buttonBackgroundHovered: var(--neutralLighter); + --buttonBackgroundChecked: var(--neutralLight); + --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --buttonBackgroundPressed: var(--neutralLight); + --buttonBackgroundDisabled: var(--neutralLighter); + --buttonBorder: #000000; + --buttonBorderDisabled: #767676; + --buttonText: #000000; + --buttonTextHovered: #000000; + --buttonTextChecked: #000000; + --buttonTextCheckedHovered: #000000; + --buttonTextPressed: #000000; + --buttonTextDisabled: #767676; + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: #000000; + --primaryButtonBackgroundHovered: #1a1a1a; + --primaryButtonBackgroundPressed: #333333; + --primaryButtonBackgroundDisabled: #767676; + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralQuaternary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: #000000; + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--white); + --inputBackgroundChecked: #000000; + --inputBackgroundCheckedHovered: #1a1a1a; + --inputPlaceholderBackgroundChecked: var(--neutralLighter); + --inputForegroundChecked: var(--white); + --inputBorder: #000000; + --smallInputBorder: #000000; + --inputBorderHovered: #000000; + --inputFocusBorderAlt: #000000; + --inputText: #000000; + --inputTextHovered: #000000; + --inputPlaceholderText: #555555; + --inputIcon: #000000; + --inputIconHovered: #000000; + --inputIconDisabled: #767676; + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--white); + --listText: #000000; + --listItemBackgroundHovered: var(--neutralLighter); + --listItemBackgroundChecked: var(--neutralLight); + --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --listHeaderBackgroundHovered: var(--neutralLighter); + --listHeaderBackgroundPressed: var(--neutralLight); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--white); + --menuDivider: #000000; + --menuIcon: #000000; + --menuHeader: #000000; + --menuItemBackgroundHovered: var(--neutralLighter); + --menuItemBackgroundPressed: var(--neutralLight); + --menuItemText: #000000; + --menuItemTextHovered: #000000; + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--white); + --cardShadow: none; + --cardShadowHovered: none; + --variantBorder: #000000; + --variantBorderHovered: #000000; + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralLighter); + --disabledBorder: #767676; + --focusBorder: #000000; + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralLighter); + --errorBackground: #FDE7E9; + --blockingBackground: #FDE7E9; + --warningBackground: #FFF4CE; + --severeWarningBackground: #FED9CC; + --successBackground: #DFF6DD; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: #000000; + --errorIcon: #A80000; + --blockingIcon: #A80000; + --warningIcon: #333333; + --severeWarningIcon: #A80000; + --successIcon: #107C10; + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: #A80000; + --messageText: #000000; + --messageLink: #0000cc; + --messageLinkHovered: #000066; + --warningText: #000000; + --successText: #107C10; + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralLighterAlt); + --overlayBackground: rgba(0, 0, 0, 0.5); +} diff --git a/default-themes/nebula-dawn.v3.css b/default-themes/nebula-dawn.v3.css index 29e4958..a4004bd 100644 --- a/default-themes/nebula-dawn.v3.css +++ b/default-themes/nebula-dawn.v3.css @@ -9,15 +9,15 @@ /* ----------------------------------------------------------------------- PALETTE — Brand / Theme Colors (Nebula purple ramp) ----------------------------------------------------------------------- */ - --themePrimary: #667eea; - --themeDark: #764ba2; - --themeDarkAlt: #5639a0; - --themeDarker: #432d80; - --themeSecondary: #c054d4; - --themeTertiary: #8b9ef0; - --themeLight: #c5cff7; - --themeLighter: #e0e5fb; - --themeLighterAlt: #f3f5fe; + --themePrimary: #764ba2; + --themeDark: #5a3580; + --themeDarkAlt: #663d91; + --themeDarker: #3b2054; + --themeSecondary: #9670b8; + --themeTertiary: #b49bce; + --themeLight: #d3c3e3; + --themeLighter: #e8ddf1; + --themeLighterAlt: #f5f1fa; /* ----------------------------------------------------------------------- PALETTE — Neutrals (warm purple-tinted) diff --git a/default-themes/nebula-dusk.v3.css b/default-themes/nebula-dusk.v3.css index 9ab7ef8..939e985 100644 --- a/default-themes/nebula-dusk.v3.css +++ b/default-themes/nebula-dusk.v3.css @@ -8,15 +8,15 @@ /* ----------------------------------------------------------------------- PALETTE — Brand / Theme Colors (Nebula purple ramp) ----------------------------------------------------------------------- */ - --themePrimary: #667eea; - --themeDark: #764ba2; - --themeDarkAlt: #5639a0; - --themeDarker: #432d80; - --themeSecondary: #f093fb; - --themeTertiary: #8b9ef0; - --themeLight: #c5cff7; - --themeLighter: #e0e5fb; - --themeLighterAlt: #f3f5fe; + --themePrimary: #764ba2; + --themeDark: #5a3580; + --themeDarkAlt: #663d91; + --themeDarker: #3b2054; + --themeSecondary: #9670b8; + --themeTertiary: #b49bce; + --themeLight: #d3c3e3; + --themeLighter: #e8ddf1; + --themeLighterAlt: #f5f1fa; /* ----------------------------------------------------------------------- PALETTE — Neutrals (inverted for dark mode) diff --git a/default-themes/solar-flare-dawn.json b/default-themes/solar-flare-dawn.json new file mode 100644 index 0000000..6b23132 --- /dev/null +++ b/default-themes/solar-flare-dawn.json @@ -0,0 +1,19 @@ +{ + "mode": "light", + "colors": { + "bg-primary": "#f6efe4", + "bg-secondary": "#f0e6d8", + "bg-tertiary": "#faf7f2", + "accent-primary": "#e67e22", + "accent-secondary": "#b8621a", + "accent-tertiary": "#f0b67e", + "accent-glow": "rgba(230,126,34,0.15)", + "text-primary": "#402d18", + "text-secondary": "#8a6840", + "border-color": "rgba(230,126,34,0.25)", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/solar-flare-dawn.v3.css b/default-themes/solar-flare-dawn.v3.css new file mode 100644 index 0000000..95ccd88 --- /dev/null +++ b/default-themes/solar-flare-dawn.v3.css @@ -0,0 +1,198 @@ +/* ========================================================================== + Solar Flare Dawn — Light Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Solar Flare amber/orange. + ========================================================================== */ + +.solar-flare-dawn { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Solar Flare amber ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #e67e22; + --themeDark: #b8621a; + --themeDarkAlt: #cf701e; + --themeDarker: #7a4310; + --themeSecondary: #eb9950; + --themeTertiary: #f0b67e; + --themeLight: #f7d6b3; + --themeLighter: #fbe9d5; + --themeLighterAlt: #fdf5ec; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (warm amber-tinted) + ----------------------------------------------------------------------- */ + --neutralDark: #2e1e0e; + --neutralPrimary: #402d18; + --neutralPrimaryAlt: #563a1e; + --neutralSecondary: #8a6840; + --neutralSecondaryAlt: #795a36; + --neutralTertiary: #9d8a70; + --neutralTertiaryAlt: #b5a48e; + --neutralQuaternary: #d6cabb; + --neutralQuaternaryAlt: #e0d5c6; + --neutralLight: #f0e6d8; + --neutralLighter: #f6efe4; + --neutralLighterAlt: #faf7f2; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--white); + --bodyBackgroundHovered: var(--neutralLighter); + --bodyBackgroundChecked: var(--neutralLight); + --bodyStandoutBackground: var(--neutralLighterAlt); + --bodyFrameBackground: var(--white); + --bodyFrameDivider: var(--neutralLight); + --bodyDivider: var(--neutralLight); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralPrimary); + --bodyTextChecked: var(--neutralDark); + --bodySubtext: var(--neutralSecondary); + --disabledText: var(--neutralTertiary); + --disabledBodyText: var(--neutralTertiary); + --disabledSubtext: var(--neutralQuaternary); + --disabledBodySubtext: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: var(--themePrimary); + --linkHovered: var(--themeDarker); + --actionLink: var(--neutralPrimary); + --actionLinkHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--white); + --buttonBackgroundHovered: var(--neutralLighter); + --buttonBackgroundChecked: var(--neutralLight); + --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --buttonBackgroundPressed: var(--neutralLight); + --buttonBackgroundDisabled: var(--neutralLighter); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralLighter); + --buttonText: var(--neutralPrimary); + --buttonTextHovered: var(--neutralDark); + --buttonTextChecked: var(--neutralDark); + --buttonTextCheckedHovered: var(--black); + --buttonTextPressed: var(--neutralDark); + --buttonTextDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralLighter); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralQuaternary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--white); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeLighter); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralSecondary); + --smallInputBorder: var(--neutralSecondary); + --inputBorderHovered: var(--neutralPrimary); + --inputFocusBorderAlt: var(--themePrimary); + --inputText: var(--neutralPrimary); + --inputTextHovered: var(--neutralDark); + --inputPlaceholderText: var(--neutralSecondary); + --inputIcon: var(--themePrimary); + --inputIconHovered: var(--themeDark); + --inputIconDisabled: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--white); + --listText: var(--neutralPrimary); + --listItemBackgroundHovered: var(--neutralLighter); + --listItemBackgroundChecked: var(--neutralLight); + --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt); + --listHeaderBackgroundHovered: var(--neutralLighter); + --listHeaderBackgroundPressed: var(--neutralLight); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--white); + --menuDivider: var(--neutralTertiaryAlt); + --menuIcon: var(--themePrimary); + --menuHeader: var(--themePrimary); + --menuItemBackgroundHovered: var(--neutralLighter); + --menuItemBackgroundPressed: var(--neutralLight); + --menuItemText: var(--neutralPrimary); + --menuItemTextHovered: var(--neutralDark); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--white); + --cardShadow: var(--elevation4); + --cardShadowHovered: var(--elevation8); + --variantBorder: var(--neutralLight); + --variantBorderHovered: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralLighter); + --disabledBorder: var(--neutralLighter); + --focusBorder: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralLighter); + --errorBackground: #FDE7E9; + --blockingBackground: #FDE7E9; + --warningBackground: #FFF4CE; + --severeWarningBackground: #FED9CC; + --successBackground: #DFF6DD; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralSecondary); + --errorIcon: #A80000; + --blockingIcon: #FDE7E9; + --warningIcon: #797775; + --severeWarningIcon: var(--orange); + --successIcon: var(--green); + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: var(--redDark); + --messageText: var(--neutralPrimary); + --messageLink: var(--themeDark); + --messageLinkHovered: var(--themeDarker); + --warningText: var(--neutralPrimary); + --successText: var(--green); + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralLighterAlt); + --overlayBackground: var(--blackTranslucent40); +} diff --git a/default-themes/solar-flare-dusk.json b/default-themes/solar-flare-dusk.json new file mode 100644 index 0000000..2ace126 --- /dev/null +++ b/default-themes/solar-flare-dusk.json @@ -0,0 +1,19 @@ +{ + "mode": "dark", + "colors": { + "bg-primary": "#2e1e0e", + "bg-secondary": "#241a10", + "bg-tertiary": "#1a120a", + "accent-primary": "#e67e22", + "accent-secondary": "#b8621a", + "accent-tertiary": "#f0b67e", + "accent-glow": "rgba(230,126,34,0.3)", + "text-primary": "#e0d5c6", + "text-secondary": "#f0b67e", + "border-color": "rgba(230,126,34,0.3)", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25" + } +} diff --git a/default-themes/solar-flare-dusk.v3.css b/default-themes/solar-flare-dusk.v3.css new file mode 100644 index 0000000..cab43e1 --- /dev/null +++ b/default-themes/solar-flare-dusk.v3.css @@ -0,0 +1,200 @@ +/* ========================================================================== + Solar Flare Dusk — Dark Theme (v3) + Palette overrides + semantic tokens for FluentLM. + Rebrands from default blue to Solar Flare amber/orange, dark mode. + ========================================================================== */ + +.solar-flare-dusk { + /* ----------------------------------------------------------------------- + PALETTE — Brand / Theme Colors (Solar Flare amber ramp) + ----------------------------------------------------------------------- */ + --themePrimary: #e67e22; + --themeDark: #b8621a; + --themeDarkAlt: #cf701e; + --themeDarker: #7a4310; + --themeSecondary: #eb9950; + --themeTertiary: #f0b67e; + --themeLight: #f7d6b3; + --themeLighter: #fbe9d5; + --themeLighterAlt: #fdf5ec; + + /* ----------------------------------------------------------------------- + PALETTE — Neutrals (inverted for dark mode, warm amber-tinted) + ----------------------------------------------------------------------- */ + --black: #000000; + --neutralDarker: #1a120a; + --neutralDark: #241a10; + --neutralPrimary: #2e1e0e; + --neutralPrimaryAlt: #3c2a16; + --neutralSecondary: #52381e; + --neutralSecondaryAlt: #6a4a28; + --neutralTertiary: #8a6840; + --neutralTertiaryAlt: #f0b67e; + --neutralQuaternary: #9d8a70; + --neutralQuaternaryAlt: #b5a48e; + --neutralLight: #c8b898; + --neutralLighter: #e0d5c6; + --neutralLighterAlt: #f0e6d8; + --white: #ffffff; + + /* ----------------------------------------------------------------------- + BODY / BACKGROUND + ----------------------------------------------------------------------- */ + --bodyBackground: var(--neutralPrimary); + --bodyBackgroundHovered: var(--neutralPrimaryAlt); + --bodyBackgroundChecked: var(--neutralSecondary); + --bodyStandoutBackground: var(--neutralDark); + --bodyFrameBackground: var(--neutralPrimary); + --bodyFrameDivider: var(--neutralSecondary); + --bodyDivider: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + TEXT + ----------------------------------------------------------------------- */ + --bodyText: var(--neutralLighter); + --bodyTextChecked: var(--white); + --bodySubtext: var(--neutralTertiaryAlt); + --disabledText: var(--neutralSecondary); + --disabledBodyText: var(--neutralSecondary); + --disabledSubtext: var(--neutralSecondaryAlt); + --disabledBodySubtext: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LINKS + ----------------------------------------------------------------------- */ + --link: #f0b67e; + --linkHovered: #f7d6b3; + --actionLink: var(--neutralLighter); + --actionLinkHovered: var(--white); + + /* ----------------------------------------------------------------------- + BUTTONS — Default + ----------------------------------------------------------------------- */ + --buttonBackground: var(--neutralPrimary); + --buttonBackgroundHovered: var(--neutralPrimaryAlt); + --buttonBackgroundChecked: var(--neutralSecondary); + --buttonBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --buttonBackgroundPressed: var(--neutralSecondary); + --buttonBackgroundDisabled: var(--neutralDark); + --buttonBorder: var(--neutralSecondaryAlt); + --buttonBorderDisabled: var(--neutralDark); + --buttonText: var(--neutralLighter); + --buttonTextHovered: var(--white); + --buttonTextChecked: var(--white); + --buttonTextCheckedHovered: var(--white); + --buttonTextPressed: var(--white); + --buttonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Primary + ----------------------------------------------------------------------- */ + --primaryButtonBackground: var(--themePrimary); + --primaryButtonBackgroundHovered: var(--themeDarkAlt); + --primaryButtonBackgroundPressed: var(--themeDark); + --primaryButtonBackgroundDisabled: var(--neutralDark); + --primaryButtonBorder: transparent; + --primaryButtonText: var(--white); + --primaryButtonTextHovered: var(--white); + --primaryButtonTextPressed: var(--white); + --primaryButtonTextDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + BUTTONS — Accent + ----------------------------------------------------------------------- */ + --accentButtonBackground: var(--themePrimary); + --accentButtonText: var(--white); + + /* ----------------------------------------------------------------------- + INPUTS + ----------------------------------------------------------------------- */ + --inputBackground: var(--neutralPrimary); + --inputBackgroundChecked: var(--themePrimary); + --inputBackgroundCheckedHovered: var(--themeDarkAlt); + --inputPlaceholderBackgroundChecked: var(--themeDark); + --inputForegroundChecked: var(--white); + --inputBorder: var(--neutralTertiary); + --smallInputBorder: var(--neutralTertiary); + --inputBorderHovered: var(--neutralLighter); + --inputFocusBorderAlt: var(--themeSecondary); + --inputText: var(--neutralLighter); + --inputTextHovered: var(--white); + --inputPlaceholderText: var(--neutralTertiaryAlt); + --inputIcon: var(--themeSecondary); + --inputIconHovered: var(--themePrimary); + --inputIconDisabled: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + LISTS + ----------------------------------------------------------------------- */ + --listBackground: var(--neutralPrimary); + --listText: var(--neutralLighter); + --listItemBackgroundHovered: var(--neutralPrimaryAlt); + --listItemBackgroundChecked: var(--neutralSecondary); + --listItemBackgroundCheckedHovered: var(--neutralSecondaryAlt); + --listHeaderBackgroundHovered: var(--neutralPrimaryAlt); + --listHeaderBackgroundPressed: var(--neutralSecondary); + + /* ----------------------------------------------------------------------- + MENUS + ----------------------------------------------------------------------- */ + --menuBackground: var(--neutralPrimary); + --menuDivider: var(--neutralSecondary); + --menuIcon: var(--themeSecondary); + --menuHeader: var(--themeSecondary); + --menuItemBackgroundHovered: var(--neutralPrimaryAlt); + --menuItemBackgroundPressed: var(--neutralSecondary); + --menuItemText: var(--neutralLighter); + --menuItemTextHovered: var(--white); + + /* ----------------------------------------------------------------------- + CARDS + ----------------------------------------------------------------------- */ + --cardStandoutBackground: var(--neutralDark); + --cardShadow: none; + --cardShadowHovered: none; + --variantBorder: var(--neutralSecondary); + --variantBorderHovered: var(--neutralTertiary); + + /* ----------------------------------------------------------------------- + DISABLED / FOCUS + ----------------------------------------------------------------------- */ + --disabledBackground: var(--neutralDark); + --disabledBorder: var(--neutralDark); + --focusBorder: var(--neutralTertiaryAlt); + + /* ----------------------------------------------------------------------- + STATUS — Backgrounds + ----------------------------------------------------------------------- */ + --infoBackground: var(--neutralPrimary); + --errorBackground: #442726; + --blockingBackground: #442726; + --warningBackground: #433519; + --severeWarningBackground: #4F2A0F; + --successBackground: #393D1B; + + /* ----------------------------------------------------------------------- + STATUS — Icons + ----------------------------------------------------------------------- */ + --infoIcon: var(--neutralTertiaryAlt); + --errorIcon: #F1707B; + --blockingIcon: #442726; + --warningIcon: var(--neutralTertiaryAlt); + --severeWarningIcon: #FCE100; + --successIcon: #92C353; + + /* ----------------------------------------------------------------------- + STATUS — Text + ----------------------------------------------------------------------- */ + --errorText: #F1707B; + --messageText: var(--neutralLighter); + --messageLink: #f0b67e; + --messageLinkHovered: #f7d6b3; + --warningText: var(--neutralLighter); + --successText: #92C353; + + /* ----------------------------------------------------------------------- + MISC + ----------------------------------------------------------------------- */ + --defaultStateBackground: var(--neutralDark); + --overlayBackground: rgba(0, 0, 0, 0.6); +} diff --git a/migration-rules/v2-to-v3.md b/migration-rules/v2-to-v3.md index 7a7aade..1155708 100644 --- a/migration-rules/v2-to-v3.md +++ b/migration-rules/v2-to-v3.md @@ -102,10 +102,169 @@ All CSS rules targeting component selectors. The full list from v2 themes that a ## 2. Page Migration -*(To be added — covers HTML structure changes, script injection, and component class updates.)* +### 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 ` +``` + +### Migration rules for the LLM + +When migrating a v2 page to v3: + +1. **Inject the ` -
-
SynthOS
+ +
+ + + +
+ +
+
+
Page Builder

SynthOS: Welcome to My Notes — a simple note-taking app! Your notes are listed in the sidebar on the left. Click any note to view or edit it, or tap "+ New Note" to create a fresh one. Each note has a rich text editor with formatting tools, and you can save or delete notes using the buttons below the editor. Use the search box to filter notes by title or content. What would you like to do?

Save diff --git a/default-pages/neon_asteroids.html b/default-pages/neon_asteroids.html index 52f7210..d756491 100644 --- a/default-pages/neon_asteroids.html +++ b/default-pages/neon_asteroids.html @@ -10,8 +10,15 @@ +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: What can I create for you?

diff --git a/default-pages/oregon_trail.html b/default-pages/oregon_trail.html index bbcba8c..56eedab 100644 --- a/default-pages/oregon_trail.html +++ b/default-pages/oregon_trail.html @@ -12,8 +12,15 @@ +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!

User: create a map of the united states

SynthOS: Here's an interactive map of the United States! Hover over any state to see its name. The map is built with D3.js and uses an Albers USA projection that includes Alaska and Hawaii.

User: now in a second layer can you overlay that with a map of the usa circa 1850s

SynthOS: I've overlaid the modern map with an 1850s historical layer! The overlay shows the political divisions of the United States around 1850 (after the Compromise of 1850):

  • Green — States admitted to the Union by 1850
  • Orange — Organized territories
  • Brown — Unorganized territory

You can toggle the historical overlay on and off with the button in the top-right corner. The modern state boundaries show through underneath for reference.

User: remove the current state boundaries and draw new boundaries for how the territories were organized

SynthOS: I've replaced the modern state boundaries with historically-grouped 1850s territorial boundaries. The map now shows the approximate political divisions of the United States circa 1850, with internal state lines dissolved within each territory:

  • Green — Individual states (31 states admitted by 1850)
  • Orange — Oregon Territory, Minnesota Territory, Utah Territory, New Mexico Territory
  • Brown — Unorganized Territory & Indian Territory

Note: Since this uses modern state shapes as approximations, the boundaries aren't perfectly historically accurate (e.g., territories that split modern states), but it gives a good sense of how the country was organized. Hover over any region to see its 1850s designation.

User: now overlay that with the oregon trail

SynthOS: I've overlaid the Oregon Trail on the 1850s map! The trail is shown as a red dashed line running from Independence, Missouri to Oregon City, Oregon — roughly 2,000 miles.

Key stops along the trail are marked with dots and labels:

  • Independence, MO — the main jumping-off point
  • Fort Kearny — first major military outpost
  • Chimney Rock — famous landmark
  • Fort Laramie — key resupply point
  • Independence Rock — "Register of the Desert"
  • South Pass — crossing the Continental Divide
  • Fort Bridger — trading post
  • Fort Hall — Hudson's Bay Company post
  • Fort Boise — another HBC post
  • The Dalles — end of the overland route
  • Oregon City — final destination

Hover over any stop for its name. The trail follows the approximate historical route through the Platte River valley, over the Rockies at South Pass, and along the Snake River into Oregon.

User: create a detail card that tells me facts about key stops along the way

SynthOS: I've added an interactive detail card! Click on any trail stop marker on the map to see historical facts about that location, including when it was established, its elevation, who used it, and why it mattered to Oregon Trail emigrants. Click the × button or click elsewhere to dismiss the card.

User: can you add an AI powered chat interface to that card that lets me ask questions relative to that location and the journey as a whole. the target audience should be 8-12 year olds. track the last 10 turns for follow up questions. reorganize the card if you need to

SynthOS: I've added an AI-powered chat to the detail card! Here's what's new:

  • Two tabs — "📋 Facts" shows the historical info, and "💬 Ask Me!" opens the chat
  • Meet Dusty 🤠 — your friendly trail guide who answers questions in fun, kid-friendly language (perfect for ages 8–12)
  • Suggested questions — each stop has starter questions to tap, or kids can type their own
  • Conversation memory — Dusty remembers the last 10 exchanges so kids can ask follow-up questions
  • Per-stop context — switching to a new stop resets the chat with fresh context about that location

Click any trail stop, then hit the "Ask Me!" tab to start chatting with Dusty!

diff --git a/default-pages/sidebar_page.html b/default-pages/sidebar_page.html index 7397cc9..89fb6c5 100644 --- a/default-pages/sidebar_page.html +++ b/default-pages/sidebar_page.html @@ -10,8 +10,15 @@ +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: Welcome to the Sidebar template! You can ask me to modify the content area on the left or customize the sidebar on the right. Just let me know what you'd like to create.

diff --git a/default-pages/solar_explorer.html b/default-pages/solar_explorer.html index aa623b6..6cb790d 100644 --- a/default-pages/solar_explorer.html +++ b/default-pages/solar_explorer.html @@ -408,8 +408,15 @@ +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: Welcome to the Solar Explorer

Main View Controls:

diff --git a/default-pages/solar_tutorial.html b/default-pages/solar_tutorial.html index 771fd03..b0d9e55 100644 --- a/default-pages/solar_tutorial.html +++ b/default-pages/solar_tutorial.html @@ -129,8 +129,15 @@ +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: Welcome to this Solar Tutorial! I'll guide you through building interactive features for this simulation of the Solar System. Let's start with something simple: add a reverse time button so users can watch planets orbit backwards!

diff --git a/default-pages/two-panel_page.html b/default-pages/two-panel_page.html index 3846a24..cb1a909 100644 --- a/default-pages/two-panel_page.html +++ b/default-pages/two-panel_page.html @@ -11,8 +11,15 @@ +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: Welcome to the Two-Panel layout template! By default, panels are stacked top/bottom (horizontal splitter). You can ask me to switch to left/right (vertical splitter) at any time. Just tell me what you'd like in each panel!

diff --git a/default-pages/us_map.html b/default-pages/us_map.html index ee1d762..4c76dbd 100644 --- a/default-pages/us_map.html +++ b/default-pages/us_map.html @@ -79,8 +79,15 @@ } +
+ + + +
+ +
-
SynthOS
+
Page Builder

SynthOS: Here's your interactive US map! You can customize it by adding data to visualize — just tell me what you'd like to overlay. Here are a couple of ideas:

    diff --git a/default-pages/us_map_1850.html b/default-pages/us_map_1850.html index ff5c410..f28ee48 100644 --- a/default-pages/us_map_1850.html +++ b/default-pages/us_map_1850.html @@ -12,8 +12,15 @@ +
    + + + +
    + +
    -
    SynthOS
    +
    Page Builder

    SynthOS: Welcome! This is an interactive map of the United States circa the 1850s, showing how the country was politically organized after the Compromise of 1850. It's designed for interactive exploration — here are a few things you could try:

      diff --git a/default-pages/western_cities_1850.html b/default-pages/western_cities_1850.html index 38a84a3..5316708 100644 --- a/default-pages/western_cities_1850.html +++ b/default-pages/western_cities_1850.html @@ -12,8 +12,15 @@ +
      + + + +
      + +
      -
      SynthOS
      +
      Page Builder

      SynthOS: Welcome! This is an interactive map of the United States circa the 1850s, showing how the country was politically organized after the Compromise of 1850. It's designed for interactive exploration — here are a few things you could try:

        diff --git a/required-pages/pages.html b/required-pages/pages.html index e6500ab..5fa6dea 100644 --- a/required-pages/pages.html +++ b/required-pages/pages.html @@ -85,8 +85,15 @@ +
        + + + +
        + +
        -
        SynthOS
        +
        Page Builder

        SynthOS: Here are all of the created pages. Right-click any page to pin it to diff --git a/required-pages/settings.html b/required-pages/settings.html index 749c563..ad13cf9 100644 --- a/required-pages/settings.html +++ b/required-pages/settings.html @@ -11,8 +11,15 @@ +

        + + + +
        + +
        -
        SynthOS
        +
        Page Builder

        SynthOS: Configure your settings below. Use the accordion sections to navigate between General settings, Model configuration (Page Builder & Chat Completion), and Additional Features.

        diff --git a/required-pages/synthos_apis.html b/required-pages/synthos_apis.html index 293bca7..d8878f5 100644 --- a/required-pages/synthos_apis.html +++ b/required-pages/synthos_apis.html @@ -12,8 +12,15 @@ +
        + + + +
        + +
        -
        SynthOS
        +
        Page Builder

        SynthOS: Expand the individual API operations to test calls.

        diff --git a/required-pages/synthos_scripts.html b/required-pages/synthos_scripts.html index 4c04ba3..e3ec80d 100644 --- a/required-pages/synthos_scripts.html +++ b/required-pages/synthos_scripts.html @@ -12,8 +12,15 @@ +
        + + + +
        + +
        -
        SynthOS
        +
        Page Builder

        SynthOS: Add or modify scripts that can be executed using the /api/scripts/:id API.

        diff --git a/src/service/useApiRoutes.ts b/src/service/useApiRoutes.ts index 92637f3..65dcb21 100644 --- a/src/service/useApiRoutes.ts +++ b/src/service/useApiRoutes.ts @@ -563,11 +563,7 @@ Return ONLY the JSON object.`}; `if(window.pageInfo.mode==="locked"){`, `document.addEventListener("DOMContentLoaded",function(){`, `var f=document.getElementById("chatForm");if(f)f.style.display="none";`, - `var s=document.getElementById("saveLink");if(s)s.textContent="Copy";`, - `var r=document.getElementById("resetLink");if(r){`, - `var c=r.cloneNode(true);c.textContent="Reload";`, - `c.addEventListener("click",function(e){e.preventDefault();window.location.href=window.location.pathname;});`, - `r.parentNode.replaceChild(c,r);}`, + `var lg=document.querySelector(".link-group");if(lg)lg.style.display="none";`, `});`, `}`, ].join(''); From d4e699a894d8f4b7840993645cd6c1b5633100de Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Sun, 1 Mar 2026 17:45:41 -0800 Subject: [PATCH 08/13] updated settings --- migration-rules/v2-to-v3.md | 97 ++++++ required-pages/builder.json | 2 +- required-pages/pages.html | 447 ++++++++++++------------ required-pages/settings.html | 640 ++++++++++++++++++++--------------- src/service/useApiRoutes.ts | 1 + src/service/usePageRoutes.ts | 8 +- src/settings.ts | 2 + static-files/shell.css | 21 ++ 8 files changed, 728 insertions(+), 490 deletions(-) diff --git a/migration-rules/v2-to-v3.md b/migration-rules/v2-to-v3.md index f5119b4..c3e856b 100644 --- a/migration-rules/v2-to-v3.md +++ b/migration-rules/v2-to-v3.md @@ -315,3 +315,100 @@ v2 pages use custom HTML structures with v2-specific classes. FluentLM component | 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 `` | `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 `` 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 +
        +
        +
        +

        Confirm

        +
        +
        +

        Are you sure?

        +
        +
        +
        + + +
        +
        +
        +``` + +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`. diff --git a/required-pages/builder.json b/required-pages/builder.json index d430ece..494c077 100644 --- a/required-pages/builder.json +++ b/required-pages/builder.json @@ -1 +1 @@ -{ "title": "Builder", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 3, "mode": "unlockedS" } +{ "title": "Page Builder", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 3, "mode": "unlocked" } diff --git a/required-pages/pages.html b/required-pages/pages.html index 5fa6dea..fcf578b 100644 --- a/required-pages/pages.html +++ b/required-pages/pages.html @@ -5,77 +5,36 @@ @@ -110,131 +69,149 @@
        -
        Pages
        - - - - +
        + +
        + Pages +
        + +
        +
        + - -
        -

        Pages

        -
        -
        - + +
        +
        +
        + +
        - + +
        + + + + + +
        + Pages +
        -
        - -
      What data would you like to see on the map?

      -
      -
      - Save - Pages - Reset -
      -
      +
    diff --git a/default-pages/us_map/page.json b/default-pages/us_map/page.json index d0a0244..857bf6a 100644 --- a/default-pages/us_map/page.json +++ b/default-pages/us_map/page.json @@ -7,6 +7,6 @@ "showInAll": false, "createdDate": "2026-02-17T16:47:12.135Z", "lastModified": "2026-02-17T16:51:44.761Z", - "pageVersion": 2, + "pageVersion": 3, "mode": "unlocked" -} \ No newline at end of file +} diff --git a/default-pages/us_map_1850/page.html b/default-pages/us_map_1850/page.html index f28ee48..19d9b22 100644 --- a/default-pages/us_map_1850/page.html +++ b/default-pages/us_map_1850/page.html @@ -31,13 +31,7 @@
  • Resource & agriculture map — Show where key crops, minerals, and natural resources were concentrated
Just tell me what you'd like to explore!

-
-
- Save - Pages - Reset -
-
+
diff --git a/default-pages/us_map_1850/page.json b/default-pages/us_map_1850/page.json index 4409a0c..8d45889 100644 --- a/default-pages/us_map_1850/page.json +++ b/default-pages/us_map_1850/page.json @@ -7,6 +7,6 @@ "showInAll": false, "createdDate": "2026-02-17T17:01:32.834Z", "lastModified": "2026-02-17T17:09:27.773Z", - "pageVersion": 2, + "pageVersion": 3, "mode": "unlocked" -} \ No newline at end of file +} diff --git a/default-pages/western_cities_1850/page.html b/default-pages/western_cities_1850/page.html index 5316708..02da887 100644 --- a/default-pages/western_cities_1850/page.html +++ b/default-pages/western_cities_1850/page.html @@ -31,13 +31,7 @@
  • Resource & agriculture map — Show where key crops, minerals, and natural resources were concentrated
    • Just tell me what you'd like to explore!

    -

    User: Add all of the major towns or cities out west in 1850 with a styled detail card that shows facts about each.

    SynthOS: I've added 18 major western cities and towns from the 1850s era to the map! Each one appears as a glowing marker dot with a label. Click any marker to open a detailed card with:

    • 📋 Facts tab — Population, founding date, economy, historical role, and more
    • 💬 Ask Me tab — Chat with an AI historian about that specific location
    • Suggested questions — Quick-start prompts tailored to each city

    Cities include: San Francisco, Sacramento, Salt Lake City, Santa Fe, Portland, Oregon City, Los Angeles, San Diego, Independence, Council Bluffs, St. Joseph, Monterey, Tucson, Olympia, Stockton, El Paso, Astoria, and San Jose. Try zooming in to explore the western regions!

    -
    - Save - Pages - Reset -
    -
    +

    User: Add all of the major towns or cities out west in 1850 with a styled detail card that shows facts about each.

    SynthOS: I've added 18 major western cities and towns from the 1850s era to the map! Each one appears as a glowing marker dot with a label. Click any marker to open a detailed card with:

    • 📋 Facts tab — Population, founding date, economy, historical role, and more
    • 💬 Ask Me tab — Chat with an AI historian about that specific location
    • Suggested questions — Quick-start prompts tailored to each city

    Cities include: San Francisco, Sacramento, Salt Lake City, Santa Fe, Portland, Oregon City, Los Angeles, San Diego, Independence, Council Bluffs, St. Joseph, Monterey, Tucson, Olympia, Stockton, El Paso, Astoria, and San Jose. Try zooming in to explore the western regions!

    diff --git a/default-pages/western_cities_1850/page.json b/default-pages/western_cities_1850/page.json index ba95a68..c9e3bff 100644 --- a/default-pages/western_cities_1850/page.json +++ b/default-pages/western_cities_1850/page.json @@ -7,6 +7,6 @@ "showInAll": false, "createdDate": "2026-02-17T19:25:22.510Z", "lastModified": "2026-02-17T19:25:22.510Z", - "pageVersion": 2, + "pageVersion": 3, "mode": "unlocked" -} \ No newline at end of file +} diff --git a/required-pages/builder/page.json b/required-pages/builder/page.json index 494c077..da4cc68 100644 --- a/required-pages/builder/page.json +++ b/required-pages/builder/page.json @@ -1 +1,10 @@ -{ "title": "Page Builder", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 3, "mode": "unlocked" } +{ + "title": "Page Builder", + "categories": [ + "System" + ], + "pinned": true, + "showInAll": true, + "pageVersion": 3, + "mode": "unlocked" +} diff --git a/required-pages/pages/page.html b/required-pages/pages/page.html index fcf578b..e802190 100644 --- a/required-pages/pages/page.html +++ b/required-pages/pages/page.html @@ -1,929 +1,924 @@ - - - - SynthOS - Pages - - - - - - - - - - - -
    - - - -
    - -
    -
    -
    Page Builder
    -
    -
    -

    SynthOS: Here are all of the created pages. Right-click any page to pin it to - favorites, edit its definition, or copy it to a new page.

    -
    -
    -
    - Save - Pages - Reset -
    -
    - -
    -
    -
    -
    - -
    - Pages -
    - -
    -
    - - - -
    -
    -
    - -
    -
    - - -
    - - - - - -
    - Pages -
    -
    -
    - - -
    -
    -
    -

    Edit Page Definition

    - -
    -
    -
    -
    - - - Page name: -
    -
    - - -
    - -
    - - Locked pages are read-only and cannot be modified through chat. -
    -
    - - When unchecked, this page is hidden from the "All" filter and only appears under its category. -
    -
    -
    -
    - -
    - - -
    -
    -
    - - -
    -
    -
    -

    Copy to New Page

    - -
    -
    -
    -
    - - - Source: -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    -
    - - -
    -
    -
    -

    Confirm Delete

    - -
    -
    -

    Are you sure you want to delete ""? This cannot be undone.

    -
    -
    -
    - - -
    -
    -
    -
    -
    - - -
    - - - - -
    - -
    - - - - -
    - - - - - + + + + SynthOS - Pages + + + + + + + + + + + +
    + + + +
    + +
    +
    +
    Page Builder
    +
    +
    +

    SynthOS: Here are all of the created pages. Right-click any page to pin it to + favorites, edit its definition, or copy it to a new page.

    +
    +
    +
    + +
    +
    +
    +
    + +
    + Pages +
    + +
    +
    + + + +
    +
    +
    + +
    +
    + + +
    + + + + + +
    + Pages +
    +
    +
    + + +
    +
    +
    +

    Edit Page Definition

    + +
    +
    +
    +
    + + + Page name: +
    +
    + + +
    + +
    + + Locked pages are read-only and cannot be modified through chat. +
    +
    + + When unchecked, this page is hidden from the "All" filter and only appears under its category. +
    +
    +
    +
    + +
    + + +
    +
    +
    + + +
    +
    +
    +

    Copy to New Page

    + +
    +
    +
    +
    + + + Source: +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + + +
    +
    +
    + + +
    +
    +
    +

    Confirm Delete

    + +
    +
    +

    Are you sure you want to delete ""? This cannot be undone.

    +
    +
    +
    + + +
    +
    +
    +
    +
    + + +
    + + + + +
    + +
    + + + + +
    + + + + + diff --git a/required-pages/pages/page.json b/required-pages/pages/page.json index a5293cd..eb71621 100644 --- a/required-pages/pages/page.json +++ b/required-pages/pages/page.json @@ -1 +1,10 @@ -{ "title": "Pages", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 2, "mode": "locked" } +{ + "title": "Pages", + "categories": [ + "System" + ], + "pinned": true, + "showInAll": true, + "pageVersion": 3, + "mode": "locked" +} diff --git a/required-pages/settings/page.html b/required-pages/settings/page.html index 5bab321..5ffab31 100644 --- a/required-pages/settings/page.html +++ b/required-pages/settings/page.html @@ -1,1758 +1,1753 @@ - - - - SynthOS - Settings - - - - - - - - - -
    - - - -
    - -
    -
    -
    Page Builder
    -
    -
    -

    SynthOS: This is where you can customize your experience. Change your theme and toolbar layout under Appearance, configure AI models under Page Building & Chat, or set up integrations under Connectors and Agents.

    -

    Click Apply when you're ready to save your changes.

    -
    - -
    -
    - Save - Pages - Reset -
    -
    - -
    -
    -
    -
    - Settings -
    -
    - -
    - -
    -
    -
    - - -
    -
    - - -
    -
    -
    -
    - -
    - -
    -
    - - -
    - Page Builder Model -
    - - -
    -
    - - - -
    -
    - - -
    - ▾ More settings -
    - - -
    -
    - - -
    -
    - -
    - Chat Model -
    - - -
    -
    - - -
    -
    - - -
    - ▾ More settings -
    - - -
    -
    - - -
    -
    - -
    -
    -
    - -
    - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - Configure agents (A2A or OpenClaw) that your pages can communicate with. - -
    -
    - -
    -
    - Chat with Agent - -
    -
    -
    - - -
    -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -

    Add Agent

    -
    -
    -
    -
    - -
    - - -
    -
    -
    - -
    - - -
    - Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually. -
    - - - -
    - - -
    -
    - - -
    - -
    -
    -
    - - - -
    -
    -
    -
    -
    -
    -

    -
    -
    -
    - - -
    - - -
    - -
    - - -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    -
    -

    Unsaved Changes

    -
    -
    -

    You have unsaved changes. Do you want to discard them and leave this page?

    -
    -
    -
    - - -
    -
    -
    - - - - - - + + + + SynthOS - Settings + + + + + + + + + +
    + + + +
    + +
    +
    +
    Page Builder
    +
    +
    +

    SynthOS: This is where you can customize your experience. Change your theme and toolbar layout under Appearance, configure AI models under Page Building & Chat, or set up integrations under Connectors and Agents.

    +

    Click Apply when you're ready to save your changes.

    +
    + +
    +
    + +
    +
    +
    +
    + Settings +
    +
    + +
    + +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + +
    + +
    +
    + + +
    + Page Builder Model +
    + + +
    +
    + + + +
    +
    + + +
    + ▾ More settings +
    + + +
    +
    + + +
    +
    + +
    + Chat Model +
    + + +
    +
    + + +
    +
    + + +
    + ▾ More settings +
    + + +
    +
    + + +
    +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    + Configure agents (A2A or OpenClaw) that your pages can communicate with. + +
    +
    + +
    +
    + Chat with Agent + +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +

    Add Agent

    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    + Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually. +
    + + + +
    + + +
    +
    + + +
    + +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +

    +
    +
    +
    + + +
    + + +
    + +
    + + +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +

    Unsaved Changes

    +
    +
    +

    You have unsaved changes. Do you want to discard them and leave this page?

    +
    +
    +
    + + +
    +
    +
    + + + + + + diff --git a/required-pages/settings/page.json b/required-pages/settings/page.json index c5e2618..0d820d8 100644 --- a/required-pages/settings/page.json +++ b/required-pages/settings/page.json @@ -1 +1,10 @@ -{ "title": "Settings", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 2, "mode": "locked" } +{ + "title": "Settings", + "categories": [ + "System" + ], + "pinned": true, + "showInAll": true, + "pageVersion": 3, + "mode": "locked" +} diff --git a/required-pages/synthos_apis/page.html b/required-pages/synthos_apis/page.html index d8878f5..712e173 100644 --- a/required-pages/synthos_apis/page.html +++ b/required-pages/synthos_apis/page.html @@ -1,334 +1,329 @@ - - - - SynthOS - APIs - - - - - - - - - - -
    - - - -
    - -
    -
    -
    Page Builder
    -
    -

    SynthOS: Expand the individual API operations to test calls.

    -
    -
    - Save - Pages - Reset -
    -
    - -
    -
    -
    -
    API Explorer
    -
    -
    -
    GET /api/data/:page/:table
    -
    - This operation retrieves all rows from the specified page-scoped table. The response is an array of JSON objects, each representing a row in the table. -
    - - - -
    -
    -
    -
    -
    -
    GET /api/data/:page/:table?limit=N&offset=N
    -
    - Paginated variant. Returns a page of rows from the table. The response includes the items, total count, and whether more rows are available. - Response: { items: [...], total: number, offset: number, limit: number, hasMore: boolean } -
    - - - - - -
    -
    -
    -
    -
    -
    GET /api/data/:page/:table/:id
    -
    - This operation retrieves a single row from the specified page-scoped table using the provided ID. The response is a JSON object representing the row. -
    - - - - -
    -
    -
    -
    -
    -
    POST /api/data/:page/:table
    -
    - This operation saves a single row to the specified page-scoped table. The request should include a JSON object representing the row. The response indicates success. -
    - - - - -
    -
    -
    -
    -
    -
    DELETE /api/data/:page/:table/:id
    -
    - This operation deletes a single row from the specified page-scoped table using the provided ID. The response indicates success. -
    - - - - -
    -
    -
    -
    -
    -
    GET /api/pages
    -
    - This operation retrieves a list of all available pages. The response is an array of page objects with name, title, categories, pinned, createdDate, lastModified, pageVersion, and mode. -
    - -
    -
    -
    -
    -
    -
    GET /api/pages/:name
    -
    - This operation retrieves the metadata for a single page, including title, categories, pinned, createdDate, lastModified, pageVersion, and mode. -
    - - -
    -
    -
    -
    -
    -
    POST /api/pages/:name
    -
    - This operation merges metadata for a page. Send only the fields you want to update. Supported fields: title (string), categories (array of strings), pinned (boolean), mode ("unlocked" | "locked"). The lastModified timestamp is auto-set on each update. The createdDate and pageVersion fields are preserved and cannot be overridden. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/pages/:name/pin
    -
    - This operation toggles the pinned status for a page. The request body should include pinned (boolean). -
    - - - -
    -
    -
    -
    -
    -
    DELETE /api/pages/:name
    -
    - This operation deletes a user page. Required (system) pages cannot be deleted. Returns 400 if the page is a required page, or 404 if not found. -
    - - -
    -
    -
    -
    -
    -
    POST /api/pages/:name/copy
    -
    - This operation copies a page to a new name. The source page can be a user page or a required (system) page. The request body should include name (string, required), title (string, optional), and categories (array of strings, optional). Returns 409 if the target page already exists. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/search/web
    -
    - This operation searches the web using Brave Search and returns a list of results. Requires Brave Search to be enabled in Settings > Connectors. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/generate/image
    -
    - This operation generates an image based on a prompt. You can specify the shape and style of the image. -
    - - - - -
    -
    -
    -
    -
    -
    POST /api/generate/completion
    -
    - This operation generates a text completion based on a prompt. You can optionally specify the temperature for controlling randomness. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/scripts/:id
    -
    - This operation executes a script with the specified ID and passes in the provided variables. The response contains the output of the script execution. -
    - - - -
    -
    -
    -
    -
    -
    GET /api/connectors
    -
    - Lists all available connectors with their configuration status. Supports optional category and id query filters. -
    - - -
    -
    -
    -
    -
    -
    GET /api/connectors/:id
    -
    - Retrieves full detail for a single connector, including its definition and whether it is configured and enabled. -
    - - -
    -
    -
    -
    -
    -
    POST /api/connectors (proxy call)
    -
    - Proxies a request through a configured connector. The connector attaches authentication automatically based on its auth strategy. -
    - - - - - - -
    -
    -
    -
    -
    -
    GET /api/agents
    -
    - Lists configured agents (A2A and OpenClaw). Supports optional filters: enabled (boolean) and provider (a2a|openclaw). Returns id, name, description, url, enabled, provider, and capabilities for each agent. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/agents/:id/send
    -
    - Sends a text message to an agent (works for both A2A and OpenClaw protocols). Returns a normalized response: { kind: 'message'|'task', text?: string, raw: object }. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/agents/:id/stream
    -
    - Sends a message and receives a streaming SSE response. Each event is JSON: { kind: 'text'|'status'|'artifact'|'done'|'error', data: any }. The stream ends with a [DONE] sentinel. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. -
    - - - -
    -
    -
    -
    -
    -
    PATCH /api/agents/:id
    -
    - Toggle an agent's enabled/disabled state or update its name and description. Send only the fields to change. -
    - - - -
    -
    -
    -
    -
    -
    -
    - - - - - + + + + SynthOS - APIs + + + + + + + + + + +
    + + + +
    + +
    +
    +
    Page Builder
    +
    +

    SynthOS: Expand the individual API operations to test calls.

    +
    +
    + +
    +
    +
    +
    API Explorer
    +
    +
    +
    GET /api/data/:page/:table
    +
    + This operation retrieves all rows from the specified page-scoped table. The response is an array of JSON objects, each representing a row in the table. +
    + + + +
    +
    +
    +
    +
    +
    GET /api/data/:page/:table?limit=N&offset=N
    +
    + Paginated variant. Returns a page of rows from the table. The response includes the items, total count, and whether more rows are available. + Response: { items: [...], total: number, offset: number, limit: number, hasMore: boolean } +
    + + + + + +
    +
    +
    +
    +
    +
    GET /api/data/:page/:table/:id
    +
    + This operation retrieves a single row from the specified page-scoped table using the provided ID. The response is a JSON object representing the row. +
    + + + + +
    +
    +
    +
    +
    +
    POST /api/data/:page/:table
    +
    + This operation saves a single row to the specified page-scoped table. The request should include a JSON object representing the row. The response indicates success. +
    + + + + +
    +
    +
    +
    +
    +
    DELETE /api/data/:page/:table/:id
    +
    + This operation deletes a single row from the specified page-scoped table using the provided ID. The response indicates success. +
    + + + + +
    +
    +
    +
    +
    +
    GET /api/pages
    +
    + This operation retrieves a list of all available pages. The response is an array of page objects with name, title, categories, pinned, createdDate, lastModified, pageVersion, and mode. +
    + +
    +
    +
    +
    +
    +
    GET /api/pages/:name
    +
    + This operation retrieves the metadata for a single page, including title, categories, pinned, createdDate, lastModified, pageVersion, and mode. +
    + + +
    +
    +
    +
    +
    +
    POST /api/pages/:name
    +
    + This operation merges metadata for a page. Send only the fields you want to update. Supported fields: title (string), categories (array of strings), pinned (boolean), mode ("unlocked" | "locked"). The lastModified timestamp is auto-set on each update. The createdDate and pageVersion fields are preserved and cannot be overridden. +
    + + + +
    +
    +
    +
    +
    +
    POST /api/pages/:name/pin
    +
    + This operation toggles the pinned status for a page. The request body should include pinned (boolean). +
    + + + +
    +
    +
    +
    +
    +
    DELETE /api/pages/:name
    +
    + This operation deletes a user page. Required (system) pages cannot be deleted. Returns 400 if the page is a required page, or 404 if not found. +
    + + +
    +
    +
    +
    +
    +
    POST /api/pages/:name/copy
    +
    + This operation copies a page to a new name. The source page can be a user page or a required (system) page. The request body should include name (string, required), title (string, optional), and categories (array of strings, optional). Returns 409 if the target page already exists. +
    + + + +
    +
    +
    +
    +
    +
    POST /api/search/web
    +
    + This operation searches the web using Brave Search and returns a list of results. Requires Brave Search to be enabled in Settings > Connectors. +
    + + + +
    +
    +
    +
    +
    +
    POST /api/generate/image
    +
    + This operation generates an image based on a prompt. You can specify the shape and style of the image. +
    + + + + +
    +
    +
    +
    +
    +
    POST /api/generate/completion
    +
    + This operation generates a text completion based on a prompt. You can optionally specify the temperature for controlling randomness. +
    + + + +
    +
    +
    +
    +
    +
    POST /api/scripts/:id
    +
    + This operation executes a script with the specified ID and passes in the provided variables. The response contains the output of the script execution. +
    + + + +
    +
    +
    +
    +
    +
    GET /api/connectors
    +
    + Lists all available connectors with their configuration status. Supports optional category and id query filters. +
    + + +
    +
    +
    +
    +
    +
    GET /api/connectors/:id
    +
    + Retrieves full detail for a single connector, including its definition and whether it is configured and enabled. +
    + + +
    +
    +
    +
    +
    +
    POST /api/connectors (proxy call)
    +
    + Proxies a request through a configured connector. The connector attaches authentication automatically based on its auth strategy. +
    + + + + + + +
    +
    +
    +
    +
    +
    GET /api/agents
    +
    + Lists configured agents (A2A and OpenClaw). Supports optional filters: enabled (boolean) and provider (a2a|openclaw). Returns id, name, description, url, enabled, provider, and capabilities for each agent. +
    + + + +
    +
    +
    +
    +
    +
    POST /api/agents/:id/send
    +
    + Sends a text message to an agent (works for both A2A and OpenClaw protocols). Returns a normalized response: { kind: 'message'|'task', text?: string, raw: object }. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. +
    + + + +
    +
    +
    +
    +
    +
    POST /api/agents/:id/stream
    +
    + Sends a message and receives a streaming SSE response. Each event is JSON: { kind: 'text'|'status'|'artifact'|'done'|'error', data: any }. The stream ends with a [DONE] sentinel. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. +
    + + + +
    +
    +
    +
    +
    +
    PATCH /api/agents/:id
    +
    + Toggle an agent's enabled/disabled state or update its name and description. Send only the fields to change. +
    + + + +
    +
    +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/required-pages/synthos_apis/page.json b/required-pages/synthos_apis/page.json index 43154b5..ef75b2e 100644 --- a/required-pages/synthos_apis/page.json +++ b/required-pages/synthos_apis/page.json @@ -1 +1,10 @@ -{ "title": "SynthOS APIs", "categories": ["System"], "pinned": false, "showInAll": false, "pageVersion": 2, "mode": "locked" } +{ + "title": "SynthOS APIs", + "categories": [ + "System" + ], + "pinned": false, + "showInAll": false, + "pageVersion": 3, + "mode": "locked" +} diff --git a/required-pages/synthos_scripts/page.html b/required-pages/synthos_scripts/page.html index e3ec80d..6b4ce8f 100644 --- a/required-pages/synthos_scripts/page.html +++ b/required-pages/synthos_scripts/page.html @@ -1,94 +1,89 @@ - - - - SynthOS - Scripts - - - - - - - - - - -
    - - - -
    - -
    -
    -
    Page Builder
    -
    -

    SynthOS: Add or modify scripts that can be executed using the /api/scripts/:id API.

    -
    -
    - Save - Pages - Reset -
    -
    - -
    -
    -
    -
    Script Editor
    -
    -
    -
      - -
    - -
    -
    -
    - Select an existing script to edit or add a new one using the "Add New Script" button. -
    - - - - - -
    Script Command is required.
    - - -
    -

    Understanding SynthOS Scripts

    -

    Scripts in SynthOS are powerful tools that allow you to define custom terminal commands for various tasks. When SynthOS executes a script, it runs the command and captures the console output, which is then returned for further processing or analysis.

    - -

    Creating Effective Scripts

    -

    When writing a script, you can use any valid terminal command. For added flexibility, you can include {{variable}} placeholders, which SynthOS will replace with actual values during execution.

    - -

    Example: Weather Forecast Script

    -

    Here's an example of an interesting script that SynthOS could use:

    -

    curl wttr.in/{{city}}?format=3

    -

    This script fetches a concise weather forecast for a specified city. SynthOS can call this script with different city names to get up-to-date weather information.

    - -

    Tips for Script Writing

    -

    1. Keep commands concise and focused on a single task.

    -

    2. Use variables for dynamic inputs to make scripts more versatile.

    -

    3. Consider potential errors and how to handle them.

    -

    4. Test your scripts thoroughly to ensure they work as expected.

    -

    5. Provide a clear and concise usage description to help others understand how to use your script.

    -

    6. Define the expected variables in the Variables field to document the script's requirements.

    - -

    Using the Description Field

    -

    The Description field allows you to provide a brief explanation of what SynthOS can use your script for.

    - -

    Defining Variables

    -

    Use the Variables field to specify any input parameters your script expects. Format it as a JSON object, e.g., { city: string, days?: number }. This helps SynthOS know what inputs it needs to provide when running your script.

    -
    -
    -
    -
    -
    - - - - - + + + + SynthOS - Scripts + + + + + + + + + + +
    + + + +
    + +
    +
    +
    Page Builder
    +
    +

    SynthOS: Add or modify scripts that can be executed using the /api/scripts/:id API.

    +
    +
    + +
    +
    +
    +
    Script Editor
    +
    +
    +
      + +
    + +
    +
    +
    + Select an existing script to edit or add a new one using the "Add New Script" button. +
    + + + + + +
    Script Command is required.
    + + +
    +

    Understanding SynthOS Scripts

    +

    Scripts in SynthOS are powerful tools that allow you to define custom terminal commands for various tasks. When SynthOS executes a script, it runs the command and captures the console output, which is then returned for further processing or analysis.

    + +

    Creating Effective Scripts

    +

    When writing a script, you can use any valid terminal command. For added flexibility, you can include {{variable}} placeholders, which SynthOS will replace with actual values during execution.

    + +

    Example: Weather Forecast Script

    +

    Here's an example of an interesting script that SynthOS could use:

    +

    curl wttr.in/{{city}}?format=3

    +

    This script fetches a concise weather forecast for a specified city. SynthOS can call this script with different city names to get up-to-date weather information.

    + +

    Tips for Script Writing

    +

    1. Keep commands concise and focused on a single task.

    +

    2. Use variables for dynamic inputs to make scripts more versatile.

    +

    3. Consider potential errors and how to handle them.

    +

    4. Test your scripts thoroughly to ensure they work as expected.

    +

    5. Provide a clear and concise usage description to help others understand how to use your script.

    +

    6. Define the expected variables in the Variables field to document the script's requirements.

    + +

    Using the Description Field

    +

    The Description field allows you to provide a brief explanation of what SynthOS can use your script for.

    + +

    Defining Variables

    +

    Use the Variables field to specify any input parameters your script expects. Format it as a JSON object, e.g., { city: string, days?: number }. This helps SynthOS know what inputs it needs to provide when running your script.

    +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/required-pages/synthos_scripts/page.json b/required-pages/synthos_scripts/page.json index 782e617..fa5b531 100644 --- a/required-pages/synthos_scripts/page.json +++ b/required-pages/synthos_scripts/page.json @@ -1 +1,10 @@ -{ "title": "SynthOS Scripts", "categories": ["System"], "pinned": false, "showInAll": false, "pageVersion": 2, "mode": "locked" } +{ + "title": "SynthOS Scripts", + "categories": [ + "System" + ], + "pinned": false, + "showInAll": false, + "pageVersion": 3, + "mode": "locked" +} diff --git a/src/migrations.ts b/src/migrations.ts index b5d1a12..ae84df9 100644 --- a/src/migrations.ts +++ b/src/migrations.ts @@ -10,6 +10,7 @@ import { deduplicateInlineScripts } from './service/transformPage'; */ const migrations: Record Promise> = { 1: migrateV1toV2, + 2: migrateV2toV3, }; /** @@ -36,7 +37,6 @@ const SHARED_CSS_SELECTORS = [ '.chat-panel', '.chat-header', '.chat-messages', '.chat-message', '.chat-message p', '.chat-message p strong', '.chat-message p code', '.chat-message strong', '.chat-message pre', '.chat-message code', '.chat-message a', - '.link-group', '.link-group a', '.link-group a:hover', 'form', '.chat-input', '.chat-input:focus', '.chat-input::placeholder', '.chat-input:disabled', '.chat-submit', '.chat-submit:hover', '.chat-submit:active', '.chat-submit:disabled', @@ -80,14 +80,8 @@ const DEFAULT_CHAT_PANEL = `

    Welcome! How can I help you?

    -
    - Save - Pages - Reset -
    - - +
    `; @@ -125,6 +119,33 @@ async function migrateV1toV2(html: string, completePrompt: completePrompt): Prom return migrated; } +/** + * v2 -> v3: Cheerio-based migration (no LLM). + * - Removes .link-group div + * - Converts chat to ' + ); + } + + // 3. Remove .chat-submit button inside #chatForm (or anywhere) + $('button.chat-submit').remove(); + + // Run through postProcessV2 to ensure structural integrity + return postProcessV2($.html()); +} + /** * Cheerio-based post-processing to verify the LLM output meets v2 requirements. * Uses the original HTML as a fallback source for critical elements. @@ -146,8 +167,7 @@ export function postProcessV2(html: string, originalHtml?: string): string { // Append default form $('.chat-panel').append(`
    - - +
    `); } } else { diff --git a/src/pages.ts b/src/pages.ts index 5065857..25a2a2f 100644 --- a/src/pages.ts +++ b/src/pages.ts @@ -25,7 +25,7 @@ export async function getRequiredPages(requiredPagesFolders: string[]): Promise< return result; } -export const PAGE_VERSION = 2; +export const PAGE_VERSION = 3; export interface PageInfo { name: string; diff --git a/src/service/useApiRoutes.ts b/src/service/useApiRoutes.ts index 9bad6cd..ce0ced5 100644 --- a/src/service/useApiRoutes.ts +++ b/src/service/useApiRoutes.ts @@ -617,7 +617,6 @@ Return ONLY the JSON object.`}; `if(window.pageInfo.mode==="locked"){`, `document.addEventListener("DOMContentLoaded",function(){`, `var f=document.getElementById("chatForm");if(f)f.style.display="none";`, - `var lg=document.querySelector(".link-group");if(lg)lg.style.display="none";`, `});`, `}`, ].join(''); diff --git a/src/service/usePageRoutes.ts b/src/service/usePageRoutes.ts index 5cc23c5..2180b39 100644 --- a/src/service/usePageRoutes.ts +++ b/src/service/usePageRoutes.ts @@ -283,7 +283,7 @@ function buildThemeSection(themeInfo?: ThemeInfo): ContextSection { const colorList = Object.entries(colors) .map(([name, value]) => ` --${name}: ${value}`) .join('\n'); - content = `Mode: ${mode}\nCSS custom properties (use instead of hardcoded values):\n${colorList}\n\nShared shell classes (pre-styled by theme, do not redefine):\n .chat-panel — Left sidebar container (30% width)\n .chat-header — Chat panel title bar\n .chat-messages — Scrollable message container\n .chat-message — Individual message wrapper\n .link-group — Navigation links row (Save, Pages, Reset)\n .chat-input — Message text input\n .chat-submit — Send button\n .viewer-panel — Right content area (70% width)\n .loading-overlay — Full-screen loading overlay\n .spinner — Animated loading spinner\n .modal-overlay — Full-screen modal backdrop (position:fixed, z-index:2000, backdrop-filter:blur). Add class "show" to display.\n .modal-content — Centered modal container\n .modal-header — Gradient header bar\n .modal-body — Modal content area\n .modal-footer — Bottom action bar (flex, space-between)\n .modal-footer-right — Right-aligned button group\n\nModals and popups: ALWAYS use the theme\'s .modal-overlay class for any modal or popup overlay. Do NOT create custom overlay classes with position:fixed and z-index. Structure:\n \nShow/hide by toggling the "show" class: el.classList.add(\'show\') / el.classList.remove(\'show\'). This ensures correct z-index layering above the chat toggle and other UI elements.\n\nPage title bars: To align with the chat header, apply these styles:\n min-height: var(--header-min-height);\n padding: var(--header-padding-vertical) var(--header-padding-horizontal);\n line-height: var(--header-line-height);\n display: flex; align-items: center; justify-content: center; box-sizing: border-box;\n\nFull-viewer mode: For games, animations, or full-screen content, add class "full-viewer" to the viewer-panel element to remove its padding.\n\nChat panel behaviours (auto-injected via page script — do NOT recreate in page code):\n The server injects page-v2.js after transformation. It provides:\n - Form submit handler: sets action to window.location.pathname, shows #loadingOverlay, disables inputs\n - Save/Reset link handlers (#saveLink, #resetLink)\n - Chat scroll to bottom (#chatMessages)\n - Chat toggle button (.chat-toggle) — created dynamically if not in markup\n - .chat-input-wrapper — wraps #chatInput with a brainstorm icon button\n - Brainstorm modal (#brainstormModal) — LLM-powered brainstorm UI, created dynamically\n - Focus management — keeps keyboard input directed to #chatInput\n\n Do NOT:\n - Create your own form submit handler, toggle button, or input wrapper\n - Modify or replace .chat-panel, .chat-header, .link-group, #chatForm, or .chat-toggle\n - INSERT new - - - - - - - -
    - - - -
    - -
    -
    -
    Page Builder
    -
    -
    -

    SynthOS: Welcome to NEON ASTEROIDS! Close this panel to see the full game. Destroy asteroids to advance levels, dodge saucers from Level 2, and collect power-ups (Shield, Rapid Fire, Multi-Shot, Extra Life). Use Hyperspace to teleport out of danger. Choose Pass & Play for up to 4 players — Solo Turns or Hot Seat mode. Works with keyboard and gamepad.

    -

    Want to build your own retro game? Start from the Retro Game Starter — it gives you a ready-made canvas, game loop, and input handling so you can jump straight into designing your game.

    -
    -
    -
    - -
    -
    -
    -
    - -
    - -
    -
    SCORE: 00000
    -
    LEVEL: 1
    -
    LIVES: 3
    -
    -
    PAUSED
    -
    -
    PLAYER 1
    -
    YOUR TURN
    -
    Press SPACE to start
    -
    -
    -
    GAME OVER
    -
    FINAL STANDINGS
    -
    - -
    -
    -

    NEON
    ASTEROIDS

    -

    Navigate the cosmic void. Destroy all asteroids. Beware the saucers!

    -
    - - -
    -
    -
    CHOOSE MODE
    - -
    Each player gets a fresh game. Highest total score wins.
    - -
    Shared asteroid field. Rotate on each death. Last one standing!
    -
    -
    -
    PLAYERS
    -
    - ← - 2 - → -
    - -
    -
    - -
    -

    NEW HIGH SCORE!

    -
    SCORE: 0
    -
    -
    A
    -
    A
    -
    A
    -
    -
    LEFT/RIGHT select slot • UP/DOWN change letter • ENTER confirm
    -
    -
    WASD / ARROWS to move • SPACE to fire • H hyperspace • P pause
    -
    - -
    -
    - -
    -
    - - - - - - - - - \ No newline at end of file + + + + SynthOS + + + + + + + + +
    + + + +
    + +
    +
    +
    Page Builder
    +
    +
    +

    SynthOS: NEON ASTEROIDS — Destroy asteroids, dodge saucers, collect power-ups. Controls: WASD/Arrows to move, Space to fire, H for hyperspace, P to pause. Gamepad supported. Up to 4 players in Pass & Play mode.

    +

    Want to build your own retro game? Start from the Retro Game Starter — it gives you a ready-made canvas, game loop, and input handling so you can jump straight into designing your game.

    +
    +

    User: Integrate sound effects from the uploaded effects.json manifest into the game — laser fire, explosions, thrust, hyperspace, power-ups, saucer alerts, menu navigation, and ambient space sounds.

    SynthOS: Sound effects integrated! Here's what I added: +
    • Laser Fire — plays each time you shoot +
    • Asteroid Explosion — plays when asteroids are destroyed +
    • Ship Thrust — loops while you're thrusting, stops when you release +
    • Hyperspace Jump — plays on teleport +
    • Power-Up Collect — plays when you pick up any power-up +
    • Saucer Alert — plays when an enemy saucer spawns +
    • Menu Navigate — plays when moving through menu options +
    • Ambient Space — three ambient tracks randomly cycle as background atmosphere during gameplay +

    All sounds load asynchronously on page load. The ambient soundscape starts when gameplay begins and stops on game over or return to menu. Close the chat panel and start a mission to hear them!

    User: the sound effects aren't playing

    SynthOS: Let me check the sound system. I've added error handling to diagnose the issue. Open your browser's console (F12) and look for messages about sound loading.

    Common issues:
    • Missing manifest — The effects.json file needs to be uploaded to this page's file storage
    • Missing audio files — Each sound referenced in effects.json must also be uploaded
    • Browser autoplay policy — Some browsers block audio until user interaction

    To fix:
    1. Make sure effects.json is uploaded via the Files API
    2. Upload all referenced .mp3/.ogg files
    3. Check the console for specific error messages

    The sound system will now log detailed loading info to help debug!

    User: Fix the JavaScript errors — SyntaxError: Unexpected end of input and TypeError: Cannot read properties of null.

    SynthOS: Found and fixed the bug! The stopAmbient() function was missing its closing brace }, which caused a SyntaxError that prevented the entire game script from parsing. This cascaded into the null reference error in gameLoop(). The game should now load and run correctly.

    User: Fix the JavaScript error: SyntaxError: Identifier 'sfx' has already been declared

    SynthOS: Fixed! The issue was that the inline game script used const and let for top-level variable declarations. Since retro-game.js (the library) likely declares some of the same identifiers, using const/let causes a "already been declared" error because they don't allow redeclaration in the same scope. I've changed all top-level const and let declarations to var, which allows redeclaration without errors. The game should now load and run correctly.

    Saved
    + +
    + +
    +
    +
    +
    + +
    + +
    +
    SCORE: 00000
    +
    LEVEL: 1
    +
    LIVES: 3
    + +
    +
    PAUSED
    +
    +
    PLAYER 1
    +
    YOUR TURN
    +
    Press SPACE to start
    +
    +
    +
    GAME OVER
    +
    FINAL STANDINGS
    +
    + +
    +
    +

    NEON
    ASTEROIDS

    +

    Navigate the cosmic void. Destroy all asteroids. Beware the saucers!

    +
    + + +
    +
    +
    CHOOSE MODE
    + +
    Each player gets a fresh game. Highest total score wins.
    + +
    Shared asteroid field. Rotate on each death. Last one standing!
    +
    +
    +
    PLAYERS
    +
    + ← + 2 + → +
    + +
    +
    + +
    +

    NEW HIGH SCORE!

    +
    SCORE: 0
    +
    +
    A
    +
    A
    +
    A
    +
    +
    LEFT/RIGHT select slot • UP/DOWN change letter • ENTER confirm
    +
    +
    WASD / ARROWS to move • SPACE to fire • H hyperspace • P pause
    +
    + +
    +
    + +
    +
    + + + + + + + + + \ No newline at end of file diff --git a/default-pages/neon_asteroids/page.json b/default-pages/neon_asteroids/page.json index e983455..c101675 100644 --- a/default-pages/neon_asteroids/page.json +++ b/default-pages/neon_asteroids/page.json @@ -5,8 +5,8 @@ ], "pinned": false, "showInAll": true, - "createdDate": "2026-02-13T03:18:30.368Z", - "lastModified": "2026-02-13T03:20:42.803Z", + "createdDate": "2026-03-02T21:38:41.912Z", + "lastModified": "2026-03-02T21:38:41.912Z", "pageVersion": 3, "mode": "unlocked" -} +} \ No newline at end of file diff --git a/default-pages/retro_game_starter/page.html b/default-pages/retro_game_starter/page.html index a3bc2b2..9354a98 100644 --- a/default-pages/retro_game_starter/page.html +++ b/default-pages/retro_game_starter/page.html @@ -10,6 +10,7 @@ #gameCanvas{display:block;width:100%;height:100%} .game-ui{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;z-index:10} .lives-display,.score-display{font-family:Orbitron,'Segoe UI',sans-serif;font-size:18px;color:#0ff;text-shadow:0 0 10px #0ff,0 0 20px #0ff;letter-spacing:2px} +.mute-btn{pointer-events:auto;background:none;border:1px solid rgba(0,255,255,.4);border-radius:4px;color:#0ff;cursor:pointer;padding:2px 6px;font-size:16px;line-height:1;opacity:.7;transition:opacity .2s}.mute-btn:hover{opacity:1} .player-indicator{font-family:Orbitron,'Segoe UI',sans-serif;font-size:18px;text-shadow:0 0 10px currentColor,0 0 20px currentColor;letter-spacing:2px;margin-right:8px} .game-over-screen,.start-screen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:20} .game-over-screen h1,.start-screen h1{font-family:Orbitron,'Segoe UI',sans-serif;font-size:48px;line-height:1.2;color:#f0f;text-shadow:0 0 20px #f0f,0 0 40px #f0f,0 0 60px #f0f;margin-bottom:20px;letter-spacing:5px} @@ -119,11 +120,11 @@
    Page Builder
    -

    SynthOS: Welcome to the Retro Game Starter! This page has a simple Paddle Bounce game running on the right — but it’s really a starting point for building your game. Here’s how:

    -

    1. Pick a game idea. Not sure what to build? Just ask me! Try something like “brainstorm 5 retro game ideas” and I’ll give you options to choose from.

    -

    2. Show me what you want. Have a screenshot or sketch of the game you’re picturing? Upload it here — I can see images. The more reference you give me, the closer I’ll get on the first try.

    -

    3. Tell me to build it. Once you know what you want, just describe it: “Turn this into a Space Invaders clone” or “Make a snake game with neon graphics.” I’ll rewrite the game code for you while keeping the menus, high scores, multiplayer, and gamepad support intact.

    -

    4. Play and iterate. Try it out, then tell me what to change: “Make the enemies faster”, “Add a power-up that gives a shield”, “Change the color to green.” We’ll go back and forth until it feels right.

    +

    SynthOS: Welcome to the Retro Game Starter! This is a starting point for building your game.

    +

    1. Pick a game idea. Not sure? Try “brainstorm 5 retro game ideas” and I’ll give you options.

    +

    2. Tell me to build it. Describe what you want: “Turn this into a Space Invaders clone” or “Make a snake game with neon graphics.” Upload a screenshot for reference if you have one.

    +

    3. Play and iterate. Try it out, then tell me what to change: “Make the enemies faster”, “Add a power-up that gives a shield.”

    +

    4. Add sound effects. Open the ElevenLabs Effects Studio page, select this game as the project, click Scan to auto-generate effects, then Apply to wire them in.

    Go ahead — tell me what you want to build!

    @@ -143,6 +144,7 @@

    HIGH SCORES

    SCORE: 00000
    LIVES: 3
    +
    PAUSED
    @@ -240,7 +242,7 @@

    CONTROLS

    const BALL_SPEED_INCREMENT = 0.15; // CUSTOMIZE: Speed added per paddle hit const BALL_MAX_SPEED = 12; // CUSTOMIZE: Maximum ball speed const STARTING_LIVES = 3; // CUSTOMIZE: Lives per game -const HS_KEY = "paddleBounce_highScores"; // localStorage key for high scores +// High scores stored in synthos.data table storage // Player colors for multiplayer: P1=cyan, P2=magenta, P3=yellow, P4=green, ... const PLAYER_COLORS = ["#00ffff", "#ff00ff", "#ffff00", "#00ff00", "#ff6600", "#ff3388", "#33ccff", "#ccff33"]; @@ -341,6 +343,27 @@

    CONTROLS

    const particles = RetroGame.createParticles({ maxParticles: 300 }); const shake = RetroGame.createShake(); +// === SOUND EFFECTS =========================================================== +// RetroGame.createSoundEffects() loads effects from an effects.json manifest +// in this page's files/ directory. Use the Effects Studio to scan this page, +// generate audio, and Apply — that creates the manifest and audio files. +// CUSTOMIZE: Adjust volume (0-1). Effects are played with sfx.play('Name'). +const sfx = RetroGame.createSoundEffects({ volume: 1.0 }); +var sfxReady = false; +sfx.load().then(function() { + sfxReady = true; +}).catch(function(e) { + // No effects.json yet — sound is optional until Effects Studio applies one +}); + +// Mute toggle +var sfxMuted = false; +document.getElementById("muteBtn").addEventListener("click", function() { + sfxMuted = !sfxMuted; + sfx.volume = sfxMuted ? 0 : 1; + this.innerHTML = sfxMuted ? "\u{1F507}" : "\u{1F50A}"; +}); + // === GAMEPAD DETECTION & CONTROLS SWAP ======================================= // When a gamepad connects/disconnects, update the side panel controls list // and all button prompts throughout the UI. @@ -491,31 +514,37 @@

    CONTROLS

    } // === HIGH SCORE SYSTEM ======================================================= -// Stores top 20 scores in localStorage. Renders into the side leaderboard panel. +// Stores top 20 scores in synthos.data table storage. Renders into the side leaderboard panel. const MAX_LEADERBOARD = 20; +var _highScores = [{ initials: "ACE", score: 50 }]; -function loadHighScores() { +// Load scores from app table storage on startup +(async function() { try { - const raw = localStorage.getItem(HS_KEY); - if (raw) { - const parsed = JSON.parse(raw); - if (Array.isArray(parsed) && parsed.length > 0) return parsed; + var row = await synthos.data.get('high_scores', 'scores'); + if (row && Array.isArray(row.entries) && row.entries.length > 0) { + _highScores = row.entries; } } catch(e) {} - return [{ initials: "ACE", score: 50 }]; + renderLeaderboard(); +})(); + +function loadHighScores() { + return _highScores; } function saveHighScores(scores) { - localStorage.setItem(HS_KEY, JSON.stringify(scores)); + _highScores = scores; + synthos.data.save('high_scores', { id: 'scores', entries: scores }).catch(function() {}); } function qualifiesForHighScore(s) { - const scores = loadHighScores(); + var scores = loadHighScores(); return scores.length < MAX_LEADERBOARD || s > scores[scores.length - 1].score; } function insertHighScore(initials, s) { - const scores = loadHighScores(); + var scores = loadHighScores().slice(); scores.push({ initials: initials, score: s }); scores.sort(function(a, b) { return b.score - a.score; }); if (scores.length > MAX_LEADERBOARD) scores.length = MAX_LEADERBOARD; @@ -524,11 +553,11 @@

    CONTROLS

    } function renderLeaderboard() { - const scores = loadHighScores(); - const tbody = document.getElementById("leaderboardBody"); + var scores = loadHighScores(); + var tbody = document.getElementById("leaderboardBody"); tbody.innerHTML = ""; scores.forEach(function(entry, i) { - const tr = document.createElement("tr"); + var tr = document.createElement("tr"); tr.innerHTML = '' + (i + 1) + '.' + '' + entry.initials + '' + @@ -898,17 +927,21 @@

    CONTROLS

    ball.y += ball.vy; // --- Wall collisions (top, left, right) --- + // CUSTOMIZE: sfx.play('Wall_Bounce') — add a Wall_Bounce effect in Effects Studio if (ball.x - BALL_RADIUS < 0) { ball.x = BALL_RADIUS; ball.vx = Math.abs(ball.vx); + if (sfxReady) sfx.play('Wall_Bounce'); } if (ball.x + BALL_RADIUS > canvas.width) { ball.x = canvas.width - BALL_RADIUS; ball.vx = -Math.abs(ball.vx); + if (sfxReady) sfx.play('Wall_Bounce'); } if (ball.y - BALL_RADIUS < 0) { ball.y = BALL_RADIUS; ball.vy = Math.abs(ball.vy); + if (sfxReady) sfx.play('Wall_Bounce'); } // --- Paddle collision --- @@ -930,6 +963,8 @@

    CONTROLS

    // Score +1 per hit score++; updateUI(); + // CUSTOMIZE: sfx.play('Paddle_Hit') — add a Paddle_Hit effect in Effects Studio + if (sfxReady) sfx.play('Paddle_Hit'); // CUSTOMIZE: Particles on paddle hit — change color/count for different effects particles.emit(ball.x, paddleTop, 8, { color: getActivePlayerColor(), speed: 3, size: 2, @@ -940,7 +975,9 @@

    CONTROLS

    // --- Ball falls past paddle (lose a life) --- if (ball.y - BALL_RADIUS > canvas.height) { - // CUSTOMIZE: Screen shake and particles on life loss + // CUSTOMIZE: Screen shake, sound, and particles on life loss + // CUSTOMIZE: sfx.play('Life_Lost') — add a Life_Lost effect in Effects Studio + if (sfxReady) sfx.play('Life_Lost'); shake.trigger(12); particles.emit(ball.x, canvas.height, 15, { color: "#ff0000", speed: 4, size: 3, @@ -1047,6 +1084,8 @@

    CONTROLS

    function gameOver() { gameRunning = false; + // CUSTOMIZE: sfx.play('Game_Over') — add a Game_Over effect in Effects Studio + if (sfxReady) sfx.play('Game_Over'); if (qualifiesForHighScore(score)) { hsEntryPlayerIndex = -1; showHighScoreEntry(); diff --git a/docs/page-rendering-writeup.md b/docs/page-rendering-writeup.md new file mode 100644 index 0000000..3905578 --- /dev/null +++ b/docs/page-rendering-writeup.md @@ -0,0 +1,238 @@ +# How Page Rendering Works in SynthOS + +*Audience: Product Managers familiar with Generative UX (GenUX) concepts* + +--- + +## The One-Sentence Version + +SynthOS turns natural language into live web apps by running a **server-side DOM surgery loop**: the user types a message, an LLM produces a list of surgical DOM operations, the server applies them with cheerio, and the browser receives a complete, updated HTML document. + +There is no client-side framework. No virtual DOM. No component tree. The HTML *is* the app, and the LLM *is* the builder. + +--- + +## The Core Loop + +Every interaction follows the same cycle: + +``` +User message → Annotate DOM → LLM → Apply changes → Serve HTML +``` + +Let's walk through each stage. + +### 1. The User Sends a Message + +The browser-side chat panel is a ` - -
    -
    -
    API Explorer
    -
    -
    -
    GET /api/data/:page/:table
    -
    - This operation retrieves all rows from the specified page-scoped table. The response is an array of JSON objects, each representing a row in the table. -
    - - - -
    -
    -
    -
    -
    -
    GET /api/data/:page/:table?limit=N&offset=N
    -
    - Paginated variant. Returns a page of rows from the table. The response includes the items, total count, and whether more rows are available. - Response: { items: [...], total: number, offset: number, limit: number, hasMore: boolean } -
    - - - - - -
    -
    -
    -
    -
    -
    GET /api/data/:page/:table/:id
    -
    - This operation retrieves a single row from the specified page-scoped table using the provided ID. The response is a JSON object representing the row. -
    - - - - -
    -
    -
    -
    -
    -
    POST /api/data/:page/:table
    -
    - This operation saves a single row to the specified page-scoped table. The request should include a JSON object representing the row. The response indicates success. -
    - - - - -
    -
    -
    -
    -
    -
    DELETE /api/data/:page/:table/:id
    -
    - This operation deletes a single row from the specified page-scoped table using the provided ID. The response indicates success. -
    - - - - -
    -
    -
    -
    -
    -
    GET /api/pages
    -
    - This operation retrieves a list of all available pages. The response is an array of page objects with name, title, categories, pinned, createdDate, lastModified, pageVersion, and mode. -
    - -
    -
    -
    -
    -
    -
    GET /api/pages/:name
    -
    - This operation retrieves the metadata for a single page, including title, categories, pinned, createdDate, lastModified, pageVersion, and mode. -
    - - -
    -
    -
    -
    -
    -
    POST /api/pages/:name
    -
    - This operation merges metadata for a page. Send only the fields you want to update. Supported fields: title (string), categories (array of strings), pinned (boolean), mode ("unlocked" | "locked"). The lastModified timestamp is auto-set on each update. The createdDate and pageVersion fields are preserved and cannot be overridden. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/pages/:name/pin
    -
    - This operation toggles the pinned status for a page. The request body should include pinned (boolean). -
    - - - -
    -
    -
    -
    -
    -
    DELETE /api/pages/:name
    -
    - This operation deletes a user page. Required (system) pages cannot be deleted. Returns 400 if the page is a required page, or 404 if not found. -
    - - -
    -
    -
    -
    -
    -
    POST /api/pages/:name/copy
    -
    - This operation copies a page to a new name. The source page can be a user page or a required (system) page. The request body should include name (string, required), title (string, optional), and categories (array of strings, optional). Returns 409 if the target page already exists. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/search/web
    -
    - This operation searches the web using Brave Search and returns a list of results. Requires Brave Search to be enabled in Settings > Connectors. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/generate/image
    -
    - This operation generates an image based on a prompt. You can specify the shape and style of the image. -
    - - - - -
    -
    -
    -
    -
    -
    POST /api/generate/completion
    -
    - This operation generates a text completion based on a prompt. You can optionally specify the temperature for controlling randomness. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/scripts/:id
    -
    - This operation executes a script with the specified ID and passes in the provided variables. The response contains the output of the script execution. -
    - - - -
    -
    -
    -
    -
    -
    GET /api/connectors
    -
    - Lists all available connectors with their configuration status. Supports optional category and id query filters. -
    - - -
    -
    -
    -
    -
    -
    GET /api/connectors/:id
    -
    - Retrieves full detail for a single connector, including its definition and whether it is configured and enabled. -
    - - -
    -
    -
    -
    -
    -
    POST /api/connectors (proxy call)
    -
    - Proxies a request through a configured connector. The connector attaches authentication automatically based on its auth strategy. -
    - - - - - - -
    -
    -
    -
    -
    -
    GET /api/agents
    -
    - Lists configured agents (A2A and OpenClaw). Supports optional filters: enabled (boolean) and provider (a2a|openclaw). Returns id, name, description, url, enabled, provider, and capabilities for each agent. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/agents/:id/send
    -
    - Sends a text message to an agent (works for both A2A and OpenClaw protocols). Returns a normalized response: { kind: 'message'|'task', text?: string, raw: object }. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. -
    - - - -
    -
    -
    -
    -
    -
    POST /api/agents/:id/stream
    -
    - Sends a message and receives a streaming SSE response. Each event is JSON: { kind: 'text'|'status'|'artifact'|'done'|'error', data: any }. The stream ends with a [DONE] sentinel. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. -
    - - - -
    -
    -
    -
    -
    -
    PATCH /api/agents/:id
    -
    - Toggle an agent's enabled/disabled state or update its name and description. Send only the fields to change. -
    - - - -
    -
    -
    -
    -
    -
    -
    - - - - - + + + + SynthOS - APIs + + + + + + +
    + + + +
    + +
    +
    +
    Page Builder
    +
    +

    SynthOS: Expand individual API sections to test calls. Use the tabs to switch between API groups.

    +
    +
    + +
    +
    +
    +
    + API Explorer +

    Interactive reference for all SynthOS REST endpoints.

    + +
    +
    + + + + + + + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + + + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/src/builders/anthropic.ts b/src/builders/anthropic.ts index aa39512..4586bee 100644 --- a/src/builders/anthropic.ts +++ b/src/builders/anthropic.ts @@ -1,6 +1,6 @@ import { anthropic as createAnthropicModel, completePrompt, ContentBlock } from '../models'; import { parseChangeList, getTransformInstr } from '../service/transformPage'; -import { Attachment, Builder, BuilderResult, CHANGE_OPS_SCHEMA, ContextSection } from './types'; +import { Attachment, Builder, BuilderResult, CHANGE_OPS_SCHEMA, CHANGE_OPS_SCHEMA_NO_RANGED, ContextSection } from './types'; // --------------------------------------------------------------------------- // Builder options — passed from the route handler @@ -11,13 +11,17 @@ export interface AnthropicBuilderOptions { model?: string; /** Optional wrapper applied to any internally-created model (e.g. for debug logging). */ wrapModel?: (model: completePrompt) => completePrompt; + /** When true, this is the first edit to a saved page (v0→v1) — forces Opus + no ranged writes. */ + isFirstEdit?: boolean; + /** When true, retry the last edit — forces Opus + no ranged writes, skips classification. */ + tryAgain?: boolean; } // --------------------------------------------------------------------------- // Request classification // --------------------------------------------------------------------------- -export type Classification = 'hard-change' | 'easy-change' | 'question'; +export type Classification = 'question' | 'easy-change' | 'medium-change' | 'hard-change' | 're-write'; export interface ClassifyResult { classification: Classification; @@ -28,21 +32,20 @@ export interface ClassifyResult { const CLASSIFIER_SYSTEM_PROMPT = `You classify user messages for a web page builder. Default to a change request. Only classify as "question" when the user is purely asking for information with zero implication that anything should change. -Step 1 — Does the message describe a problem, bug, broken behavior, or something that should be different? - Yes → it is a change request (the user wants it fixed). Go to step 2. - No → go to step 3. - -Step 2 — How complex is the change? - Simple (text edits, color/style changes, adding/removing a single element, toggling visibility, minor CSS tweaks) → "easy-change" - Complex (new features, games, animations, restructuring components, significant JS logic, forms with validation, multi-step work) → "hard-change" - -Step 3 — Is the message a direct, explicit question asking for information only? Examples: "What color is the header?", "How many sections are there?", "What font is the title using?" +Step 1 — Is this a pure information question with zero change implication? + Examples: "What color is the header?", "How many sections are there?", "What font is the title using?" Yes, and there is absolutely no suggestion that anything should change → "question" - Otherwise → treat as a change request, go to step 2. + No → go to step 2. + +Step 2 — Classify complexity: + "easy-change": Text edits, color/style tweaks, toggling visibility, adding/removing a single element, minor CSS changes. + "medium-change": Modifying existing JS logic, updating event handlers, changing multiple related styles, adding a small feature to existing functionality, updating existing behavior. + "hard-change": Complex new features, significant new JS, games, animations, restructuring layout, forms with validation, multi-step work. + "re-write": Complete page overhaul, fundamental restructure, "start over", "rebuild", "redo the whole page". Return only JSON. No other text. -- Change: { "classification": "easy-change" } or { "classification": "hard-change" } +- Change: { "classification": "easy-change" } or { "classification": "medium-change" } or { "classification": "hard-change" } or { "classification": "re-write" } - Question: { "classification": "question", "answer": "" }`; export async function classifyRequest( @@ -54,7 +57,7 @@ export async function classifyRequest( const sonnet = createAnthropicModel({ apiKey, model: 'claude-sonnet-4-5' }); const result = await sonnet({ system: { role: 'system', content: CLASSIFIER_SYSTEM_PROMPT }, - prompt: { role: 'user', content: `\n${pageHtml}\n\n\n\n${userMessage}\n` }, + prompt: { role: 'user', content: `\n${pageHtml}\n\n\n${userMessage}` }, jsonMode: true, }); @@ -67,7 +70,7 @@ export async function classifyRequest( if (c === 'question') { return { classification: 'question', answer: typeof parsed.answer === 'string' ? parsed.answer : '' }; } - if (c === 'easy-change' || c === 'hard-change') { + if (c === 'easy-change' || c === 'medium-change' || c === 'hard-change' || c === 're-write') { return { classification: c }; } return { classification: 'hard-change' }; @@ -100,41 +103,64 @@ export function createAnthropicBuilder( async run(currentPage, additionalSections, userMessage, newBuild, attachments?): Promise { try { const isOpus = options?.model?.startsWith('claude-opus-'); + const noRanged = CHANGE_OPS_SCHEMA_NO_RANGED; // Non-Opus models or missing apiKey: existing behavior if (!isOpus || !options?.apiKey) { return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments); } - // Console errors bypass classification — always route to Opus + // Console errors bypass classification — always route to Opus with no ranged writes if (userMessage.includes('CONSOLE_ERRORS:')) { - console.log('classifyRequest: console errors detected → routing to ' + options.model!); - return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments); + console.log('classifyRequest: console errors detected → routing to ' + options.model! + ' (no ranged)'); + return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments, noRanged); + } + + // New builds always use Opus with no ranged writes + if (newBuild) { + console.log('classifyRequest: new build → routing to ' + options.model! + ' (no ranged)'); + return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments, noRanged); + } + + // First edit to a saved page (v0→v1) — force Opus with no ranged writes + if (options?.isFirstEdit) { + console.log('classifyRequest: first edit (v0→v1) → routing to ' + options.model! + ' (no ranged)'); + return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments, noRanged); + } + + // Try again — force Opus with no ranged writes, skip classification + if (options?.tryAgain) { + console.log('classifyRequest: try again → routing to claude-opus-4-6 (no ranged)'); + let opus: completePrompt = createAnthropicModel({ apiKey: options.apiKey!, model: 'claude-opus-4-6' }); + if (options.wrapModel) opus = options.wrapModel(opus); + return buildWithModel(opus, currentPage, additionalSections, userMessage, userInstructions, name, attachments, noRanged); } // Classify the request using Sonnet const classifyResult = await classifyRequest(options.apiKey, currentPage.content, userMessage); - console.log(`classifyRequest: "${classifyResult.classification}" → routing to ${routeLabel(classifyResult.classification, newBuild, options.model!)}`); + console.log(`classifyRequest: "${classifyResult.classification}" → routing to ${routeLabel(classifyResult.classification, options.model!)}`); // Questions — answer was already provided by the classifier if (classifyResult.classification === 'question') { return { kind: 'reply', text: classifyResult.answer ?? '' }; } - // New builds always use Opus (the configured model) - if (newBuild) { - return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments); - } - - // Easy changes use Sonnet + // Easy changes use Sonnet with default schema (ranged allowed) if (classifyResult.classification === 'easy-change') { let sonnet: completePrompt = createAnthropicModel({ apiKey: options.apiKey, model: 'claude-sonnet-4-5' }); if (options.wrapModel) sonnet = options.wrapModel(sonnet); return buildWithModel(sonnet, currentPage, additionalSections, userMessage, userInstructions, name, attachments); } - // Hard changes use Opus - return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments); + // Medium changes use Sonnet with no ranged writes + if (classifyResult.classification === 'medium-change') { + let sonnet: completePrompt = createAnthropicModel({ apiKey: options.apiKey, model: 'claude-sonnet-4-5' }); + if (options.wrapModel) sonnet = options.wrapModel(sonnet); + return buildWithModel(sonnet, currentPage, additionalSections, userMessage, userInstructions, name, attachments, noRanged); + } + + // Hard changes and re-writes use Opus with no ranged writes + return buildWithModel(complete, currentPage, additionalSections, userMessage, userInstructions, name, attachments, noRanged); } catch (err: unknown) { return { kind: 'error', error: err instanceof Error ? err : new Error(String(err)) }; } @@ -153,7 +179,8 @@ export async function buildWithModel( userMessage: string, userInstructions: string | undefined, productName: string, - attachments?: Attachment[] + attachments?: Attachment[], + outputSchema?: Record ): Promise { // -- System message: all static content (cacheable) -- const systemParts: string[] = []; @@ -199,7 +226,7 @@ export async function buildWithModel( system: { role: 'system', content: systemContent }, prompt: { role: 'user', content: promptContent }, cacheSystem: true, - outputSchema: CHANGE_OPS_SCHEMA, + outputSchema: outputSchema ?? CHANGE_OPS_SCHEMA, }); if (!result.completed) { @@ -214,11 +241,12 @@ export async function buildWithModel( // Route label for console logging // --------------------------------------------------------------------------- -function routeLabel(classification: Classification, newBuild: boolean, configuredModel: string): string { +function routeLabel(classification: Classification, configuredModel: string): string { if (classification === 'question') return 'classifier (answered inline)'; - if (newBuild) return configuredModel; if (classification === 'easy-change') return 'claude-sonnet-4-5'; - return configuredModel; + if (classification === 'medium-change') return 'claude-sonnet-4-5 (no ranged)'; + if (classification === 're-write') return configuredModel + ' (re-write)'; + return configuredModel + ' (no ranged)'; } // --------------------------------------------------------------------------- diff --git a/src/builders/types.ts b/src/builders/types.ts index da068b0..243c156 100644 --- a/src/builders/types.ts +++ b/src/builders/types.ts @@ -132,6 +132,75 @@ export const CHANGE_OPS_SCHEMA: Record = { }, }; +/** + * Variant of CHANGE_OPS_SCHEMA that omits ranged write operations (search-replace, search-insert). + * Used for medium/hard/re-write changes where the model should replace full blocks instead of + * attempting partial edits. + */ +export const CHANGE_OPS_SCHEMA_NO_RANGED: Record = { + type: 'array', + items: { + anyOf: [ + { + type: 'object', + properties: { + op: { type: 'string', const: 'update' }, + nodeId: { type: 'string' }, + html: { type: 'string' }, + }, + required: ['op', 'nodeId', 'html'], + additionalProperties: false, + }, + { + type: 'object', + properties: { + op: { type: 'string', const: 'replace' }, + nodeId: { type: 'string' }, + html: { type: 'string' }, + }, + required: ['op', 'nodeId', 'html'], + additionalProperties: false, + }, + { + type: 'object', + properties: { + op: { type: 'string', const: 'delete' }, + nodeId: { type: 'string' }, + }, + required: ['op', 'nodeId'], + additionalProperties: false, + }, + { + type: 'object', + properties: { + op: { type: 'string', const: 'insert' }, + parentId: { type: 'string' }, + position: { type: 'string', enum: ['prepend', 'append', 'before', 'after'] }, + html: { type: 'string' }, + }, + required: ['op', 'parentId', 'position', 'html'], + additionalProperties: false, + }, + { + type: 'object', + properties: { + op: { type: 'string', const: 'style-element' }, + nodeId: { type: 'string' }, + style: { type: 'string' }, + }, + required: ['op', 'nodeId', 'style'], + additionalProperties: false, + }, + ], + }, +}; + +/** + * Text instruction variant for no-ranged-writes mode. + * Tells the model to use `update` for full innerHTML replacement instead of partial edits. + */ +export const CHANGE_OPS_FORMAT_INSTRUCTION_NO_RANGED = `For script and style blocks, use "update" to replace the full innerHTML or "replace" to replace the full outerHTML. Do NOT use partial search-replace edits.`; + /** * OpenAI structured outputs require a root-level object. * This wraps CHANGE_OPS_SCHEMA in { changes: [...] }. diff --git a/src/init.ts b/src/init.ts index 2cf0c55..af54725 100644 --- a/src/init.ts +++ b/src/init.ts @@ -1,9 +1,8 @@ import * as fs from 'fs/promises'; import path from "path"; -import { checkIfExists, copyFile, copyFilesFromFolders, copyFolderRecursive, deleteFile, ensureFolderExists, findFileInFolders, listFiles, listFilesFromFolders, listFolders, saveFile } from "./files"; +import { checkIfExists, copyFile, copyFolderRecursive, deleteFile, ensureFolderExists, findFileInFolders, listFiles, listFolders, saveFile } from "./files"; import { PAGE_VERSION, getRequiredPages } from "./pages"; import { DefaultSettings } from "./settings"; -import { getOutdatedThemes, parseThemeFilename } from "./themes"; import { Customizer } from './customizer'; export interface SynthOSConfig { @@ -101,11 +100,9 @@ export async function init(config: SynthOSConfig, includeDefaultPages: boolean = await saveFile(path.join(scriptsFolder, 'example.sh'), `#!/bin/bash\n\n# This is an example script\n\n# You can run this script using the following command:\n# sh ${config.localFolder}/scripts/example.sh\n\n# This script will print "Hello, World!" to the console\n\necho "Hello, World!"\n`); - // Setup default themes - console.log(`Copying default themes to ${config.localFolder} folder...`); - const themesFolder = path.join(config.pagesFolder, 'themes'); - await ensureFolderExists(themesFolder); - await copyFilesFromFolders(config.defaultThemesFolders, themesFolder); + // Create empty themes folder — default themes are served directly from + // defaultThemesFolders; users can add custom themes here. + await ensureFolderExists(path.join(config.pagesFolder, 'themes')); // Copy pages if (includeDefaultPages) { @@ -134,40 +131,9 @@ async function repairMissingFolders(config: SynthOSConfig): Promise { await saveFile(path.join(scriptsFolder, 'example.sh'), `#!/bin/bash\n\n# This is an example script\n\n# You can run this script using the following command:\n# sh ${config.localFolder}/scripts/example.sh\n\n# This script will print "Hello, World!" to the console\n\necho "Hello, World!"\n`); } - // Rebuild themes folder from defaults if missing - const themesFolder = path.join(config.pagesFolder, 'themes'); - if (!await checkIfExists(themesFolder)) { - console.log(`Restoring default themes to ${config.localFolder} folder...`); - await ensureFolderExists(themesFolder); - await copyFilesFromFolders(config.defaultThemesFolders, themesFolder); - } else { - // Upgrade outdated themes — copy newer versioned CSS from defaults - const outdated = await getOutdatedThemes(config); - if (outdated.length > 0) { - console.log(`Upgrading ${outdated.length} theme(s): ${outdated.join(', ')}...`); - const defaultFiles = await listFilesFromFolders(config.defaultThemesFolders); - for (const themeName of outdated) { - // Remove old versioned CSS files for this theme - const localFiles = await listFiles(themesFolder); - for (const f of localFiles) { - const parsed = parseThemeFilename(f); - if (parsed && parsed.name === themeName) { - await deleteFile(path.join(themesFolder, f)); - } - } - // Copy the new versioned CSS from defaults — search all default folders - for (const f of defaultFiles) { - const parsed = parseThemeFilename(f); - if (parsed && parsed.name === themeName) { - const src = await findFileInFolders(config.defaultThemesFolders, f); - if (src) { - await copyFile(src, themesFolder); - } - } - } - } - } - } + // Ensure themes folder exists — default themes are served directly from + // defaultThemesFolders; this folder is for user-added custom themes only. + await ensureFolderExists(path.join(config.pagesFolder, 'themes')); // Ensure pages/ subfolder exists const pagesSubdir = path.join(config.pagesFolder, 'pages'); diff --git a/src/pages.ts b/src/pages.ts index 25a2a2f..71c8f22 100644 --- a/src/pages.ts +++ b/src/pages.ts @@ -1,9 +1,6 @@ import {checkIfExists, copyFolderRecursive, deleteFile, deleteFolder, ensureFolderExists, listFiles, listFolders, loadFile, saveFile} from './files'; import path from 'path'; -// Page State Cache -const _pages: { [name: string]: string } = {}; - /** * Derive the list of required page names by scanning *.html files * across one or more requiredPages folders. @@ -179,25 +176,27 @@ export async function listPages(pagesFolder: string, fallbackPagesFolders: strin return entries; } -export async function loadPageState(pagesFolder: string, name: string, reset: boolean): Promise { - if (!_pages[name] || reset) { - // Try folder-based path under pages/ first, then direct folder, then flat file (legacy) - const folderPath = path.join(pagesFolder, 'pages', name, 'page.html'); - const directFolderPath = path.join(pagesFolder, name, 'page.html'); - const flatPath = path.join(pagesFolder, `${name}.html`); - - if (await checkIfExists(folderPath)) { - _pages[name] = await loadFile(folderPath); - } else if (await checkIfExists(directFolderPath)) { - _pages[name] = await loadFile(directFolderPath); - } else if (await checkIfExists(flatPath)) { - _pages[name] = await loadFile(flatPath); - } else { - return undefined; - } +export async function loadPageState(pagesFolder: string, name: string): Promise { + // Check for working-state version files first + const latestVersion = await getLatestVersion(pagesFolder, name); + if (latestVersion > 0) { + const versionHtml = await loadPageVersion(pagesFolder, name, latestVersion); + if (versionHtml) return versionHtml; } - return _pages[name]; + // Fall back to saved baseline + const folderPath = path.join(pagesFolder, 'pages', name, 'page.html'); + const directFolderPath = path.join(pagesFolder, name, 'page.html'); + const flatPath = path.join(pagesFolder, `${name}.html`); + + if (await checkIfExists(folderPath)) { + return loadFile(folderPath); + } else if (await checkIfExists(directFolderPath)) { + return loadFile(directFolderPath); + } else if (await checkIfExists(flatPath)) { + return loadFile(flatPath); + } + return undefined; } export function normalizePageName(name: string|undefined): string|undefined { @@ -205,7 +204,6 @@ export function normalizePageName(name: string|undefined): string|undefined { } export async function savePageState(pagesFolder: string, name: string, content: string, title?: string, categories?: string[]): Promise { - _pages[name] = content; const pageFolder = path.join(pagesFolder, 'pages', name); await ensureFolderExists(pageFolder); await saveFile(path.join(pageFolder, 'page.html'), content); @@ -228,10 +226,6 @@ export async function savePageState(pagesFolder: string, name: string, content: } } -export function updatePageState(name: string, content: string): void { - _pages[name] = content; -} - export async function deletePage(pagesFolder: string, name: string): Promise { // Delete folder-based page: /pages// const folderPath = path.join(pagesFolder, 'pages', name); @@ -245,8 +239,60 @@ export async function deletePage(pagesFolder: string, name: string): Promise/pages//page.v.html + */ +export async function savePageVersion(pagesFolder: string, name: string, version: number, html: string): Promise { + const pageFolder = path.join(pagesFolder, 'pages', name); + await ensureFolderExists(pageFolder); + await saveFile(path.join(pageFolder, `page.v${version}.html`), html); +} + +/** + * Load a version snapshot (returns undefined if the file doesn't exist). + */ +export async function loadPageVersion(pagesFolder: string, name: string, version: number): Promise { + const filePath = path.join(pagesFolder, 'pages', name, `page.v${version}.html`); + if (!await checkIfExists(filePath)) return undefined; + return loadFile(filePath); +} + +/** + * Scan page.v*.html files and return the highest version number (0 if none). + */ +export async function getLatestVersion(pagesFolder: string, name: string): Promise { + const pageFolder = path.join(pagesFolder, 'pages', name); + if (!await checkIfExists(pageFolder)) return 0; + const files = await listFiles(pageFolder); + let max = 0; + for (const file of files) { + const match = file.match(/^page\.v(\d+)\.html$/); + if (match) { + const v = parseInt(match[1], 10); + if (v > max) max = v; + } + } + return max; +} + +/** + * Delete all page.v*.html version files for a page. + */ +export async function clearVersions(pagesFolder: string, name: string): Promise { + const pageFolder = path.join(pagesFolder, 'pages', name); + if (!await checkIfExists(pageFolder)) return; + const files = await listFiles(pageFolder); + for (const file of files) { + if (/^page\.v\d+\.html$/.test(file)) { + await deleteFile(path.join(pageFolder, file)); + } + } } export interface CopyPageOptions { @@ -287,7 +333,10 @@ export async function copyPage( html = await loadFile(path.join(sourceFolder, 'page.html')); } else { // Try legacy flat file - html = await loadPageState(pagesFolder, sourceName, true) || undefined; + const flatPath = path.join(pagesFolder, `${sourceName}.html`); + if (await checkIfExists(flatPath)) { + html = await loadFile(flatPath); + } } if (!html) { diff --git a/src/service/transformPage.ts b/src/service/transformPage.ts index fb3f809..9b5717a 100644 --- a/src/service/transformPage.ts +++ b/src/service/transformPage.ts @@ -84,21 +84,22 @@ export async function transformPage(args: TransformPageArgs): Promise or