slicejs-web-framework 3.2.2 → 3.3.0

package/.opencode/opencode.json

@@ -0,0 +1,14 @@
+{
+  "mcp": {
+    "thinking": {
+      "type": "local",
+      "command": ["npx", "-y", "@modelcontextprotocol/server-sequential-thinking"],
+      "enabled": true
+    },
+    "slicemcp": {
+      "type": "local",
+      "command": ["npx", "-y", "slicejs-mcp"],
+      "enabled": true
+    }
+}
+}

package/README.md

@@ -1,46 +1,10 @@
-<!-- Improved compatibility of back to top link: See: https://github.com/VKneider/slice.js/pull/73 -->
-<a name="readme-top"></a>
-<!--
-*** Thanks for checking out the slice.js. If you have a suggestion
-*** that would make this better, please fork the repo and create a pull request
-*** or simply open an issue with the tag "enhancement".
-*** Don't forget to give the project a star!
-*** Thanks again! Now go create something AMAZING! :D
--->
-
-
-
-<!-- PROJECT SHIELDS -->
-<!--
-*** I'm using markdown "reference style" links for readability.
-*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
-*** See the bottom of this document for the declaration of the reference variables
-*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
-*** https://www.markdownguide.org/basic-syntax/#reference-style-links
--->
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![MIT License][license-shield]][license-url]
-
-
-
-<!-- PROJECT LOGO -->
-<br />
 <div align="center">
-  <a href="https://github.com/VKneider/slice.js">
-    <img src="readme_images/Slice.js-logo.svg" alt="Logo" width="150" height="150">
-  </a>
-
-  <h3 align="center">Slice.js</h3>
-
-  <p align="center">
-    Component-Based Web Development Framework
-    <br />
+  <img src="readme_images/Slice.js-logo.svg" alt="Slice.js logo" width="150" />
+  <h1>Slice.js</h1>
+  <p>Component-Based Web Development Framework</p>
+  <p>
     <a href="https://slice-js-docs.vercel.app/Documentation"><strong>Explore the docs »</strong></a>
     <br />
-    <br />
     <a href="https://slice-js-docs.vercel.app/">View Demo</a>
     ·
     <a href="https://github.com/VKneider/slice.js/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
@@ -49,126 +13,85 @@
   </p>
 </div>
 
+## About this repository
 
+This repository contains the core of the Slice.js framework: the component runtime, routing system, bundle engine, and framework API. It is the package published as `slicejs-web-framework` on npm.
 
-<!-- TABLE OF CONTENTS -->
-<details>
-  <summary>Table of Contents</summary>
-  <ol>
-    <li>
-      <a href="#about-the-project">About The Project</a>
-    </li>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
-    </li>
-    <li><a href="#roadmap">Roadmap</a></li>
-    <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
-    <li><a href="#contact">Contact</a></li>
-  </ol>
-</details>
+## Prerequisites
 
+- Node.js >= 20
+- npm or pnpm
 
+## Local development
 
-<!-- ABOUT THE PROJECT -->
-## About The Project
-
-[![Product Name Screen Shot][product-screenshot]](https://slice-js-docs.vercel.app/)
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/VKneider/slice.js.git
+   cd slice.js
+   ```
 
-<!-- GETTING STARTED -->
-## Getting Started
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
 
-This is an example of how you may give instructions on setting up your project locally.
-To get a local copy up and running follow these simple example steps.
+3. **Initialize a test project** (optional, for CLI-based development)
+   ```bash
+   npx slicejs-cli init
+   ```
 
-### Installation
+4. **Test changes locally**
+   ```bash
+   npx slicejs-cli dev
+   ```
 
-_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
+## Available commands
 
-1. Install slicejs cli dependencies
-   ```sh
-   npm i slicejs-cli
-   ```
-2. Initialize slice project
-   ```sh
-   npm run slice:init
-   ```
-  3. Build production output
-     ```sh
-     npm run slice:build
-     ```
-  4. Start production server
-     ```sh
-     npm run slice:start
-     ```
+The framework does not expose commands directly. Use it through the CLI (`slicejs-cli`):
 
-Production uses `publicFolders` from `sliceConfig.json` to expose public asset folders like
-`/Themes`, `/Styles`, and `/assets`.
+| Command | Description |
+|---------|-------------|
+| `npx slicejs-cli init` | Initialize a Slice.js project |
+| `npx slicejs-cli dev` | Start development server |
+| `npx slicejs-cli build` | Build for production |
+| `npx slicejs-cli start` | Serve production build |
 
-Structural framework components are bundled into a dedicated framework bundle during `slice build`
-and served from `/dist/bundles/slice-bundle.framework.js`.
+## Documentation
 
-### Documentation Access
+Full documentation is available at [slice-js-docs.vercel.app](https://slice-js-docs.vercel.app/Documentation).
 
-Slice.js provides an MCP (Model Context Protocol) server for programmatic access to documentation:
+Slice.js also provides an MCP server for programmatic documentation access:
 
 ```bash
 npx slicejs-mcp
 ```
 
-This allows AI assistants and tools to query, search, and retrieve Slice.js documentation seamlessly.
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
-
-<!-- ROADMAP -->
-## Roadmap
-
-- [x] Add Changelog
-- [ ] Add Image visual component
-- [ ] Modify Slice Card Visual Component
-
-See the [open issues](https://github.com/VKneider/slice.js/issues) for a full list of proposed features (and known issues).
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+This allows AI assistants and tools to query, search, and retrieve Slice.js documentation.
 
+## Project structure
 
+```
+slice.js/
+├── api/           # Framework API server
+├── src/           # Runtime source code
+│   ├── App/       # Application engine
+│   ├── Components/# Component system
+│   └── ...        # Routing, bundles, utilities
+├── Slice/         # Visual component framework
+├── types/         # TypeScript declarations
+└── docs/          # Contribution guides
+```
 
-<!-- CONTRIBUTING -->
 ## Contributing
 
-We welcome contributions to the project! Please make sure to review the guidelines in the [CONTRIBUTING.md](docs/CONTRIBUTING.md) file before submitting any changes.
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
+We welcome contributions. Please review the guidelines in [CONTRIBUTING.md](docs/CONTRIBUTING.md) before submitting changes.
 
-
-<!-- LICENSE -->
 ## License
 
 Distributed under the MIT License. See `LICENSE` for more information.
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-<!-- MARKDOWN LINKS & IMAGES -->
-<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
-[contributors-shield]: https://img.shields.io/github/contributors/VKneider/slice.js.svg?style=for-the-badge
-[contributors-url]: https://github.com/VKneider/slice.js/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/VKneider/slice.js.svg?style=for-the-badge
-[forks-url]: https://github.com/VKneider/slice.js/network/members
-[stars-shield]: https://img.shields.io/github/stars/VKneider/slice.js.svg?style=for-the-badge
-[stars-url]: https://github.com/VKneider/slice.js/stargazers
-[issues-shield]: https://img.shields.io/github/issues/VKneider/slice.js.svg?style=for-the-badge
-[issues-url]: https://github.com/VKneider/slice.js/issues
-[license-shield]: https://img.shields.io/github/license/VKneider/slice.js.svg?style=for-the-badge
-[license-url]: https://github.com/VKneider/slice.js/blob/master/LICENSE.txt
-[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
-[linkedin-url]: https://linkedin.com/in/VKneider
-[product-screenshot]: readme_images/screenshot.JPG
+## Contact
+
+Slice.js - [@VKneider](https://github.com/VKneider)
+
+Project Link: [https://github.com/VKneider/slice.js](https://github.com/VKneider/slice.js)

package/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js

@@ -131,7 +131,7 @@ export default class ContextManagerDebugger extends HTMLElement {
               const preview = JSON.stringify(item.state, null, 2);
               return `
                <div class="context-row">
-                  <div class="context-header">
+                  <div class="context-row-head">
                      <div class="context-name">${item.name}</div>
                      <div class="context-keys">${item.keys} keys</div>
                   </div>
@@ -155,15 +155,19 @@ export default class ContextManagerDebugger extends HTMLElement {
       return `
       <div id="context-debugger">
          <div class="context-header">
-            <div class="title">Contexts</div>
+            <div class="brand">
+               <span class="status-dot"></span>
+               <span class="glyph">◈</span>
+               <span class="title">CONTEXT</span>
+            </div>
             <div class="actions">
-               <button id="context-refresh" class="btn">Refresh</button>
-               <button id="context-close" class="btn">Close</button>
+               <button id="context-refresh" class="btn" title="Refresh" aria-label="Refresh">⟳</button>
+               <button id="context-close" class="btn" title="Close" aria-label="Close">✕</button>
             </div>
          </div>
          <div class="context-toolbar">
-            <input id="context-filter" type="text" placeholder="Filter contexts" />
-            <div class="count">Total: <span id="context-count">0</span></div>
+            <input id="context-filter" type="text" placeholder="filter contexts…" autocomplete="off" spellcheck="false" />
+            <div class="count"><span id="context-count">0</span></div>
          </div>
          <div class="context-list" id="context-list"></div>
       </div>
@@ -172,124 +176,243 @@ export default class ContextManagerDebugger extends HTMLElement {
 
    renderStyles() {
       return `
-      #context-debugger {
-         position: fixed;
-         bottom: 20px;
-         left: 20px;
-         width: min(380px, calc(100vw - 40px));
-         max-height: 60vh;
-         background: var(--primary-background-color);
-         border: 1px solid var(--medium-color);
-         border-radius: 12px;
-         box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
-         display: none;
-         flex-direction: column;
-         z-index: 10001;
-         overflow: hidden;
-      }
+/* Slice Instruments — context store. All selectors scoped to the
+   <slice-contextmanager-debugger> tag so nothing clashes with app styles. */
+slice-contextmanager-debugger {
+   --si-accent: var(--primary-color, #6ee7ff);
+   --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+   --si-surface: rgba(17, 19, 28, 0.86);
+   --si-raised: rgba(255, 255, 255, 0.035);
+   --si-raised-2: rgba(255, 255, 255, 0.06);
+   --si-border: rgba(255, 255, 255, 0.09);
+   --si-text: #e8eaf2;
+   --si-dim: #888fa6;
+   --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+}
 
-      #context-debugger.active {
-         display: flex;
-      }
+slice-contextmanager-debugger #context-debugger {
+   position: fixed;
+   bottom: 20px;
+   left: 20px;
+   width: min(400px, calc(100vw - 40px));
+   max-height: 64vh;
+   background: var(--si-surface);
+   border: 1px solid var(--si-border);
+   border-radius: 14px;
+   box-shadow:
+      0 24px 60px -12px rgba(0, 0, 0, 0.55),
+      0 0 0 1px rgba(0, 0, 0, 0.2),
+      0 0 38px -18px rgba(var(--si-accent-rgb), 0.55);
+   -webkit-backdrop-filter: blur(22px) saturate(1.3);
+   backdrop-filter: blur(22px) saturate(1.3);
+   display: none;
+   flex-direction: column;
+   z-index: 10001;
+   overflow: hidden;
+   color: var(--si-text);
+   font-family: var(--si-mono);
+}
 
-      #context-debugger * {
-         box-sizing: border-box;
-      }
+slice-contextmanager-debugger #context-debugger.active {
+   display: flex;
+   animation: si-context-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
+}
 
-      .context-header {
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         padding: 12px 14px;
-         background: var(--tertiary-background-color);
-         border-bottom: 1px solid var(--medium-color);
-         user-select: none;
-      }
+@keyframes si-context-in {
+   from { opacity: 0; transform: translateY(10px) scale(0.985); }
+   to   { opacity: 1; transform: translateY(0) scale(1); }
+}
 
-      .context-header .title {
-         font-weight: 600;
-         color: var(--font-primary-color);
-      }
+slice-contextmanager-debugger #context-debugger * { box-sizing: border-box; }
 
-      .context-header .actions {
-         display: flex;
-         gap: 8px;
-      }
+slice-contextmanager-debugger #context-debugger::before {
+   content: '';
+   position: absolute;
+   left: 0; top: 0; bottom: 0;
+   width: 2px;
+   background: linear-gradient(180deg, var(--si-accent), transparent 70%);
+   opacity: 0.85;
+   pointer-events: none;
+}
 
-      .context-header .btn {
-         padding: 6px 10px;
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-         background: var(--primary-background-color);
-         color: var(--font-primary-color);
-         cursor: pointer;
-         font-size: 12px;
-      }
+slice-contextmanager-debugger #context-debugger > .context-header {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 12px 14px;
+   background:
+      radial-gradient(120% 140% at 0% 0%, rgba(var(--si-accent-rgb), 0.10), transparent 60%),
+      var(--si-raised);
+   border-bottom: 1px solid var(--si-border);
+   user-select: none;
+}
 
-      .context-toolbar {
-         display: flex;
-         gap: 10px;
-         align-items: center;
-         padding: 10px 12px;
-         border-bottom: 1px solid var(--medium-color);
-      }
+slice-contextmanager-debugger .brand { display: flex; align-items: center; gap: 9px; }
 
-      .context-toolbar input {
-         flex: 1;
-         min-width: 0;
-         padding: 6px 8px;
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-         background: var(--primary-background-color);
-         color: var(--font-primary-color);
-      }
+slice-contextmanager-debugger .status-dot {
+   width: 7px; height: 7px;
+   border-radius: 50%;
+   background: var(--si-accent);
+   animation: si-pulse-ctx 2.4s ease-out infinite;
+}
 
-      .context-list {
-         padding: 10px 12px;
-         overflow: auto;
-         display: flex;
-         flex-direction: column;
-         gap: 10px;
-      }
+@keyframes si-pulse-ctx {
+   0%   { box-shadow: 0 0 0 0 rgba(var(--si-accent-rgb), 0.55); }
+   70%  { box-shadow: 0 0 0 7px rgba(var(--si-accent-rgb), 0); }
+   100% { box-shadow: 0 0 0 0 rgba(var(--si-accent-rgb), 0); }
+}
 
-      .context-row {
-         border: 1px solid var(--medium-color);
-         border-radius: 8px;
-         background: var(--tertiary-background-color);
-         padding: 10px;
-         display: flex;
-         flex-direction: column;
-         gap: 6px;
-      }
+slice-contextmanager-debugger .glyph { color: var(--si-accent); font-size: 12px; opacity: 0.9; }
 
-      .context-name {
-         font-weight: 600;
-         color: var(--font-primary-color);
-      }
+slice-contextmanager-debugger .title {
+   font-weight: 600;
+   font-size: 11px;
+   letter-spacing: 0.18em;
+   color: var(--si-text);
+}
 
-      .context-keys {
-         font-size: 12px;
-         color: var(--font-secondary-color);
-      }
+slice-contextmanager-debugger .actions { display: flex; gap: 6px; }
+
+slice-contextmanager-debugger .btn {
+   width: 26px; height: 26px;
+   display: flex; align-items: center; justify-content: center;
+   border-radius: 7px;
+   border: 1px solid var(--si-border);
+   background: var(--si-raised);
+   color: var(--si-dim);
+   cursor: pointer;
+   font-size: 13px;
+   line-height: 1;
+   transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+slice-contextmanager-debugger .btn:hover {
+   color: var(--si-text);
+   background: var(--si-raised-2);
+   border-color: rgba(var(--si-accent-rgb), 0.5);
+}
+slice-contextmanager-debugger .btn:active { transform: scale(0.92); }
+slice-contextmanager-debugger #context-refresh:hover { color: var(--si-accent); }
+
+slice-contextmanager-debugger .context-toolbar {
+   display: flex;
+   gap: 10px;
+   align-items: center;
+   padding: 10px 12px;
+   border-bottom: 1px solid var(--si-border);
+}
 
-      .context-preview {
-         background: var(--primary-background-color);
-         border-radius: 6px;
-         padding: 8px;
-         border: 1px solid var(--medium-color);
-         max-height: 180px;
-         overflow: auto;
-         font-size: 11px;
-         font-family: monospace;
-         color: var(--font-primary-color);
-      }
+slice-contextmanager-debugger .context-toolbar input {
+   flex: 1;
+   min-width: 0;
+   padding: 7px 10px 7px 30px;
+   border-radius: 8px;
+   border: 1px solid var(--si-border);
+   background:
+      var(--si-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888fa6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center;
+   color: var(--si-text);
+   font-family: var(--si-mono);
+   font-size: 12px;
+   transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+slice-contextmanager-debugger .context-toolbar input::placeholder { color: var(--si-dim); }
+slice-contextmanager-debugger .context-toolbar input:focus {
+   outline: none;
+   border-color: rgba(var(--si-accent-rgb), 0.6);
+   box-shadow: 0 0 0 3px rgba(var(--si-accent-rgb), 0.12);
+}
 
-      .empty {
-         color: var(--font-secondary-color);
-         font-size: 12px;
-         text-align: center;
-         padding: 12px 0;
-      }
+slice-contextmanager-debugger .context-toolbar .count { font-size: 11px; color: var(--si-dim); min-width: 22px; text-align: center; }
+slice-contextmanager-debugger .context-toolbar .count span { color: var(--si-accent); font-weight: 600; }
+
+slice-contextmanager-debugger .context-list {
+   padding: 10px 12px 12px;
+   overflow: auto;
+   display: flex;
+   flex-direction: column;
+   gap: 9px;
+}
+slice-contextmanager-debugger .context-list::-webkit-scrollbar { width: 8px; }
+slice-contextmanager-debugger .context-list::-webkit-scrollbar-thumb {
+   background: var(--si-raised-2);
+   border-radius: 8px;
+   border: 2px solid transparent;
+   background-clip: padding-box;
+}
+slice-contextmanager-debugger .context-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--si-accent-rgb), 0.4); background-clip: padding-box; }
+
+slice-contextmanager-debugger .context-row {
+   border: 1px solid var(--si-border);
+   border-left: 2px solid transparent;
+   border-radius: 10px;
+   background: var(--si-raised);
+   padding: 10px 11px;
+   display: flex;
+   flex-direction: column;
+   gap: 8px;
+   transition: border-color 0.18s ease, background 0.18s ease;
+}
+slice-contextmanager-debugger .context-row:hover { background: var(--si-raised-2); border-left-color: var(--si-accent); }
+
+slice-contextmanager-debugger .context-row-head {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   gap: 10px;
+}
+
+slice-contextmanager-debugger .context-name {
+   font-weight: 600;
+   font-size: 12.5px;
+   color: var(--si-text);
+   font-family: var(--si-mono);
+}
+
+slice-contextmanager-debugger .context-keys {
+   font-size: 10px;
+   letter-spacing: 0.04em;
+   text-transform: uppercase;
+   color: var(--si-accent);
+   background: rgba(var(--si-accent-rgb), 0.12);
+   border: 1px solid rgba(var(--si-accent-rgb), 0.25);
+   padding: 1px 8px;
+   border-radius: 999px;
+   white-space: nowrap;
+}
+
+slice-contextmanager-debugger .context-preview {
+   background: rgba(0, 0, 0, 0.3);
+   border-radius: 8px;
+   padding: 10px;
+   border: 1px solid var(--si-border);
+   max-height: 200px;
+   overflow: auto;
+   font-size: 11px;
+   line-height: 1.55;
+   font-family: var(--si-mono);
+   color: #c5cad8;
+   white-space: pre;
+   margin: 0;
+}
+slice-contextmanager-debugger .context-preview::-webkit-scrollbar { width: 8px; height: 8px; }
+slice-contextmanager-debugger .context-preview::-webkit-scrollbar-thumb {
+   background: var(--si-raised-2);
+   border-radius: 8px;
+   border: 2px solid transparent;
+   background-clip: padding-box;
+}
+
+slice-contextmanager-debugger .empty {
+   color: var(--si-dim);
+   font-size: 11px;
+   letter-spacing: 0.04em;
+   text-align: center;
+   padding: 22px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+   slice-contextmanager-debugger #context-debugger.active { animation: none; }
+   slice-contextmanager-debugger .status-dot { animation: none; }
+}
       `;
    }
 }

package/Slice/Components/Structural/Controller/Controller.js

@@ -1,4 +1,5 @@
 import components from '/Components/components.js';
+import { collectInvalidAllowedValueProps, formatAllowedValuesForLog } from './allowedValuesValidation.js';
 
 export default class Controller {
    constructor() {
@@ -904,6 +905,14 @@ export default class Controller {
       if (missingRequired.length > 0) {
          slice.logger.logError(componentName, `Missing required props: [${missingRequired.join(', ')}]`);
       }
+
+      const invalidAllowedValueProps = collectInvalidAllowedValueProps(staticProps, providedProps);
+      invalidAllowedValueProps.forEach(({ propName, value, allowedValues }) => {
+         slice.logger.logError(
+            componentName,
+            `Invalid value for prop "${propName}": ${JSON.stringify(value)}. Allowed values: ${formatAllowedValuesForLog(allowedValues)}`
+         );
+      });
    }
 
    extractUsedProps(component, staticProps = null) {