@silexlabs/silex 3.7.0 → 3.9.0-canary.3

package/README.md

@@ -1,123 +1,160 @@
-## Silex core library
+[![Stars](https://img.shields.io/github/stars/silexlabs/Silex?colorA=2c2837&colorB=c9cbff&style=for-the-badge&logo=starship)](https://github.com/silexlabs/Silex/stargazers)
+[![Issues](https://img.shields.io/github/issues-raw/silexlabs/Silex?colorA=2c2837&colorB=f2cdcd&style=for-the-badge&logo=starship)](https://github.com/silexlabs/Silex/issues)
+[![License](https://img.shields.io/github/license/silexlabs/Silex?colorA=2c2837&colorB=b5e8e0&style=for-the-badge&logo=starship)](https://github.com/silexlabs/Silex/blob/main/LICENSE)
+[![Good first issues](https://img.shields.io/github/issues/silexlabs/Silex/good%20first%20issue?colorA=2c2837&colorB=a6e3a1&style=for-the-badge&logo=starship&label=good%20first%20issues)](https://github.com/silexlabs/Silex/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
 
-Core library of Silex — Node.js server, visual editor, npx CLI and Docker image. Powers the online editor, the desktop app and all Silex integrations.
+# Silex — the visual builder for static sites
 
-Useful links
+The web belongs to everyone. Silex is a free/libre visual website builder — no lock-in, no subscription, no tracking. Design visually, export clean HTML/CSS, host anywhere.
 
-* [Documentation for developers](https://docs.silex.me/en/dev/run)
-* [npm package for this repo](https://www.npmjs.com/package/@silexlabs/silex)
-* [Docker image for this repo](https://hub.docker.com/r/silexlabs/silex)
-* [Official website](https://www.silex.me/)
-* [Road map (please help defining tasks and prioritising)](https://roadmap.silex.me)
-* [Bug report in Github issues](https://github.com/silexlabs/Silex/issues)
-* [Forums in Github discussions](https://community.silex.me)
-* [Silex meta package with more source code](https://github.com/silexlabs/Silex)
+**[Try Silex online](https://v3.silex.me/)** | **[Documentation](https://docs.silex.me)** | **[Desktop app — coming soon](https://roadmap.silex.me/posts/3/silex-desktop)** | **[Manifesto](https://www.silex.me/manifesto/)**
 
-Help make Silex sustainable by being [part of the community](https://community.silex.me/), [contributing documentation](https://docs.silex.me/), [making a financial contribution](https://opencollective.com/silex), [report bugs](https://github.com/silexlabs/Silex/issues).
+![Silex UI](https://www.silex.me/img/HJKUdOfC5N-2400.webp)
 
-## Getting Started
+## Why Silex?
 
-### Online Version
+Most no-code tools lock you in: proprietary formats, forced hosting, subscriptions. Silex is different.
 
-The easiest way to start using Silex is by using the online version provided by [Silex Labs foundation](https://www.silexlabs.org). Simply visit [v3.silex.me](https://v3.silex.me) and start building your website right away.
+- **Your data is yours** — standard HTML/CSS output, export everything, host anywhere, leave anytime
+- **Real web skills** — everything you learn in Silex (HTML, CSS, JAMstack) is transferable knowledge
+- **Community-owned** — maintained by [Silex Labs](https://www.silexlabs.org/), a non-profit recognized as being of general interest. No investors, no exit strategy, [transparent finances](https://opencollective.com/silex)
+- **Free forever** — always free software (AGPL), all features included, no premium tier
 
-### Desktop App (beta)
+> _"The only open source alternative to Webflow."_ — _"The most powerful and graphically precise website builder that I have experienced."_
 
-There is a desktop application that you can install on your computer which may be faster since it uses your local files and it works offline. You can download the desktop app from the [Silex desktop  repository](https://github.com/silexlabs/silex-desktop/releases/latest).
+## Who is Silex for?
 
-### Local or Server Installation
+- **Web agencies** — visual workflow, static output, scale client work without scaling your team
+- **WordPress developers** — visual frontend, content from WP via GraphQL, ditch the theme layer
+- **Freelance webdesigners** — create client sites without code, export standard HTML, host anywhere
+- **No-code developers** — go beyond Wix/Squarespace with full CSS control and no vendor lock-in
 
-You can also run Silex locally or on your server using `npx`, `npm`, or `Docker`.
+## Features
 
-Check the [developer docs](https://docs.silex.me/en/dev) for configuration options and integration with your js projects.
+- **[GrapesJS](https://github.com/GrapesJS/grapesjs)-based visual editor** — drag-and-drop page building with HTML, CSS, and JS editors
+- **Static HTML output** — fast, secure, easy to host anywhere
+- **CMS integration** — bind components to WordPress, Strapi, Squidex, or any GraphQL API
+- **[11ty](https://www.11ty.dev/) compatible** — generate static sites from Silex templates, deploy with CI/CD
+- **Desktop app (coming soon)** — work offline, no account needed, AI-ready with built-in [MCP server](#ai--vibe-coding). Built with [Tauri](https://tauri.app/) for Windows, macOS, Linux. [Follow progress](https://roadmap.silex.me/posts/3/silex-desktop).
+- **Plugin system** — extend with server and client plugins in JS/TS
+- **SEO tools** — meta tags, Open Graph, per-page settings
+- **Self-hosting** — Docker, Node.js, or one-click deploy on [CapRover](https://caprover.com/)
 
-#### Using npx
+## Quick start
 
-```bash
-npx @silexlabs/silex
-```
+**Use it online** — **[v3.silex.me](https://v3.silex.me/)** (free, requires a GitLab account for storage)
 
-This command will run Silex with default config.
+**Desktop app (alpha)** — [download for Windows, macOS or Linux](https://github.com/silexlabs/Silex/releases/latest). Work offline, no account needed.
 
-#### Using Docker
+## Contribute
 
-```bash
-docker run -p 6805:6805 silexlabs/silex
+```sh
+git clone --recurse-submodules https://github.com/silexlabs/Silex.git
+cd Silex
+pnpm install && pnpm build && pnpm start
 ```
 
-This command will run Silex in a Docker container.
+Then open [http://localhost:6805](http://localhost:6805). For Docker and production setups, see the [self-hosting guide](https://docs.silex.me).
 
-#### Using npm
+Useful links to get you contributing fast:
 
-First, install Silex as a dev dependency in your project:
+- **[Good first issues](https://github.com/silexlabs/Silex/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)** — start here
+- **[Contributing guide](./CONTRIBUTING.md)** — coding standards, PR process, discuss-first rule
+- **[Community forums](https://community.silex.me)** — ask questions, share ideas
+- **[Chat](https://short.silex.me/chat)** — quick help
+- **[Bug reports](https://github.com/silexlabs/Silex/issues)**
+- **[AI-assisted coding](AGENTS.md)** — setup guide for Claude Code, Cursor, opencode, etc.
 
-```bash
-yarn add -D @silexlabs/silex
-```
+## AI / Vibe coding
 
-Then, you can run Silex with the `silex` command in your `package.json` scripts:
+> Design websites with AI — open, local, yours. [Learn more](https://www.silex.me/ai/)
 
-```json
-{
-  "scripts": {
-    "start": "silex"
-  }
-}
-```
+The upcoming Silex Desktop app will let you create and transform sites through prompts: describe what you want, see it built live, refine the design in real time, publish clean HTML/CSS anywhere.
 
-## Configuration
+Silex uses [MCP](https://modelcontextprotocol.io/) (Model Context Protocol), an open standard — so you choose your AI. Run a local model with [Ollama](https://ollama.com/) for full privacy, or use any MCP-compatible tool: [OpenCode](https://opencode.ai/), [Goose](https://goose-docs.ai/), Claude Code, etc. The MCP server is optimized for small local models (7B+).
 
-You can configure Silex using environment variables and command-line options. All available options can be found in the [developer docs](https://docs.silex.me/en/dev) as well as in the code: [`src/ts/server/cli.ts`](./src/ts/server/cli.ts).
+See the [vibe coding roadmap](https://roadmap.silex.me/posts/65/vibe-coding-with-silex-desktop) for what's coming (prompt library, examples cookbook, best practices guide — contributions welcome).
 
-Check the example config files - which are the same as plugins in Silex, in the [`examples/`](./examples/) folder. To test these configs, start Silex locally like this:
+### MCP setup (for developers)
 
-```sh
-$ npx silex --client-config=./examples/client-config-transformers.js --server-config=`pwd`/examples/server-config-plugins.js
+Once Silex Desktop is running, connect your AI tool to:
+
+```
+http://localhost:6807/mcp
 ```
 
-Or like this:
+**[OpenCode](https://opencode.ai/)** — add an MCP server in your [config file](https://opencode.ai/docs/mcp-servers) with URL `http://localhost:6807/mcp`.
 
-```sh
-$ SILEX_CLIENT_CONFIG=./examples/client-config-transformers.js SILEX_SERVER_CONFIG=`pwd`/examples/server-config-plugins.js yarn run start:debug
-```
+**[Goose](https://goose-docs.ai/)** — add a remote server in your [profile config](https://goose-docs.ai/docs/getting-started/using-extensions#remote-extensions-over-streamable-http) with endpoint `http://localhost:6807/mcp`.
+
+**Claude Code** — `claude mcp add --transport http silex http://localhost:6807/mcp`
+
+**Any other MCP client** — use a Streamable HTTP transport pointed at the same URL.
+
+## Contributors
+
+Silex is the work of contributors from all over the world. This project is maintained by [Alex Hoyau](https://lexoyo.me) and owned by the non-profit [Silex Labs](https://www.silexlabs.org/)
+
+<!-- Auto generated contributors -->
+
+**2026** — [Alex Hoyau](https://github.com/lexoyo), [Ola Mohamed](https://github.com/ola-a11y), [Syed Ishmum Ahnaf](https://github.com/SyedIshmumAhnaf), [Safal2004](https://github.com/Safal2004), [Wassim Triki](https://github.com/wassim-triki)
+
+**2025** — [Alex Hoyau](https://github.com/lexoyo), [ceubri](https://github.com/ceubri), [Mazen Kamal](https://github.com/Mazen050), Piotr Golebiewski, [oliviermgx](https://github.com/oliviermgx)
+
+**2024** — [Alex Hoyau](https://github.com/lexoyo), [oliviermgx](https://github.com/oliviermgx), [JeremyZXi](https://github.com/JeremyZXi), [SuperDelphi](https://github.com/SuperDelphi)
+
+**2023** — [Alex Hoyau](https://github.com/lexoyo), [Eskeminha](https://github.com/Eskeminha), [Ari Karageorgos](https://github.com/arisk)
+
+**2022** — [Alex Hoyau](https://github.com/lexoyo), [Khaled Bentoumi](https://github.com/BentoumiTech)
+
+**2021** — [Alex Hoyau](https://github.com/lexoyo)
+
+**2020** — [Alex Hoyau](https://github.com/lexoyo)
+
+**2019** — [Alex Hoyau](https://github.com/lexoyo)
+
+**2018** — [Alex Hoyau](https://github.com/lexoyo), [Jean-Baptiste Richardet](https://github.com/JbIPS), [jotakar](https://github.com/jotakar), [swakarm](https://github.com/swakarm)
+
+**2017** — [Alex Hoyau](https://github.com/lexoyo), [Jean-Baptiste Richardet](https://github.com/JbIPS), [Jenn Parker](https://github.com/jennparker), [Rapenne Solène](https://github.com/rapenne-s), [tariqbenezza](https://github.com/tariqbenezza), [singchan](https://github.com/singchan)
+
+**2016** — [Alex Hoyau](https://github.com/lexoyo), [singchan](https://github.com/singchan), [Pierre Ozoux](https://github.com/pierreozoux)
+
+**2015** — [Alex Hoyau](https://github.com/lexoyo), [singchan](https://github.com/singchan), [Christophe](https://github.com/ondrejec), [Pierre Ozoux](https://github.com/pierreozoux), [René Föhring](https://github.com/rrrene), [christian-bromann](https://github.com/christian-bromann)
+
+**2014** — [Alex Hoyau](https://github.com/lexoyo), [Camille Gérard-Hirne](https://github.com/camcrock), [neocorp64](https://github.com/NeoCorp), Michele Martone, [peoslaap](https://github.com/peoslaap)
 
-## Development
+**2013** — [Alex Hoyau](https://github.com/lexoyo), Yann Le Scouarnec, TheCause, yanhick, Thomas Fetiveau
 
-To contribute to this project:
 
-1. **Clone the Repository**:
-   ```bash
-   git clone https://github.com/silexlabs/silex-lib.git
-   cd silex-lib
-   ```
 
-2. **Install Dependencies**:
-   ```bash
-   yarn install
-   ```
+<!-- Auto generated contributors -->
 
-3. **Build the Project**:
-   ```bash
-   yarn run build
-   ```
+## Links
 
-4. **Start Development Server**:
-   ```bash
-   yarn run start:debug
-   ```
+- [Official website](https://www.silex.me/)
+- [Manifesto](https://www.silex.me/manifesto/) — our values and commitments
+- [User documentation](https://docs.silex.me/)
+- [Developer documentation](https://docs.silex.me/en/dev)
+- [Road map](https://roadmap.silex.me) — help define tasks and priorities
+- [Community forums](https://community.silex.me)
+- [Newsletter (EN)](https://short.silex.me/news_en) | [(FR)](https://short.silex.me/news_fr)
+- [OpenCollective](https://opencollective.com/silex) — financial contributions
 
-## Contributing
+## Built on
 
-Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) for details on how to contribute to Silex.
+Silex stands on the shoulders of these open-source projects and their communities:
 
-## License
+- [GrapesJS](https://github.com/GrapesJS/grapesjs) — front-end drag-and-drop framework
+- [11ty (Eleventy)](https://www.11ty.dev/) — static site generator used for CMS integration
+- [Tauri](https://tauri.app/) — desktop app framework (Rust + WebView)
+- [TypeScript](https://www.typescriptlang.org/) — language used across packages
 
-Silex is free and open-source software licensed under the [GPL-3.0](LICENSE.md).
+## Funding
 
-## Dependencies
+An [OW2 project](https://projects.ow2.org/view/silex/), funded by the [NGI0 Commons Fund](https://www.silex.me/nlnet), supported by its [sponsors and volunteers](https://opencollective.com/silex).
 
-The upstream projects we use in Silex are all listed in [Silex meta package](https://github.com/silexlabs/Silex)
+## Credits
 
-## Github stars history
+Brought to you since 2009 by [Alex Hoyau](https://lexoyo.me) and the Silex community.
 
-[![Star History Chart](https://api.star-history.com/svg?repos=silexlabs/Silex&type=Timeline)](https://star-history.com/#silexlabs/Silex&Timeline)
+Silex is free/libre software. [Join the community](https://community.silex.me/), [contribute](./CONTRIBUTING.md), [donate](https://opencollective.com/silex), or [report bugs](https://github.com/silexlabs/Silex/issues).

package/common/examples/plugin.js

@@ -0,0 +1,6 @@
+// This example is used in unit tests
+module.exports = function(config) {
+  return {
+    test: 'example',
+  }
+}

package/common/silex-plugins/config.test.ts

@@ -0,0 +1,71 @@
+import {describe, expect, test, beforeEach, jest,} from '@jest/globals'
+
+// ESM module mocking: unstable_mockModule must run before the module under test
+// is imported, hence the dynamic import of ./config below.
+const PLUGIN_RESULT = { test: 'any value?', }
+const loadPlugins = jest.fn<(...args: unknown[]) => Promise<unknown>>().mockResolvedValue(PLUGIN_RESULT)
+jest.unstable_mockModule('./plugin', () => ({
+  loadPlugins,
+}))
+const { default: config } = await import('./config')
+
+describe('Config test', () => {
+  let instance
+  let empty
+  beforeEach(() => {
+    loadPlugins.mockClear()
+    expect(config).not.toBeUndefined()
+    instance = config('..')
+    empty = config('..')
+    expect(instance).not.toBeUndefined()
+  })
+  test('Test add a single plugin', async () => {
+    const plugin = {
+      require: 'examples/plugin.js',
+      type: ['test',],
+      active: true,
+      hidden: false,
+      options: {},
+    }
+    const result = await instance.addPlugin(plugin)
+    // Check that the config includes the plugin result
+    expect(result).toBe(instance)
+    expect(instance).toEqual({
+      ...empty,
+      ...PLUGIN_RESULT,
+    })
+    // Check the loadPlugins calls
+    expect(loadPlugins.mock.calls).toHaveLength(1)
+    expect(loadPlugins.mock.calls[0][0]).toBe(instance)
+    expect(loadPlugins.mock.calls[0][1]).toBeInstanceOf(Array)
+    expect(loadPlugins.mock.calls[0][1][0]).toBe(plugin)
+  })
+  test('Test add multiple plugins', async () => {
+    const plugin1 = {
+      require: 'examples/plugin.js',
+      type: ['test',],
+      active: true,
+      hidden: false,
+      options: {},
+    }
+    const plugin2 = { ...plugin1, }
+    await instance.addPlugin([plugin1, plugin2,])
+    // Check the loadPlugins calls
+    expect(loadPlugins.mock.calls).toHaveLength(1)
+    expect(loadPlugins.mock.calls[0][0]).toBe(instance)
+    expect(loadPlugins.mock.calls[0][1]).toBeInstanceOf(Array)
+    expect(loadPlugins.mock.calls[0][1][0]).toBe(plugin1)
+    expect(loadPlugins.mock.calls[0][1][1]).toBe(plugin2)
+  })
+  test('Test events', async () => {
+    const cbk = jest.fn()
+    const params = 'test params'
+    const eventName = 'test:event'
+    instance.on(eventName, cbk)
+    instance.on(eventName, cbk)
+    instance.emit(eventName, params)
+    instance.emit(eventName, params)
+    expect(cbk).toHaveBeenCalledTimes(4)
+    expect(cbk).toHaveBeenLastCalledWith(params)
+  })
+})

package/common/silex-plugins/config.ts

@@ -0,0 +1,25 @@
+import { Plugin, loadPlugins, } from './plugin.js'
+import EventEmitter from 'component-emitter'
+
+export default function( baseUrl: string = null) {
+  return new Config(baseUrl)
+}
+
+export class Config extends EventEmitter {
+  constructor(public baseUrl: string = null) {
+    super()
+  }
+
+  /**
+   * Add one or multiple plugins
+   * @param plugin One or more plugin definition object
+   * @param options An object containing the plugin options or each plugin options in `options[pluginName]`
+   * @returns A Config object which merges the objects returned by the plugin(s)
+   */
+  public async addPlugin(plugin: Plugin | Plugin[], options: object) {
+    // Load plugin if necessary
+    const result = await loadPlugins(this, [].concat(plugin), options, this.baseUrl)
+    Object.assign(this, result)
+    return this
+  }
+}

package/common/silex-plugins/index.ts

@@ -0,0 +1,2 @@
+export * from './config.js'
+export * from './plugin.js'

package/common/silex-plugins/plugin.test.ts

@@ -0,0 +1,57 @@
+import {describe, expect, test, jest, } from '@jest/globals'
+import { loadPlugins, Plugin, } from './plugin'
+import { Config, } from '.'
+
+const TEST_VALUE = {test: 'example',}
+const FAKE_CONFIG = {} as Config
+
+describe('Plugins test', () => {
+  test('Test loading 0 plugins', async () => {
+    const result = await loadPlugins(FAKE_CONFIG, [], {})
+    expect(result).toEqual({})
+  })
+  test('Load 1 plugin with just its options', async () => {
+    const plugin = jest.fn().mockResolvedValue(TEST_VALUE)
+    const option = {test: 'option directly in the option object',}
+    const result = await loadPlugins(FAKE_CONFIG, [plugin,], option)
+    expect(result).toEqual(TEST_VALUE)
+    expect(plugin.mock.calls).toHaveLength(1)
+    expect(plugin.mock.calls[0][0]).toBe(FAKE_CONFIG)
+    expect(plugin.mock.calls[0][1]).toBe(option)
+  })
+  test('Test loadPlugins', async () => {
+    const plugin = '../examples/plugin.js' as Plugin
+    const options = {}
+    const result = await loadPlugins(FAKE_CONFIG, [plugin,], options)
+    expect(result).toEqual(TEST_VALUE)
+  })
+  test('Add a function plugin', async () => {
+    const option = {}
+    const plugin = jest.fn().mockResolvedValue(TEST_VALUE)
+    const result = await loadPlugins(FAKE_CONFIG, [plugin,], {[plugin.toString()]: option,})
+    // Check that the config includes the plugin result
+    expect(result).toEqual(TEST_VALUE)
+
+    // Check the plugin calls
+    // loadPlugins is called because of the mock
+    expect(plugin.mock.calls).toHaveLength(1)
+    expect(plugin.mock.calls[0][0]).toBe(FAKE_CONFIG)
+    expect(plugin.mock.calls[0][1]).toBe(option)
+  })
+  test('Assync function support', async () => {
+    const option = {}
+    async function wait(ms = 100) {
+      return new Promise(resolve => setTimeout(resolve, ms))
+    }
+    let done = false
+    async function plugin() {
+      await wait(100)
+      done = true
+      return TEST_VALUE
+    }
+    loadPlugins(FAKE_CONFIG, [plugin,], {[plugin.toString()]: option,})
+    expect(done).toBe(false)
+    await wait(200)
+    expect(done).toBe(true)
+  })
+})

package/common/silex-plugins/plugin.ts

@@ -0,0 +1,65 @@
+import { Config, } from './config.js'
+
+/**
+ * Plugin type
+ */
+export type Plugin = ((config: Config, options?: object) => object) | Promise<(config: Config, options?: object) => object> | string
+
+/**
+ *
+ * @param config The initial config object
+ * @param plugins The plugins to load
+ * @returns Merged results objects
+ */
+export async function loadPlugins(config: Config, plugins: Plugin[], options: object, baseUrl: string = null): Promise<Config> {
+  return Promise.all<Config>(plugins
+    // Load plugins
+    .map(async (plugin: Plugin) => {
+      const [construct, name,] = await ( async () => {
+        switch(typeof plugin) {
+        case 'function': return [plugin as (config: Config) => Config, plugin.toString(),]
+        case 'string': return [await loadPlugin<(config: Config, options: object) => Promise<Config>>(plugin, baseUrl), plugin as string,]
+        default: throw new Error(`Unknown type for plugin: ${typeof plugin}`)
+        }
+      })()
+      return construct(config, name && options ? options[name] ?? options : options) as Promise<Config>
+    }))
+    // Merge the results
+    .then((results: Config[]): Config => {
+      return results.reduce((finalConfig: Config, result: Config): Config => {
+        return {
+          ...finalConfig,
+          ...result,
+        } as Config
+      }, config)
+    })
+}
+
+/**
+ * Load a plugin
+ * @param location The path, absolute, relative or online
+ * @returns The result of the plugin default function
+ */
+async function loadPlugin<T>(location: string, baseUrl: string): Promise<T> {
+  const path = getLocation(location, baseUrl)
+  const imported: {default?: () => void} = await dynamicImport(path)
+  const result = imported?.default ?? imported
+  return result as T
+}
+
+function getLocation(urlOrPath: string, baseUrl: string = null): string {
+  try {
+    return new URL(urlOrPath, baseUrl).toString()
+  } catch {
+    return urlOrPath
+  }
+}
+
+/**
+ * This is isolated here for unit tests to mock it
+ * @param path The absolute path to laod
+ * @returns The loaded module
+ */
+async function dynamicImport<T>(path: string): Promise<T> {
+  return import(/* webpackIgnore: true */path)
+}

package/dist/client/css/admin.css

@@ -4006,8 +4006,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /**
- * THEME-MODERN.SCSS
- * Modern Dark Theme 2025 for Silex
+ * DESIGN-SYSTEM.SCSS
+ * The Silex editor design system (there is no theme-switching — this is THE
+ * look): --silex-* semantic tokens + the styling of the editor's UI components.
  *
  * Design Philosophy:
  * - Minimalisme structuré
@@ -4256,14 +4257,14 @@ textarea:focus {
 }
 
 .gjs-sm-property.gjs-sm-composite {
-  background-color: rgba(136, 115, 254, 0.04);
-  border: 1px solid rgba(136, 115, 254, 0.08);
+  background-color: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--silex-border-color);
   border-radius: 6px;
   padding: 8px;
   margin-top: 4px;
 }
 .gjs-sm-property.gjs-sm-composite > .gjs-sm-label {
-  color: var(--silex-accent-primary);
+  color: var(--silex-text-secondary);
   text-transform: uppercase;
   font-size: 9px;
   font-weight: 700;
@@ -4274,28 +4275,28 @@ textarea:focus {
   background-color: transparent;
 }
 .gjs-sm-property.gjs-sm-composite .gjs-field {
-  border-color: rgba(136, 115, 254, 0.12);
+  border-color: var(--silex-border-color);
 }
 
 .gjs-field-range input[type=range] {
-  accent-color: var(--silex-accent-primary);
+  accent-color: var(--silex-text-secondary);
 }
 .gjs-field-range input[type=range]::-webkit-slider-thumb {
-  background-color: var(--silex-accent-primary);
+  background-color: var(--silex-text-primary);
 }
 .gjs-field-range input[type=range]::-webkit-slider-runnable-track {
-  background-color: var(--silex-accent-primary);
+  background-color: var(--silex-text-secondary);
   opacity: 0.4;
 }
 .gjs-field-range input[type=range]::-moz-range-thumb {
-  background-color: var(--silex-accent-primary);
+  background-color: var(--silex-text-primary);
 }
 .gjs-field-range input[type=range]::-moz-range-track {
-  background-color: var(--silex-accent-primary);
+  background-color: var(--silex-text-secondary);
   opacity: 0.4;
 }
 .gjs-field-range input[type=range]::-moz-range-progress {
-  background-color: var(--silex-accent-primary);
+  background-color: var(--silex-text-secondary);
 }
 
 .gjs-sm-sector .gjs-sm-label {
@@ -4303,6 +4304,11 @@ textarea:focus {
   color: var(--silex-text-secondary);
 }
 
+.gjs-sm-sector .gjs-sm-label.gjs-four-color,
+.gjs-sm-property.gjs-sm-composite > .gjs-sm-label.gjs-four-color {
+  color: var(--gjs-quaternary-color);
+}
+
 .gjs-sm-property {
   margin-bottom: 2px;
 }
@@ -4363,6 +4369,10 @@ textarea:focus {
   padding: 3px 10px;
 }
 
+.gjs-traits-label:empty {
+  display: none;
+}
+
 .gjs-trait-category .gjs-title {
   background-color: var(--silex-active-bg);
   border-bottom: 1px solid var(--silex-border-color-strong);
@@ -5234,6 +5244,9 @@ details.silex-more label,
   background-color: var(--silex-accent-secondary);
   color: var(--silex-text-inverse);
 }
+.gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn.block-manager-btn {
+  font-size: 22px;
+}
 .gjs-pn-project-bar-panel .logo {
   background-image: url("../assets/logo-silex-small.png");
   background-repeat: no-repeat;