@onetype/framework 2.0.52 → 2.0.54

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

@@ -18,9 +18,16 @@
 	flex-direction: column;
 	align-items: center;
 	gap: var(--ot-spacing-m);
+	animation: e-691b81f7-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* Spinner circle */
+@keyframes e-691b81f7-fade
+{
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+/* Circle */
 
 .e-691b81f7 > .holder > .circle
 {
@@ -32,7 +39,18 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	animation: e-691b81f7-pulse 2s ease-in-out infinite;
+	animation: e-691b81f7-pulse 2.4s ease-in-out infinite;
+}
+
+.e-691b81f7 > .holder > .circle::before
+{
+	content: '';
+	position: absolute;
+	inset: -10px;
+	border-radius: 50%;
+	border: 1px dashed var(--ot-bg-3-border);
+	opacity: 0.5;
+	animation: e-691b81f7-pulse 2.4s ease-in-out infinite reverse;
 }
 
 .e-691b81f7 > .holder > .circle > .spinner
@@ -41,23 +59,76 @@
 	animation: e-691b81f7-spin 0.8s linear infinite;
 }
 
-/* Color variants */
+/* Text */
+
+.e-691b81f7 > .holder > .text
+{
+	font-size: 14px;
+	color: var(--ot-text-2);
+	font-family: var(--ot-font-primary);
+}
+
+/* ===== COLOR VARIANTS ===== */
 
+.e-691b81f7 > .holder.brand > .circle { border-color: var(--ot-brand-opacity); }
+.e-691b81f7 > .holder.brand > .circle::before { border-color: var(--ot-brand-opacity); }
 .e-691b81f7 > .holder.brand > .circle > .spinner { color: var(--ot-brand); }
+
+.e-691b81f7 > .holder.blue > .circle { border-color: var(--ot-blue-opacity); }
+.e-691b81f7 > .holder.blue > .circle::before { border-color: var(--ot-blue-opacity); }
 .e-691b81f7 > .holder.blue > .circle > .spinner { color: var(--ot-blue); }
+
+.e-691b81f7 > .holder.red > .circle { border-color: var(--ot-red-opacity); }
+.e-691b81f7 > .holder.red > .circle::before { border-color: var(--ot-red-opacity); }
 .e-691b81f7 > .holder.red > .circle > .spinner { color: var(--ot-red); }
+
+.e-691b81f7 > .holder.orange > .circle { border-color: var(--ot-orange-opacity); }
+.e-691b81f7 > .holder.orange > .circle::before { border-color: var(--ot-orange-opacity); }
 .e-691b81f7 > .holder.orange > .circle > .spinner { color: var(--ot-orange); }
+
+.e-691b81f7 > .holder.green > .circle { border-color: var(--ot-green-opacity); }
+.e-691b81f7 > .holder.green > .circle::before { border-color: var(--ot-green-opacity); }
 .e-691b81f7 > .holder.green > .circle > .spinner { color: var(--ot-green); }
 
-/* Text */
+/* ===== BACKGROUNDS ===== */
 
-.e-691b81f7 > .holder > .text
+.e-691b81f7.bg-1 { background: var(--ot-bg-1); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-2 { background: var(--ot-bg-2); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-3 { background: var(--ot-bg-3); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-4 { background: var(--ot-bg-4); border-radius: var(--ot-radius-l); }
+
+/* ===== BORDERS ===== */
+
+.e-691b81f7.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-691b81f7.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-691b81f7.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-691b81f7.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZES ===== */
+
+.e-691b81f7.size-s
 {
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
+	min-height: 200px;
+	padding: var(--ot-spacing-m);
+}
+
+.e-691b81f7.size-s > .holder > .circle { width: 56px; height: 56px; }
+.e-691b81f7.size-s > .holder > .circle > .spinner { font-size: 24px; }
+.e-691b81f7.size-s > .holder > .text { font-size: 12px; }
+
+.e-691b81f7.size-m > .holder > .circle { width: 80px; height: 80px; }
+
+.e-691b81f7.size-l
+{
+	min-height: 440px;
 }
 
-/* Animations */
+.e-691b81f7.size-l > .holder > .circle { width: 104px; height: 104px; }
+.e-691b81f7.size-l > .holder > .circle > .spinner { font-size: 44px; }
+.e-691b81f7.size-l > .holder > .text { font-size: 15px; }
+
+/* ===== ANIMATIONS ===== */
 
 @keyframes e-691b81f7-spin
 {
@@ -65,15 +136,15 @@
 	to { transform: rotate(360deg); }
 }
 
+@keyframes e-691b81f7-pulse
+{
+	0%, 100% { opacity: 1; transform: scale(1); }
+	50% { opacity: 0.5; transform: scale(1.02); }
+}
+
 /* Auto height */
 
 .e-691b81f7.auto
 {
 	min-height: auto;
 }
-
-@keyframes e-691b81f7-pulse
-{
-	0%, 100% { opacity: 1; }
-	50% { opacity: 0.4; }
-}

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' });