@onetype/framework 2.0.53 → 2.0.55

package/addons/render/elements/front/items/self/status/loading/loading.js

@@ -4,23 +4,22 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'status-loading',
 		icon: 'progress_activity',
 		name: 'Loading',
-		description: 'Full-page loading spinner with optional message.',
+		description: 'Loading state with spinner and optional message.',
 		category: 'Status',
 		author: 'OneType',
 		config: {
 			text: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			variant: {
 				type: 'array',
-				value: ['brand'],
-				options: ['brand', 'blue', 'red', 'orange', 'green']
+				value: ['brand', 'size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
-			return `
+			return /* html */ `
 				<div :class="'holder ' + variant.join(' ')">
 					<div class="circle"><i class="spinner">progress_activity</i></div>
 					<span ot-if="text" class="text">{{ text }}</span>

package/addons/render/elements/front/styles/types.css

@@ -0,0 +1,363 @@
+/* ===== TYPE SYSTEM — global reusable cell styles ===== */
+
+/* Group — recursive layout wrapper */
+
+.ot-type-group
+{
+	display: flex;
+	min-width: 0;
+}
+
+.ot-type-group.layout-row
+{
+	flex-direction: row;
+	align-items: center;
+}
+
+.ot-type-group.layout-column
+{
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.ot-type-group.gap-none { gap: 0; }
+.ot-type-group.gap-small { gap: 4px; }
+.ot-type-group.gap-medium { gap: var(--ot-spacing-s); }
+.ot-type-group.gap-large { gap: var(--ot-spacing-m); }
+
+/* Text */
+
+.ot-type-text
+{
+	color: var(--ot-text-1);
+	font-weight: 600;
+}
+
+/* Description */
+
+.ot-type-description
+{
+	color: var(--ot-text-2);
+	font-weight: 400;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+/* Number */
+
+.ot-type-number
+{
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+/* Date / Timeago */
+
+.ot-type-date
+{
+	color: var(--ot-text-2);
+	font-variant-numeric: tabular-nums;
+}
+
+/* Boolean */
+
+.ot-type-boolean
+{
+	font-size: 18px;
+}
+
+.ot-type-boolean.yes { color: var(--ot-green); }
+.ot-type-boolean.no { color: var(--ot-red); opacity: 0.5; }
+
+/* Icon */
+
+.ot-type-icon
+{
+	font-size: 18px;
+	color: var(--ot-text-2);
+}
+
+/* Image */
+
+.ot-type-image
+{
+	width: 36px;
+	height: 36px;
+	border-radius: var(--ot-radius-s);
+	background-size: cover;
+	background-position: center;
+	background-color: var(--ot-bg-2);
+}
+
+.ot-type-image.empty
+{
+	background-image: none;
+}
+
+/* Avatar */
+
+.ot-type-avatar
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--ot-bg-2);
+	color: var(--ot-text-3);
+}
+
+.ot-type-avatar > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.ot-type-avatar.ot-type-avatar-fallback > i
+{
+	font-size: 18px;
+}
+
+/* Media */
+
+.ot-type-media
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	min-width: 0;
+}
+
+.ot-type-media > .ot-type-media-thumb
+{
+	flex-shrink: 0;
+	width: 36px;
+	height: 36px;
+	border-radius: var(--ot-radius-s);
+	background-size: cover;
+	background-position: center;
+	background-color: var(--ot-bg-2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ot-text-3);
+}
+
+.ot-type-media > .ot-type-media-thumb.empty > i
+{
+	font-size: 18px;
+}
+
+.ot-type-media > .ot-type-media-info
+{
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	gap: 1px;
+}
+
+.ot-type-media > .ot-type-media-info > .ot-type-media-title
+{
+	font-weight: 600;
+	color: var(--ot-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ot-type-media > .ot-type-media-info > .ot-type-media-subtitle
+{
+	font-size: 11px;
+	color: var(--ot-text-3);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Badge */
+
+.ot-type-badge
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 3px 8px;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 100px;
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-2);
+}
+
+.ot-type-badge > i
+{
+	font-size: 13px;
+}
+
+.ot-type-badge.color-brand { background: var(--ot-brand-opacity); border-color: var(--ot-brand-border); color: var(--ot-brand); }
+.ot-type-badge.color-blue { background: var(--ot-blue-opacity); border-color: var(--ot-blue-border); color: var(--ot-blue); }
+.ot-type-badge.color-green { background: var(--ot-green-opacity); border-color: var(--ot-green-border); color: var(--ot-green); }
+.ot-type-badge.color-red { background: var(--ot-red-opacity); border-color: var(--ot-red-border); color: var(--ot-red); }
+.ot-type-badge.color-orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }
+
+/* Chip */
+
+.ot-type-chip
+{
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 8px;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-s);
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-2);
+}
+
+/* Tag */
+
+.ot-type-tag
+{
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 7px;
+	background: var(--ot-bg-3);
+	border-radius: var(--ot-radius-s);
+	font-size: 10px;
+	font-weight: 600;
+	color: var(--ot-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.ot-type-tags
+{
+	display: flex;
+	flex-wrap: wrap;
+	gap: 3px;
+}
+
+/* Status */
+
+.ot-type-status
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 3px 10px;
+	background: var(--ot-bg-2);
+	border-radius: 100px;
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-2);
+}
+
+.ot-type-status > .ot-type-status-dot
+{
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--ot-text-3);
+}
+
+.ot-type-status.color-green { color: var(--ot-green); background: var(--ot-green-opacity); }
+.ot-type-status.color-green > .ot-type-status-dot { background: var(--ot-green); box-shadow: 0 0 0 3px var(--ot-green-opacity); }
+.ot-type-status.color-red { color: var(--ot-red); background: var(--ot-red-opacity); }
+.ot-type-status.color-red > .ot-type-status-dot { background: var(--ot-red); box-shadow: 0 0 0 3px var(--ot-red-opacity); }
+.ot-type-status.color-orange { color: var(--ot-orange); background: var(--ot-orange-opacity); }
+.ot-type-status.color-orange > .ot-type-status-dot { background: var(--ot-orange); box-shadow: 0 0 0 3px var(--ot-orange-opacity); }
+.ot-type-status.color-blue { color: var(--ot-blue); background: var(--ot-blue-opacity); }
+.ot-type-status.color-blue > .ot-type-status-dot { background: var(--ot-blue); }
+.ot-type-status.color-brand { color: var(--ot-brand); background: var(--ot-brand-opacity); }
+.ot-type-status.color-brand > .ot-type-status-dot { background: var(--ot-brand); }
+
+/* Metric */
+
+.ot-type-metric
+{
+	display: inline-flex;
+	align-items: baseline;
+	gap: 6px;
+	font-variant-numeric: tabular-nums;
+}
+
+.ot-type-metric > .ot-type-metric-value
+{
+	font-weight: 700;
+	color: var(--ot-text-1);
+}
+
+.ot-type-metric > .ot-type-metric-delta
+{
+	font-size: 11px;
+	font-weight: 700;
+	padding: 1px 5px;
+	border-radius: var(--ot-radius-s);
+}
+
+.ot-type-metric > .ot-type-metric-delta.up { color: var(--ot-green); background: var(--ot-green-opacity); }
+.ot-type-metric > .ot-type-metric-delta.down { color: var(--ot-red); background: var(--ot-red-opacity); }
+
+/* Progress */
+
+.ot-type-progress
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+.ot-type-progress > .ot-type-progress-track
+{
+	flex: 1;
+	height: 6px;
+	background: var(--ot-bg-3);
+	border-radius: 100px;
+	overflow: hidden;
+	min-width: 60px;
+}
+
+.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar
+{
+	height: 100%;
+	border-radius: 100px;
+	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-brand { background: var(--ot-brand); }
+.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-blue { background: var(--ot-blue); }
+.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-green { background: var(--ot-green); }
+.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-red { background: var(--ot-red); }
+.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-orange { background: var(--ot-orange); }
+
+.ot-type-progress > .ot-type-progress-label
+{
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-2);
+	font-variant-numeric: tabular-nums;
+	min-width: 32px;
+	text-align: right;
+}
+
+/* Link */
+
+.ot-type-link
+{
+	color: var(--ot-brand);
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.ot-type-link:hover
+{
+	text-decoration: underline;
+}

package/instructions.txt

@@ -0,0 +1,28 @@
+You are an elite software architect and developer. You think before you act, you write clean code, and you never compromise on quality.
+
+## Mindset
+
+- **Think first.** Before writing a single line, understand the real problem. What is actually being asked? Is there a simpler, more elegant solution? Does this fit the existing system?
+- **Architect's eye.** Always consider scalability, modularity, and how this piece fits the bigger picture.
+- **Big systems from small parts.** Favor small, focused modules with clear responsibilities over monoliths.
+- **Simplicity wins.** Powerful under the hood, clean on the surface. Never add complexity that doesn't earn its place.
+- **No workarounds.** If the solution is a hack, don't write it. Solve the real problem or flag it clearly.
+- **Deleting is valid.** If something doesn't serve a purpose, remove it without sentiment.
+
+## Code Style
+
+- **Allman brace style.** Every opening brace on a new line for `function`, `if`, `for`, `while` blocks. JSON/object literals stay inline.
+- **Tabs, not spaces.**
+- **Full words in names.** `event`, `item`, `compile`, `node` — never `e`, `itm`, `cmp`, `n`. Use the shortest full word that is unambiguous.
+- **DRY, reusable, modular.** No duplication. Abstract when it makes sense.
+- **Complete validation always.** Every command/function has full `in`/`out` schema — types, defaults, required flags. Never an empty `{}`.
+- **No `||` fallbacks for fields with defaults.** If a field is defined with a default, trust it. Don't add redundant fallbacks.
+
+## Behavior
+
+- **Short answers.** Give the essence, not an essay. If action is needed, act — don't explain first.
+- **Proactive.** Spot bugs, smell bad patterns, suggest improvements — always. Don't wait to be asked.
+- **Ask when unclear.** Never guess wrong silently. One focused question beats a wrong solution.
+- **Ping-pong.** Collaborate like a senior peer, not an assistant. Push back when something is wrong. Suggest alternatives.
+- **No unnecessary files.** Don't create what isn't needed.
+- **No complexity theater.** Don't add abstractions, layers, or patterns unless they solve a real problem.

package/lib/load.js

@@ -28,6 +28,7 @@ onetype.Assets('transforms/items', import.meta.url, { js: '../addons/render/tran
 onetype.Assets('pages', import.meta.url, { js: '../addons/render/pages', css: '../addons/render/pages/front' });
 onetype.Assets('elements', import.meta.url, { js: { path: '../addons/render/elements/front', exclude: ['../addons/render/elements/front/items/self'] }, css: { path: '../addons/render/elements/front', exclude: ['../addons/render/elements/front/items/self'] } });
 onetype.Assets('elements/items', import.meta.url, { js: '../addons/render/elements/front/items/self', css: '../addons/render/elements/front/items/self' });
+onetype.Assets('editor', import.meta.url, { js: '../addons/render/editor', css: '../addons/render/editor' });
 
 /* Float */
 onetype.Assets('float', import.meta.url, { js: '../addons/float', css: '../addons/float' });

package/lib/styles/reset.css

@@ -2,52 +2,54 @@
 *::before,
 *::after
 {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
 }
 
 html
 {
-    height: 100%;
-    scroll-behavior: smooth;
-    font-size: 100%;
-    tab-size: 4;
+	height: 100%;
+	scroll-behavior: smooth;
+	font-size: 100%;
+	tab-size: 4;
 }
 
 body
 {
-    min-height: 100vh;
-    font-family: var(--ot-font-primary), system-ui, sans-serif;
-    font-size: var(--ot-size-m);
-    line-height: 1.5;
-    color: var(--ot-text-1);
-    background: var(--ot-bg-1);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+	min-height: 100vh;
+	font-family: var(--ot-font-primary), system-ui, sans-serif;
+	font-size: var(--ot-size-m);
+	line-height: 1.5;
+	color: var(--ot-text-1);
+	background: var(--ot-bg-1);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 :focus-visible
 {
-    outline: 2px solid var(--ot-brand);
-    outline-offset: 2px;
+	outline: 2px solid var(--ot-brand);
+	outline-offset: 2px;
 }
 
 :focus:not(:focus-visible)
 {
-    outline: none;
+	outline: none;
 }
 
 h1, h2, h3, h4, h5, h6
 {
-    font-family: var(--ot-font-secondary), system-ui, sans-serif;
-    font-weight: 600;
-    line-height: 1.5;
-    color: var(--ot-text-1);
+	font-family: var(--ot-font-secondary), Georgia, serif;
+	font-weight: 500;
+	line-height: 1.1;
+	letter-spacing: -0.02em;
+	color: var(--ot-text-1);
+	font-variation-settings: 'opsz' 144;
 }
 
-h1 { font-size: 2.5rem; }
-h2 { font-size: 2rem; }
+h1 { font-size: 3rem; }
+h2 { font-size: 2.25rem; }
 h3 { font-size: 1.5rem; }
 h4 { font-size: 1.25rem; }
 h5 { font-size: 1.125rem; }
@@ -55,39 +57,34 @@ h6 { font-size: 1rem; }
 
 p
 {
-    line-height: 1.6;
-    color: var(--ot-text-2);
+	line-height: 1.6;
+	color: var(--ot-text-2);
 }
 
 @media screen and (max-width: 768px)
 {
-    html { font-size: 95%; }
-    h1 { line-height: 1.2; }
-    p { line-height: 1.5; }
+	html { font-size: 95%; }
+	h1 { line-height: 1.05; }
+	p { line-height: 1.5; }
 }
 
 @media screen and (max-width: 480px)
 {
-    html { font-size: 90%; }
-    h1 { line-height: 1.1; }
-    p { line-height: 1.4; }
+	html { font-size: 90%; }
+	h1 { line-height: 1.05; }
+	p { line-height: 1.4; }
 }
 
 small
 {
-    font-size: 0.875em;
+	font-size: 0.875em;
 }
 
 a
 {
-    color: var(--ot-brand);
-    text-decoration: none;
-    transition: all 0.2s ease;
-}
-
-a:hover
-{
-    color: var(--ot-brand-hover);
+	color: inherit;
+	text-decoration: none;
+	transition: color 0.2s ease;
 }
 
 img,
@@ -96,9 +93,9 @@ video,
 canvas,
 svg
 {
-    display: block;
-    max-width: 100%;
-    height: auto;
+	display: block;
+	max-width: 100%;
+	height: auto;
 }
 
 button,
@@ -107,63 +104,79 @@ optgroup,
 select,
 textarea
 {
-    font: inherit;
-    color: inherit;
-    line-height: inherit;
+	font: inherit;
+	color: inherit;
+	line-height: inherit;
 }
 
 button
 {
-    cursor: pointer;
+	cursor: pointer;
+	background: none;
+	border: none;
 }
 
 ul, ol
 {
-    list-style-position: inside;
-    padding-left: 1em;
+	list-style: none;
 }
 
 table
 {
-    border-collapse: collapse;
-    width: 100%;
+	border-collapse: collapse;
+	width: 100%;
 }
 
 i
 {
-    font-family: 'Material Symbols Rounded';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 20px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    color: inherit;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-    font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 20;
+	font-family: 'Material Symbols Rounded';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 20px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	color: inherit;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+	font-variation-settings: 'opsz' 24, 'wght' 350, 'FILL' 0, 'GRAD' 0;
+}
+
+*
+{
+	scrollbar-width: thin;
+	scrollbar-color: var(--ot-bg-3) transparent;
 }
 
 ::-webkit-scrollbar
 {
-    width: 0;
-    height: 0;
-    display: none;
+	width: 6px;
+	height: 6px;
 }
 
-*
+::-webkit-scrollbar-track
+{
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb
+{
+	background: var(--ot-bg-3);
+	border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover
 {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+	background: var(--ot-bg-4);
 }
 
 @media print
 {
-    body { background: #fff; color: #000; }
-    a { color: #000; text-decoration: underline; }
-    @page { margin: 2cm; }
+	body { background: #fff; color: #000; }
+	a { color: #000; text-decoration: underline; }
+	@page { margin: 2cm; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onetype/framework",
-    "version": "2.0.53",
+    "version": "2.0.55",
     "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",