@onetype/framework 2.0.22 → 2.0.25

package/addons/core/assets/back/functions/import.js

@@ -0,0 +1,24 @@
+import assets from '../addon.js';
+import onetype from '#framework/load.js';
+
+assets.Fn('import', function(modules)
+{
+    for (let i = 0; i < modules.length; i++)
+    {
+        const entry = modules[i];
+        const registered = onetype.AssetsGet(entry);
+
+        if (registered)
+        {
+            if (registered.js)
+            {
+                assets.Item({ type: 'js', order: i, path: registered.js.path, ignore: registered.js.exclude || [] });
+            }
+
+            if (registered.css)
+            {
+                assets.Item({ type: 'css', order: i, path: registered.css.path, ignore: registered.css.exclude || [] });
+            }
+        }
+    }
+});

package/docs/architecture.md

@@ -3,17 +3,27 @@
 ## File structure
 
 ```
-lib/                     Core OneType class + 17 mixins
-  load.js                Entry point — creates OneType instance, handles signals
+lib/                     Core OneType class + mixins
+  load.js                Entry point — creates OneType instance, registers all assets, handles signals
   src/
     onetype.js           Main class (mixin-composed)
     mixins/              Addons, Emitter, Middleware, Data, DOM, Route,
-                         Function, Generate, Binaries, Helper, Cookie, and more
+                         Function, Generate, Binaries, Helper, Cookie, Assets, and more
     classes/
       addon/             OneTypeAddon + mixins (fields, items, functions, find, render, store)
         classes/
           item/          OneTypeAddonItem + mixins (get, set, crud, functions, store)
           render/        OneTypeAddonRender + mixins (compile, dom, process, events)
+  styles/                Shared CSS (variables, reset, queries, utility classes)
+  items/
+    elements/            Shared UI elements (grouped, IDs are group-prefixed)
+      form/              button, checkbox, field, input, radio, rating, section, slider, textarea
+      global/            card, code, faq, heading, markdown, notice, parameters, tabs, tags
+      sections/          footer, hero, navbar, stats
+      status/            code, empty, error, loading
+    transforms/          Shared transforms
+                         accordion, chart, codeflask, codemirror, comparison,
+                         heatmap, interact, particles, sparkline, swiper, tabs, typed
 
 addons/                  Built-in addon library
   core/
@@ -22,14 +32,14 @@ addons/                  Built-in addon library
     clients/             HTTP + gRPC clients
     commands/            Typed API command system
     queue/               Concurrency task queue
+    assets/              Convention-based asset bundler (terser)
   render/
     directives/          ot-if, ot-for, ot-click, ot-fetch, ot-show, ot-html, ot-text
     pages/               SPA page router with CSS Grid layouts + async data loading
-    elements/            40+ pre-built UI components
-    assets/              Convention-based asset bundler (terser)
+    elements/            UI component addon (registration, directives)
     html/                HTML document builder
     tags/                HTML tag system
-    transforms/          Data transforms
+    transforms/          Transform addon (registration, loading, directives)
   modules/
     variables/           Named variable registry
     actions/             Action triggers
@@ -93,13 +103,16 @@ The framework uses Node.js package imports (`#` prefix) defined in `package.json
         "#database/*": "./addons/core/database/back/*",
         "#servers/*": "./addons/core/servers/back/*",
         "#clients/*": "./addons/core/clients/back/*",
-        "#commands/*": "./addons/core/commands/back/*",
+        "#commands/*": "./addons/core/commands/*",
         "#queue/*": "./addons/core/queue/back/*",
-        "#assets/*": "./addons/render/assets/back/*",
+        "#assets/*": "./addons/core/assets/back/*",
         "#html/*": "./addons/render/html/*",
         "#directives/*": "./addons/render/directives/*",
+        "#pages/*": "./addons/render/pages/*",
         "#elements/*": "./addons/render/elements/*",
-        "#tags/*": "./addons/render/tags/*"
+        "#tags/*": "./addons/render/tags/*",
+        "#sources/*": "./addons/modules/sources/*",
+        "#variables/*": "./addons/modules/variables/*"
     }
 }
 ```
@@ -108,7 +121,7 @@ The framework uses Node.js package imports (`#` prefix) defined in `package.json
 
 ### Mixin composition over inheritance
 
-Both `OneType` and `OneTypeAddon` use `Object.assign(Class.prototype, mixin)`. No class hierarchies, no diamond problems. Each mixin is a plain object of methods that gets merged onto the prototype:
+Both `OneType` and `OneTypeAddon` use `Object.assign(Class.prototype, mixin)`. No class hierarchies, no diamond problems. Each mixin is a plain object of methods merged onto the prototype:
 
 ```js
 import AddonItemGet from './mixins/get.js';
@@ -178,6 +191,41 @@ Receive:
 
 Transparent binary transport over the same stream.
 
+### Centralized asset registry
+
+All asset paths are registered centrally in `lib/load.js` via `onetype.Assets(id, url, config)`. This decouples asset path knowledge from individual addons — the framework controls what gets bundled, regardless of whether a backend addon is loaded.
+
+```js
+// lib/load.js — top-level registrations
+onetype.Assets('framework', import.meta.url, { js: { path: '.', exclude: ['load.js', 'items', 'styles'] } });
+onetype.Assets('styles', import.meta.url, { css: 'styles' });
+onetype.Assets('commands', import.meta.url, { js: { path: '../addons/core/commands', exclude: ['../addons/core/commands/back'] } });
+```
+
+Shared elements and transforms use `onetype.AddonReady` to register only after their parent addon is loaded. The JS files themselves contain the wrapper:
+
+```js
+// lib/items/elements/form/button/button.js
+onetype.AddonReady('elements', (elements) =>
+{
+    elements.ItemAdd({ id: 'form-button', ... });
+});
+
+// lib/items/transforms/swiper/swiper.js
+onetype.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({ id: 'swiper', ... });
+});
+```
+
+Element IDs are group-prefixed: `form-button`, `global-card`, `sections-navbar`, `status-loading`. HTML tags follow the same pattern: `<e-form-button>`, `<e-global-card>`, `<e-status-loading>`.
+
+The import function reads from the registry to resolve paths:
+
+```js
+assets.Fn('import', ['framework', 'styles', 'commands', 'elements/form/input', 'transforms/swiper']);
+```
+
 ### Convention-based bundling
 
 No webpack, no build configuration. The asset bundler:

package/docs/frontend.md

@@ -330,22 +330,39 @@ Usage:
 
 Convention-based bundler that scans directories, strips ES module syntax, concatenates, and minifies.
 
+### Asset registry
+
+All asset paths are registered centrally in `lib/load.js` via `onetype.Assets()`. The import function resolves IDs to paths from this registry.
+
 ```js
-import assets from '#assets/load.js';
+// In application back/index.js — import by ID
+assets.Fn('import', ['framework', 'styles', 'commands', 'elements/input', 'transforms/swiper']);
+```
 
-// Scan directories in order
-assets.Item({ type: 'js', order: 0, path: 'framework' });
-assets.Item({ type: 'js', order: 1, path: 'addons/core/commands/front' });
-assets.Item({ type: 'js', order: 1, path: 'addons/render/directives/front' });
-assets.Item({ type: 'js', order: 1, path: 'addons/render/pages/front' });
+Available asset IDs:
 
-// CSS
-assets.Item({ type: 'css', order: 0, path: 'styles' });
-assets.Item({ type: 'css', order: 1, path: 'addons/render/elements/front' });
-assets.Item({ type: 'css', order: 2, path: 'projects/travel/site/front' });
+| ID | Type | Description |
+|---|---|---|
+| `framework` | js | Core framework library |
+| `styles` | css | Shared CSS (variables, reset, queries, utilities) |
+| `commands` | js | Command system (front-end) |
+| `database` | js | Database (front-end) |
+| `directives` | js | Directives addon |
+| `transforms` | js | Transforms addon |
+| `pages` | js+css | Page router addon |
+| `elements` | js+css | Elements addon |
+| `float` | js+css | Float system (modals, toasts, tooltips, popups, overlays) |
+| `elements/form/input` | js+css | Granular element import |
+| `transforms/swiper` | js | Granular transform import |
 
-// Ignore specific files
-assets.Item({ type: 'js', order: 0, path: 'framework', ignore: ['framework/load.js'] });
+Granular imports use `elements/<group>/<name>` and `transforms/<name>` format. Element groups: `form`, `global`, `sections`, `status`.
+
+### Manual asset items
+
+```js
+// Scan a custom directory
+assets.Item({ type: 'js', order: 2, path: resolve(root, 'front') });
+assets.Item({ type: 'css', order: 2, path: resolve(root, 'front') });
 ```
 
 ### Dynamic content injection

package/lib/items/elements/form/button/button.js

@@ -0,0 +1,106 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-button',
+		icon: 'smart_button',
+		name: 'Button',
+		description: 'Premium button with icons, variants, animations, and ripple effects.',
+		category: 'Form',
+		author: 'OneType',
+		example: [
+			{ title: 'Solid', code: '<e-button text="Brand" icon="add"></e-button>' },
+			{ title: 'Soft', code: '<e-button text="Soft" icon="cloud" :variant="[\'soft-brand\']"></e-button>' },
+			{ title: 'Outline', code: '<e-button text="Outline" icon="edit" :variant="[\'outline-brand\']"></e-button>' },
+			{ title: 'Border', code: '<e-button text="Border" :variant="[\'border\']"></e-button>' },
+			{ title: 'Ghost', code: '<e-button text="Ghost" :variant="[\'ghost\']"></e-button>' },
+			{ title: 'Icon Only', code: '<e-button icon="add" :variant="[\'icon-only\']"></e-button>' }
+		],
+		config: {
+			icon: {
+				type: 'string',
+			},
+			iconRight: {
+				type: 'string',
+			},
+			text: {
+				type: 'string',
+				value: 'Button'
+			},
+			href: {
+				type: 'string',
+			},
+			target: {
+				type: 'string',
+				options: ['_blank', '_self', '_parent', '_top']
+			},
+			type: {
+				type: 'string',
+				value: 'button',
+				options: ['button', 'submit', 'reset']
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			loading: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['brand', 'size-m'],
+				options: [
+					'brand', 'blue', 'red', 'orange', 'green',
+					'soft-brand', 'soft-blue', 'soft-red', 'soft-orange', 'soft-green',
+					'outline-brand', 'outline-blue', 'outline-red', 'outline-orange', 'outline-green',
+					'bg-1', 'bg-2', 'bg-3', 'bg-4',
+					'ghost', 'glass', 'border', 'transparent',
+					'size-s', 'size-m', 'size-l',
+					'full', 'icon-only', 'rounded'
+				]
+			},
+			_click: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.handleClick = (e) =>
+			{
+				if(this.disabled || this.loading)
+				{
+					return;
+				}
+
+				if(this._click)
+				{
+					this._click(e);
+				}
+			};
+
+			const content = `
+				<span ot-if="loading" class="spinner"><i>progress_activity</i></span>
+				<span ot-if="!loading" class="content">
+					<i ot-if="icon" class="icon-left">{{ icon }}</i>
+					<span ot-if="text && !variant.includes('icon-only')" class="text">{{ text }}</span>
+					<i ot-if="iconRight" class="icon-right">{{ iconRight }}</i>
+				</span>
+			`;
+
+			if(this.href)
+			{
+				return `
+					<a class="holder" :href="href" :target="target" :variant="variant.join(' ')" :disabled="disabled" :loading="loading" ot-click="handleClick">
+						${content}
+					</a>
+				`;
+			}
+
+			return `
+				<button class="holder" :type="type" :variant="variant.join(' ')" :disabled="disabled" :loading="loading" ot-click="handleClick">
+					${content}
+				</button>
+			`;
+		}
+	});
+});

package/lib/items/elements/form/button/styles/base.css

@@ -0,0 +1,176 @@
+.e-64e877b 
+{
+	display: flex;
+}
+
+/* Button Base */
+.e-64e877b > .holder
+{
+	position: relative;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	padding: 4px var(--ot-spacing-m);
+	cursor: pointer;
+	outline: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--ot-spacing-s);
+	background: transparent;
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	text-decoration: none;
+	white-space: nowrap;
+	overflow: hidden;
+	user-select: none;
+	
+	-webkit-tap-highlight-color: transparent;
+	transition:
+		background 0.2s ease,
+		border-color 0.2s ease,
+		color 0.2s ease,
+		box-shadow 0.2s ease,
+		transform 0.15s ease;
+}
+
+/* Content wrapper */
+.e-64e877b > .holder > .content
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--ot-spacing-s);
+	transition: transform 0.2s ease;
+}
+
+/* Text */
+.e-64e877b > .holder > .content > .text
+{
+	line-height: 1;
+}
+
+/* Icons */
+.e-64e877b > .holder > .content > i
+{
+	font-size: 18px;
+	transition: transform 0.2s ease;
+}
+
+.e-64e877b > .holder > .content > .icon-left
+{
+	margin-right: -2px;
+}
+
+.e-64e877b > .holder > .content > .icon-right
+{
+	margin-left: -2px;
+}
+
+/* Hover - subtle lift */
+.e-64e877b > .holder:hover
+{
+	transform: translateY(-1px);
+}
+
+.e-64e877b > .holder:hover > .content > .icon-right
+{
+	transform: translateX(2px);
+}
+
+/* Active - press down */
+.e-64e877b > .holder:active
+{
+	transform: translateY(0) scale(0.98);
+	transition-duration: 0.1s;
+}
+
+/* Focus visible - premium glow ring */
+.e-64e877b > .holder:focus-visible
+{
+	outline: none;
+	box-shadow:
+		0 0 0 2px var(--ot-bg-1),
+		0 0 0 4px var(--ot-brand);
+}
+
+/* Disabled */
+.e-64e877b > .holder[disabled="true"]
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+	transform: none;
+}
+
+/* Loading */
+.e-64e877b > .holder[loading="true"]
+{
+	cursor: wait;
+	pointer-events: none;
+}
+
+/* Spinner */
+.e-64e877b > .holder > .spinner
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.e-64e877b > .holder > .spinner > i
+{
+	font-size: 18px;
+	animation: e-button-spin 0.8s linear infinite;
+}
+
+@keyframes e-button-spin
+{
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+/* Ripple effect */
+.e-64e877b > .holder > .ripple
+{
+	position: absolute;
+	border-radius: 50%;
+	background: currentColor;
+	opacity: 0.15;
+	transform: scale(0);
+	animation: e-button-ripple 0.6s ease-out forwards;
+	pointer-events: none;
+}
+
+@keyframes e-button-ripple
+{
+	to
+	{
+		transform: scale(2.5);
+		opacity: 0;
+	}
+}
+
+/* Full width */
+.e-64e877b > .holder[variant*="full"]
+{
+	width: 100%;
+}
+
+/* Rounded (pill) */
+.e-64e877b > .holder[variant*="rounded"]
+{
+	border-radius: 100px;
+}
+
+/* Icon only - square aspect */
+.e-64e877b > .holder[variant*="icon-only"]
+{
+	padding: 0;
+	aspect-ratio: 1;
+}
+
+.e-64e877b > .holder[variant*="icon-only"] > .content > i
+{
+	margin: 0;
+}

package/lib/items/elements/form/button/styles/sizes.css

@@ -0,0 +1,78 @@
+/* Small */
+.e-64e877b > .holder[variant*="size-s"]
+{
+	height: var(--ot-height-s);
+	padding: 0 var(--ot-spacing-s);
+	font-size: var(--ot-size-s);
+	gap: var(--ot-spacing-x);
+}
+
+.e-64e877b > .holder[variant*="size-s"] > .content
+{
+	gap: var(--ot-spacing-x);
+}
+
+.e-64e877b > .holder[variant*="size-s"] > .content > i,
+.e-64e877b > .holder[variant*="size-s"] > .spinner > i
+{
+	font-size: 14px;
+}
+
+/* Medium (default) */
+.e-64e877b > .holder[variant*="size-m"]
+{
+	height: var(--ot-height-m);
+	padding: 0 var(--ot-spacing-m);
+	font-size: var(--ot-size-m);
+	gap: var(--ot-spacing-s);
+}
+
+.e-64e877b > .holder[variant*="size-m"] > .content
+{
+	gap: var(--ot-spacing-s);
+}
+
+.e-64e877b > .holder[variant*="size-m"] > .content > i,
+.e-64e877b > .holder[variant*="size-m"] > .spinner > i
+{
+	font-size: 18px;
+}
+
+/* Large */
+.e-64e877b > .holder[variant*="size-l"]
+{
+	height: var(--ot-height-l);
+	padding: 0 var(--ot-spacing-l);
+	font-size: var(--ot-size-l);
+	gap: var(--ot-spacing-m);
+}
+
+.e-64e877b > .holder[variant*="size-l"] > .content
+{
+	gap: var(--ot-spacing-m);
+}
+
+.e-64e877b > .holder[variant*="size-l"] > .content > i,
+.e-64e877b > .holder[variant*="size-l"] > .spinner > i
+{
+	font-size: 22px;
+}
+
+/* Icon-only size adjustments */
+.e-64e877b > .holder[variant*="icon-only"][variant*="size-s"]
+{
+	width: var(--ot-height-s);
+	padding: 0;
+}
+
+.e-64e877b > .holder[variant*="icon-only"][variant*="size-m"]
+{
+	width: var(--ot-height-m);
+	padding: 0;
+}
+
+.e-64e877b > .holder[variant*="icon-only"][variant*="size-l"]
+{
+	width: var(--ot-height-l);
+	padding: 0;
+}