@onetype/framework 2.0.41 → 2.0.43

package/lib/src/mixins/state.js

@@ -1,15 +1,27 @@
 const OneTypeState =
 {
-    StateGet(key)
+    StateGet(key, value)
     {
         const state = this.environment === 'front' ? window.__STATE__ : global.__STATE__;
 
         if(!state)
         {
-            return key ? undefined : {};
+            return key ? value : {};
         }
 
-        return key ? state[key] : state;
+        const result = key ? state[key] : state;
+
+        if(result === undefined || result === null)
+        {
+            return value;
+        }
+
+        if(value !== undefined && typeof result !== typeof value)
+        {
+            return value;
+        }
+
+        return result;
     },
 
     StateSet(key, value)
@@ -32,6 +44,8 @@ const OneTypeState =
 
             global.__STATE__[key] = value;
         }
+
+        this.Emit('@state.change', key, value);
     }
 };
 

package/lib/src/onetype.js

@@ -6,7 +6,6 @@ import OneTypeBinaries from './mixins/binaries.js';
 import OneTypeString from './mixins/string.js';
 import OneTypeEmitter from './mixins/emitter.js';
 import OneTypeMiddleware from './mixins/middleware.js';
-import OneTypeLogger from './mixins/logger.js';
 import OneTypeDependencies from './mixins/dependencies.js';
 import OneTypeFunction from './mixins/function.js';
 import OneTypeOverrides from './mixins/overrides.js';
@@ -20,6 +19,8 @@ import OneTypeForm from './mixins/form.js';
 import OneTypeCookie from './mixins/cookie.js';
 import OneTypeState from './mixins/state.js';
 import OneTypeAssets from './mixins/assets.js';
+import OneTypeObserver from './mixins/observer.js';
+import OneTypeMarkdown from './mixins/markdown.js';
 
 class OneType
 {
@@ -47,21 +48,6 @@ class OneType
             }
         };
 
-        this.logger =
-        {
-            levels:
-            {
-                error: 0,
-                warn: 1,
-                info: 2,
-                http: 3,
-                verbose: 4,
-                debug: 5,
-                silly: 6
-            },
-            level: 'error'
-        };
-
         this.data =
         {
             schemas: {},
@@ -69,7 +55,13 @@ class OneType
 
         this.assets = {};
 
-        this.$ot = {};
+        this.$ot =
+        {
+            get: (key) => this.StateGet(key),
+            set: (key, value) => this.StateSet(key, value)
+        };
+
+        this.ObserverStart();
     }
 }
 
@@ -81,7 +73,6 @@ Object.assign(OneType.prototype, OneTypeData);
 Object.assign(OneType.prototype, OneTypeBinaries);
 Object.assign(OneType.prototype, OneTypeString);
 Object.assign(OneType.prototype, OneTypeMiddleware);
-Object.assign(OneType.prototype, OneTypeLogger);
 Object.assign(OneType.prototype, OneTypeDependencies);
 Object.assign(OneType.prototype, OneTypeFunction);
 Object.assign(OneType.prototype, OneTypeOverrides);
@@ -95,5 +86,7 @@ Object.assign(OneType.prototype, OneTypeForm);
 Object.assign(OneType.prototype, OneTypeCookie);
 Object.assign(OneType.prototype, OneTypeState);
 Object.assign(OneType.prototype, OneTypeAssets);
+Object.assign(OneType.prototype, OneTypeObserver);
+Object.assign(OneType.prototype, OneTypeMarkdown);
 
 export default OneType;

package/lib/styles/classes/layout.css

@@ -22,15 +22,13 @@
 .ot-grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
 
 /* Container layouts */
-.ot-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
-.ot-container-s { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
 .ot-container-m { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
+.ot-container-s { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
 .ot-container-l { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
 .ot-container-full { width: 100%; padding: 0 calc(var(--ot-spacing-m) * 2); }
 
 @media screen and (max-width: 900px)
 {
-    .ot-container,
     .ot-container-s,
     .ot-container-m,
     .ot-container-l,

package/lib/styles/reset.css

@@ -142,7 +142,7 @@ i
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
-    color: var(--ot-text-2);
+    color: inherit;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
     font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 20;

package/lib/styles/variables.css

@@ -3,7 +3,7 @@
     --ot-spacing-x: 4px;
     --ot-spacing-s: 8px;
     --ot-spacing-m: 16px;
-    --ot-spacing-l: 34px;
+    --ot-spacing-l: 32px;
 
     --ot-radius-s: 4px;
     --ot-radius-m: 8px;
@@ -43,6 +43,7 @@
 
     --ot-text-1: rgba(225, 228, 232, 1);
     --ot-text-2: rgba(156, 156, 156, 1);
+    --ot-text-3: rgba(100, 100, 100, 1);
 
     --ot-brand: rgba(226, 112, 85, 1);
     --ot-brand-border: rgba(236, 142, 120, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onetype/framework",
-    "version": "2.0.41",
+    "version": "2.0.43",
     "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",
@@ -20,7 +20,9 @@
         "./html": "./addons/render/html/load.js",
         "./tags": "./addons/render/tags/load.js",
         "./sources": "./addons/modules/sources/back/load.js",
-        "./variables": "./addons/modules/variables/core/load.js"
+        "./variables": "./addons/modules/variables/core/load.js",
+        "./ai": "./addons/ai/load.js",
+        "./services/cloudflare/images": "./addons/services/cloudflare/images/back/load.js"
     },
     "imports": {
         "#framework/*": "./lib/*",
@@ -36,7 +38,9 @@
         "#elements/*": "./addons/render/elements/*",
         "#tags/*": "./addons/render/tags/*",
         "#sources/*": "./addons/modules/sources/*",
-        "#variables/*": "./addons/modules/variables/*"
+        "#variables/*": "./addons/modules/variables/*",
+        "#ai/*": "./addons/ai/*",
+        "#cloudflare-images/*": "./addons/services/cloudflare/images/back/*"
     },
     "dependencies": {
         "@grpc/grpc-js": "^1.13.3",

package/README.md

@@ -1,86 +0,0 @@
-# OneType Framework
-
-Full-stack isomorphic JavaScript framework built from scratch. No React, no Express, no Vue — original architecture from zero.
-
-One universal abstraction — the **addon** — powers databases, servers, commands, pages, directives, queues, and more. Define an addon with fields, and you get: data validation, event system, middleware chains, CRUD with PostgreSQL, automatic API exposure, frontend reactivity, and DOM manipulation — all from a single definition.
-
-Built by [Dejan Tomic](https://github.com/tomic-d). Powers multiple production applications including a cloud SaaS platform serving thousands of users, a travel agency website with 27 addons and 50+ frontend components, a distributed function execution gateway, and a multi-tenant CMS.
-
-## Quick Look
-
-```js
-import onetype from '#framework/load.js';
-import database from '#database/load.js';
-import commands from '#commands/load.js';
-
-// Define an addon — typed, persistent, full CRUD
-const users = onetype.Addon('users', (addon) => {
-    addon.Table('users');
-    addon.Field('id', ['string']);
-    addon.Field('name', ['string', null, true]);
-    addon.Field('email', ['string', null, true]);
-    addon.Field('created_at', ['string']);
-});
-
-// Connect database — all addons with Table() persist automatically
-database.Item({
-    id: 'primary',
-    hostname: process.env.DB_HOSTNAME,
-    username: process.env.DB_USERNAME,
-    database: process.env.DB_DATABASE,
-    password: process.env.DB_PASSWORD
-});
-
-// Start HTTP server
-commands.Fn('http.server', 3000, {
-    onStart: () => console.log('Server started on port 3000')
-});
-
-// Define an API endpoint with typed input/output
-onetype.AddonReady('commands', (commands) => {
-    commands.Item({
-        id: 'users:get:many',
-        method: 'GET',
-        endpoint: '/api/users',
-        exposed: true,
-        callback: async function(properties, resolve) {
-            const items = await users.Find()
-                .sort('created_at', 'desc')
-                .page(properties.page || 1)
-                .limit(properties.limit || 20)
-                .many();
-
-            resolve({
-                users: items.map(u => u.Get(['id', 'name', 'email', 'created_at']))
-            });
-        }
-    });
-});
-```
-
-## Documentation
-
-| Topic | What's covered |
-|---|---|
-| [Addons](docs/addons.md) | Addon definition, fields, functions, lifecycle events, preloading |
-| [Database](docs/database.md) | Connection, fluent ORM, query builder, 17+ operators, joins |
-| [Commands](docs/commands.md) | API endpoints, typed input/output, CRUD patterns, dynamic registration |
-| [Servers](docs/servers.md) | HTTP setup, gRPC streaming, binary transport, Store API |
-| [Frontend](docs/frontend.md) | Pages, components, directives, asset bundling, reactivity |
-| [Architecture](docs/architecture.md) | File structure, design decisions, mixin composition |
-
-## Install
-
-```bash
-npm install onetype
-```
-
-Requires Node.js >= 18.
-
-## Origin
-
-Originally built as the core of [OneType](https://onetype.ai), a cloud SaaS platform. The framework (v1) powered the entire platform — backend and frontend — serving thousands of users for 4+ years. This is v2: rebuilt with Proxy-based reactivity, improved addon architecture, gRPC transport, and a complete render system.
-
-## License
-
-[MIT](LICENSE)

package/addons/core/queue/index.js

@@ -1,66 +0,0 @@
-import queue from '#queue/load.js';
-
-const mainQueue = queue.Item({
-    id: 'main',
-    onTaskStart: (task, batch) => 
-    {
-    },
-    onTaskEnd: (task, batch) => 
-    {
-    },
-    onRun: () => 
-    {
-    },
-    whileRunning: (batch) => 
-    {
-        console.log('ACTIVE :1', batch.active);
-    }
-});
-
-mainQueue.Fn('add', null, {}, (data, resolve) => 
-{
-    setTimeout(() => {
-        resolve();
-    }, 1500)
-});
-
-setInterval(() => 
-{
-    mainQueue.Fn('add', null, {}, (data, resolve) => 
-    {
-        setTimeout(() => {
-            resolve();
-        }, 1500)
-    });
-
-}, 1);
-
-
-
-// const scrapper = workers.Fn('client.gRPC', '192.168.0.101:50001');
-
-// async function main()
-// {
-//     try 
-//     {
-//         const actions = [{
-//             name: 'navigate',
-//             properties: {
-//                 url: 'https://mondorama.rs',
-//                 waitUntil: 'networkidle'
-//             }
-//         }, {
-//             name: 'seo',
-//         }];
-
-//         const scrape = await scrapper.execute('scrape', {actions});
-
-//         console.log(scrape.data.context.seo);
-//     }
-//     catch(error)
-//     {
-//         console.log(error.message);
-//     }
-// }
-
-// main();

package/addons/float/modals/front/css/modals.css

@@ -1,26 +0,0 @@
-.ot-modal
-{
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.ot-modal > .backdrop
-{
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.ot-modal > .content
-{
-    position: relative;
-    z-index: 1;
-}

package/addons/float/modals/front/js/addon.js

@@ -1,10 +0,0 @@
-const modals = onetype.Addon('modals', (addon) =>
-{
-    addon.Field('id', ['string']);
-    addon.Field('backdrop', ['number', 0.5]);
-    addon.Field('closeable', ['boolean', true]);
-    addon.Field('escape', ['boolean', true]);
-    addon.Field('render', ['function', null]);
-    addon.Field('onOpen', ['function', null]);
-    addon.Field('onClose', ['function', null]);
-});

package/addons/float/modals/front/js/item/catch/add.js

@@ -1,48 +0,0 @@
-modals.ItemOn('add', (item) =>
-{
-    const overlays = onetype.Addon('overlays');
-    const id = item.Get('id');
-
-    const overlay = overlays.Item({
-        id: 'modal-' + id,
-        backdrop: item.Get('backdrop'),
-        closeable: item.Get('closeable'),
-        escape: item.Get('escape'),
-        render: item.Get('render'),
-        onOpen: (overlay) =>
-        {
-            const element = overlay.Get('element');
-
-            if(element)
-            {
-                element.classList.add('ot-modal');
-
-                const content = element.querySelector('.content');
-
-                if(content)
-                {
-                    content.style.left = '';
-                    content.style.top = '';
-                }
-            }
-
-            const onOpen = item.Get('onOpen');
-
-            if(typeof onOpen === 'function')
-            {
-                onOpen(item);
-            }
-        },
-        onClose: () =>
-        {
-            const onClose = item.Get('onClose');
-
-            if(typeof onClose === 'function')
-            {
-                onClose(item);
-            }
-        }
-    });
-
-    item.Set('overlay', overlay);
-});

package/addons/float/modals/front/js/item/catch/remove.js

@@ -1,9 +0,0 @@
-modals.ItemOn('remove', (item) =>
-{
-    const overlay = item.Get('overlay');
-
-    if(overlay)
-    {
-        overlay.Remove();
-    }
-});

package/addons/float/overlays/front/css/overlays.css

@@ -1,29 +0,0 @@
-.ot-overlay
-{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 100000;
-}
-
-.ot-overlay > .backdrop
-{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #000;
-    pointer-events: auto;
-}
-
-.ot-overlay > .content
-{
-    position: absolute;
-    width: fit-content;
-    max-width: 100%;
-    pointer-events: auto;
-}

package/addons/float/overlays/front/js/addon.js

@@ -1,17 +0,0 @@
-const overlays = onetype.Addon('overlays', (addon) =>
-{
-    addon.Field('id', ['string']);
-    addon.Field('render', ['function', null]);
-    addon.Field('element', ['object', null]);
-    addon.Field('target', ['object', null]);
-    addon.Field('position', ['object', {x: 'center', y: 'center'}]);
-    addon.Field('offset', ['object', {x: 0, y: 0}]);
-    addon.Field('flip', ['boolean', true]);
-    addon.Field('padding', ['number', 10]);
-    addon.Field('index', ['number', 100000]);
-    addon.Field('backdrop', ['number', null]);
-    addon.Field('closeable', ['boolean', false]);
-    addon.Field('escape', ['boolean', false]);
-    addon.Field('onOpen', ['function', null]);
-    addon.Field('onClose', ['function', null]);
-});

package/addons/float/overlays/front/js/events/click.js

@@ -1,27 +0,0 @@
-document.addEventListener('click', (event) =>
-{
-    const items = Object.values(overlays.Items()).sort((a, b) => b.Get('index') - a.Get('index'));
-
-    for(const item of items)
-    {
-        const element = item.Get('element');
-
-        if(!element)
-        {
-            continue;
-        }
-
-        if(!item.Get('closeable'))
-        {
-            continue;
-        }
-
-        const content = element.querySelector('.content');
-
-        if(!content || !content.contains(event.target))
-        {
-            item.Remove();
-            break;
-        }
-    }
-});

package/addons/float/overlays/front/js/events/escape.js

@@ -1,18 +0,0 @@
-document.addEventListener('keydown', (event) =>
-{
-    if(event.key !== 'Escape')
-    {
-        return;
-    }
-
-    const items = Object.values(overlays.Items()).sort((a, b) => b.Get('index') - a.Get('index'));
-
-    for(const item of items)
-    {
-        if(item.Get('escape'))
-        {
-            item.Remove();
-            break;
-        }
-    }
-});

package/addons/float/overlays/front/js/functions/flip.js

@@ -1,74 +0,0 @@
-overlays.Fn('flip', function(target, overlay, position, offset, padding)
-{
-    position = position || {x: 'center', y: 'center'};
-    padding = padding || 10;
-
-    const width = overlay.offsetWidth;
-    const height = overlay.offsetHeight;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    const pos = {x: position.x, y: position.y};
-    let flipped = {x: false, y: false};
-
-    // Calculate initial position
-    let result = overlays.Fn('position', target, overlay, pos, offset, padding);
-
-    // Flip Y if needed
-    if(pos.y === 'bottom' && (result.top + height) > (viewportHeight - padding))
-    {
-        pos.y = 'top';
-        flipped.y = true;
-    }
-    else if(pos.y === 'top' && result.top < padding)
-    {
-        pos.y = 'bottom';
-        flipped.y = true;
-    }
-
-    // Flip X if needed
-    if(pos.x === 'right' && (result.left + width) > (viewportWidth - padding))
-    {
-        pos.x = 'left';
-        flipped.x = true;
-    }
-    else if(pos.x === 'left' && result.left < padding)
-    {
-        pos.x = 'right';
-        flipped.x = true;
-    }
-
-    // Recalculate if flipped
-    if(flipped.x || flipped.y)
-    {
-        result = overlays.Fn('position', target, overlay, pos, offset, padding);
-    }
-
-    // Clamp to viewport bounds
-    if(result.left < padding)
-    {
-        result.left = padding;
-    }
-
-    if(result.left + width > viewportWidth - padding)
-    {
-        result.left = viewportWidth - width - padding;
-    }
-
-    if(result.top < padding)
-    {
-        result.top = padding;
-    }
-
-    if(result.top + height > viewportHeight - padding)
-    {
-        result.top = viewportHeight - height - padding;
-    }
-
-    return {
-        left: Math.round(result.left),
-        top: Math.round(result.top),
-        position: pos,
-        flipped: flipped
-    };
-});

package/addons/float/overlays/front/js/functions/index.js

@@ -1,17 +0,0 @@
-overlays.Fn('index', function()
-{
-    const items = overlays.Items();
-    let max = 100000;
-
-    for(const id in items)
-    {
-        const index = items[id].Get('index') || 100000;
-
-        if(index > max)
-        {
-            max = index;
-        }
-    }
-
-    return max + 1;
-});

package/addons/float/overlays/front/js/functions/position.js

@@ -1,63 +0,0 @@
-overlays.Fn('position', function(target, overlay, position, offset, padding)
-{
-    const isBody = !target || target === document.body;
-    const rect = isBody
-        ? {left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight}
-        : target.getBoundingClientRect();
-    const pos = position || {x: 'center', y: 'center'};
-    const width = overlay.offsetWidth;
-    const height = overlay.offsetHeight;
-    const pad = padding || 0;
-
-    let left = rect.left;
-    let top = rect.top;
-
-    // X positioning
-    if(pos.x === 'left')
-    {
-        left = isBody ? pad : rect.left - width;
-    }
-    else if(pos.x === 'left-in')
-    {
-        left = rect.left + pad;
-    }
-    else if(pos.x === 'center')
-    {
-        left = rect.left + (rect.width / 2) - (width / 2);
-    }
-    else if(pos.x === 'right-in')
-    {
-        left = rect.right - width - pad;
-    }
-    else if(pos.x === 'right')
-    {
-        left = isBody ? rect.right - width - pad : rect.right;
-    }
-
-    // Y positioning
-    if(pos.y === 'top')
-    {
-        top = isBody ? pad : rect.top - height;
-    }
-    else if(pos.y === 'top-in')
-    {
-        top = rect.top + pad;
-    }
-    else if(pos.y === 'center')
-    {
-        top = rect.top + (rect.height / 2) - (height / 2);
-    }
-    else if(pos.y === 'bottom-in')
-    {
-        top = rect.bottom - height - pad;
-    }
-    else if(pos.y === 'bottom')
-    {
-        top = isBody ? rect.bottom - height - pad : rect.bottom;
-    }
-
-    left += offset.x || 0;
-    top += offset.y || 0;
-
-    return {left: Math.round(left), top: Math.round(top)};
-});