@dammgo/vena-visual-engine 0.2.7 → 0.3.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +32 -13
  2. package/dist/core/index.d.ts +7 -0
  3. package/dist/core/index.js +31 -1
  4. package/dist/index.js +8 -4
  5. package/dist/protocols/erpbsg.js +15 -15
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -1,31 +1,31 @@
1
1
  # VENA Visual Engine 🚀
2
2
 
3
- > **"Engineering as Art. Sovereignty as Standard."**
3
+ > **"Reality-Aware Infrastructure. Engineering as Art."**
4
4
 
5
5
  [![Version](https://img.shields.io/npm/v/@dammgo/vena-visual-engine?color=E91E63&label=VVE)](https://www.npmjs.com/package/@dammgo/vena-visual-engine)
6
6
  [![License](https://img.shields.io/npm/l/@dammgo/vena-visual-engine?color=00d4ff)](https://github.com/dammgo/vena-visual-engine/blob/main/LICENSE)
7
7
 
8
8
  ## 🧬 The Manifesto
9
9
 
10
- The web has been colonized by the generic. AI-generated interfaces have commoditized "good taste," filling our screens with predictable shadows, rounded corners, and a lack of character.
10
+ The web has been colonized by the generic. **VENA Visual Engine (VVE)** is a rebellion. It is not another CSS framework for "friendly" apps. It is a **Sovereign Infrastructure** for building digital interfaces that reflect precision, authority, and longevity.
11
11
 
12
- **VENA Visual Engine (VVE)** is a rebellion. It is not another CSS framework for "friendly" apps. It is a **Sovereign Infrastructure** for building digital interfaces that reflect precision, authority, and longevity. We don't build "UI components"; we build **Visual Protocols**.
12
+ Starting from **v0.3.0**, VVE evolves from a static preset to a **Reality-Aware Engine** that understands the observer's environment and the developer's intention.
13
13
 
14
14
  ---
15
15
 
16
16
  ## 🏛️ Axioms of the Engine
17
17
 
18
- 1. **Precision over Organic:** We reject the "round-everything" culture. Surfaces should feel like precision-cut steel.
19
- 2. **Hardware Awareness:** Altitude-conscious design. We optimize for the screen where the work happens (Laptops), not just the desk where we design (2K/4K).
20
- 3. **Context Sovereignty:** The engine differentiates between Application, Landing, and Laboratory realities, injecting specific infrastructure resets for each.
21
- 4. **The Active Pulse:** Interfaces are live signals. We treat the rendering process as a vital pulse of data.
18
+ 1. **Holistic Responsiveness:** We don't just look at width. We look at **Intention** and **Altitude**. Components shrink and expand based on the total available surface area (Width + Height).
19
+ 2. **The Reality Categories (VRC):** The engine differentiates between **App**, **Content**, and **Landing** realities, injecting specific mathematical formulas for typography and spacing in each.
20
+ 3. **Layout Sovereignty:** VVE provides the **DNA (The Skin)**, but the **Page owns the Skeleton**. Structural positioning (Flex, Grid, Height) remains local to ensure perfect compiler visibility and flexibility.
21
+ 4. **Precision over Organic:** We reject the "round-everything" culture. Surfaces should feel like precision-cut steel, calibrated for professional hardware.
22
22
 
23
23
  ---
24
24
 
25
25
  ## 🛠️ Installation
26
26
 
27
27
  ```bash
28
- npm install @dammgo/vena-visual-engine unocss
28
+ npm install @dammgo/vena-visual-engine@alpha unocss
29
29
  ```
30
30
 
31
31
  ## 📡 Quick Start (UnoCSS)
@@ -43,20 +43,39 @@ export default defineConfig({
43
43
  protocol: 'erpbsg' // Options: 'erpbsg' | 'dammgo' | 'vena' | 'kode-reboot'
44
44
  }),
45
45
  ],
46
+ content: {
47
+ pipeline: {
48
+ include: [
49
+ 'src/**/*.{js,ts,jsx,tsx}',
50
+ 'node_modules/@dammgo/vena-visual-engine/dist/**/*.js', // Required for Shortcut resolution
51
+ ],
52
+ },
53
+ },
46
54
  })
47
55
  ```
48
56
 
49
57
  ---
50
58
 
59
+ ## 🎭 Activating Realities
60
+
61
+ To use the elastic units of VVE, wrap your container with a **Reality Class**:
62
+
63
+ - **`.vve-reality-app`**: Prioritizes height. Ideal for Logins/Dashboards. Everything fits in 600px altitude.
64
+ - **`.vve-reality-content`**: Prioritizes width and readability. Ideal for Documentation/Blogs.
65
+ - **`.vve-reality-landing`**: Prioritizes monumental impact. Ideal for Marketing.
66
+
67
+ ---
68
+
51
69
  ## 📚 Documentation
52
70
 
53
71
  Detailed guides for our sovereign syntax:
54
72
 
55
- - [**Architecture Blueprint**](./docs/ARCHITECTURE.md): Understand the factory and the DNA injection.
56
- - [**VVE Specification**](./docs/VVE_SPECIFICATION.md): The three realities (App, Landing, Blog).
57
- - [**Protocol Handbook**](./docs/PROTOCOL_HANDBOOK.md): How to register and build a new visual identity.
58
- - [**Visual Philosophy**](./docs/PHILOSOPHY.md): The ergonomic and aesthetic ethics of the engine.
73
+ - [**Architecture Blueprint**](./docs/ARCHITECTURE.md): The multi-protocol factory and the Elastic Root.
74
+ - [**Reality Manual**](./docs/REALITY_MANUAL.md): How to implement intentions and use VENA Units.
75
+ - [**Technical Specification**](./docs/SPECIFICATION.md): The mathematical formulas behind VRC.
76
+ - [**Protocol Handbook**](./docs/PROTOCOL_HANDBOOK.md): Registering and building new brand identities.
77
+ - [**Changelog**](./docs/CHANGELOG.md): Tracking the visual revolution.
59
78
 
60
79
  ---
61
- **dammgo labs** - _Engineering Longevity._
80
+ **dammgo labs** - _Engineering Reality._
62
81
  © 2026. Distributed under the MIT License.
package/dist/core/index.d.ts CHANGED
@@ -25,4 +25,11 @@ export declare const coreTheme: {
25
25
  };
26
26
  };
27
27
  export declare const corePresets: (import("unocss").Preset<import("unocss").PresetMiniTheme> | import("unocss").Preset<any>)[];
28
+ /**
29
+ * Shared Shortcuts (DNA Only)
30
+ */
28
31
  export declare const coreShortcuts: string[][];
32
+ /**
33
+ * Reality Category Preflights (The Elastic Root)
34
+ */
35
+ export declare const realityPreflights = "\n :root {\n /* Safe Default Multipliers */\n --vve-u-font: 1rem;\n --vve-u-gap: 1rem;\n }\n\n /* Reality: App (The Vault) - Height Priority */\n .vve-reality-app {\n --vve-u-font: clamp(0.85rem, 4.5vh, 1.15rem);\n --vve-u-gap: clamp(0.5rem, 2vh, 1.5rem);\n }\n\n /* Reality: Content (The Atlas) - Width/Reading Priority */\n .vve-reality-content {\n --vve-u-font: clamp(1rem, 1.2vw, 1.25rem);\n --vve-u-gap: clamp(1rem, 2vw, 2.5rem);\n }\n\n /* Reality: Landing (The Stage) - Aggressive Impact */\n .vve-reality-landing {\n --vve-u-font: clamp(1.1rem, 2vh + 1vw, 1.5rem);\n --vve-u-gap: clamp(1.5rem, 4vh, 4rem);\n }\n";
package/dist/core/index.js CHANGED
@@ -36,10 +36,40 @@ export const corePresets = [
36
36
  },
37
37
  }),
38
38
  ];
39
+ /**
40
+ * Shared Shortcuts (DNA Only)
41
+ */
39
42
  export const coreShortcuts = [
40
43
  ['bos-surface', 'bg-bos-surface/40 backdrop-blur-md border border-bos-armor/30 rounded-bos-sm shadow-none'],
41
44
  ['precision-bracket', 'relative before:content-[""] before:absolute before:-top-1 before:-left-1 before:w-2 before:h-2 before:border-t-1 before:border-l-1 before:border-bos-pink after:content-[""] after:absolute after:-bottom-1 after:-right-1 after:w-2 after:h-2 after:border-b-1 after:border-r-1 after:border-bos-pink'],
42
45
  ['infra-grid', 'relative before:content-[""] before:absolute before:inset-0 before:opacity-0 before:pointer-events-none before:[background-image:radial-gradient(#f8fafc_1px,transparent_1px)] before:[background-size:10px_10px] focus-within:before:opacity-10 before:transition-opacity'],
43
46
  ['synapse-line', 'h-1 bg-white/5 relative overflow-hidden after:content-[""] after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-bos-pink after:to-transparent after:animate-pulse'],
44
- ['bos-input-base', 'bos-surface infra-grid px-4 py-3 font-mono text-sm bg-transparent outline-none focus:precision-bracket transition-all placeholder:opacity-20'],
45
47
  ];
48
+ /**
49
+ * Reality Category Preflights (The Elastic Root)
50
+ */
51
+ export const realityPreflights = `
52
+ :root {
53
+ /* Safe Default Multipliers */
54
+ --vve-u-font: 1rem;
55
+ --vve-u-gap: 1rem;
56
+ }
57
+
58
+ /* Reality: App (The Vault) - Height Priority */
59
+ .vve-reality-app {
60
+ --vve-u-font: clamp(0.85rem, 4.5vh, 1.15rem);
61
+ --vve-u-gap: clamp(0.5rem, 2vh, 1.5rem);
62
+ }
63
+
64
+ /* Reality: Content (The Atlas) - Width/Reading Priority */
65
+ .vve-reality-content {
66
+ --vve-u-font: clamp(1rem, 1.2vw, 1.25rem);
67
+ --vve-u-gap: clamp(1rem, 2vw, 2.5rem);
68
+ }
69
+
70
+ /* Reality: Landing (The Stage) - Aggressive Impact */
71
+ .vve-reality-landing {
72
+ --vve-u-font: clamp(1.1rem, 2vh + 1vw, 1.5rem);
73
+ --vve-u-gap: clamp(1.5rem, 4vh, 4rem);
74
+ }
75
+ `;
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { definePreset } from 'unocss';
2
- import { coreTheme, coreShortcuts, corePresets } from './core';
2
+ import { coreTheme, coreShortcuts, corePresets, realityPreflights } from './core';
3
3
  import { erpbsgShortcuts, erpbsgPreflights, erpbsgTheme } from './protocols/erpbsg';
4
4
  import { dammgoShortcuts } from './protocols/dammgo';
5
5
  import { venaShortcuts, venaRules } from './protocols/vena';
@@ -24,7 +24,7 @@ export const presetVena = definePreset((options = {}) => {
24
24
  };
25
25
  const typographyShortcuts = [
26
26
  // Triple Vertical Shielding Protocol (Altitude-Aware)
27
- ['bos-title-hero', 'font-brand font-900 text-5xl lg:text-6xl font-black tracking-tighter uppercase leading-[0.9] text-bos-white [@media(min-height:600px)]:text-6xl [@media(min-height:600px)]:xl:text-7xl [@media(min-height:850px)]:text-8xl [@media(min-height:1000px)]:text-[9.5rem]'],
27
+ ['bos-title-hero', 'font-brand font-900 font-black tracking-tighter uppercase leading-[0.9] text-bos-white [font-size:calc(var(--vve-u-font)*5)] [@media(min-height:850px)]:[font-size:calc(var(--vve-u-font)*7)] [@media(min-height:1000px)]:[font-size:calc(var(--vve-u-font)*9)]'],
28
28
  ['bos-title-terminal', 'font-brand font-900 text-4xl md:text-6xl tracking-tighter uppercase leading-none text-bos-white'],
29
29
  ['bos-title-section', 'font-brand font-900 text-[10px] text-bos-gray uppercase tracking-[0.4em] opacity-40'],
30
30
  ];
@@ -32,8 +32,12 @@ export const presetVena = definePreset((options = {}) => {
32
32
  const protocolRules = {
33
33
  vena: venaRules,
34
34
  };
35
- // --- 4. PREFLIGHT INJECTION ---
36
- const preflights = [];
35
+ // --- 4. PREFLIGHT INJECTION (THE REALITY ENGINE) ---
36
+ const preflights = [
37
+ {
38
+ getCSS: () => realityPreflights // Global Reality Variables
39
+ }
40
+ ];
37
41
  if (protocol === 'erpbsg') {
38
42
  preflights.push({
39
43
  getCSS: () => erpbsgPreflights
package/dist/protocols/erpbsg.js CHANGED
@@ -6,25 +6,25 @@ export const erpbsgTheme = {
6
6
  }
7
7
  };
8
8
  export const erpbsgShortcuts = [
9
- // --- IDENTIDAD TIPOGRÁFICA (SEGURA POR DISEÑO) ---
10
- // Se reduce el techo de la escala a 4xl para evitar desbordes en pantallas de baja altura.
11
- ['erpbsg-title-access', 'text-xl xs:text-2xl sm:text-3xl lg:text-4xl font-brand font-black text-bos-white tracking-[-0.05em] uppercase leading-[0.9] whitespace-nowrap'],
12
- ['erpbsg-technical-label', 'text-[10px] font-brand font-black text-bos-pink uppercase tracking-[0.4em] block'],
13
- ['erpbsg-technical-sub', 'font-ui text-[9px] text-bos-gray/40 uppercase tracking-[0.3em]'],
14
- // --- COMPONENTES ATÓMICOS (SIN MÁRGENES EXTERNOS) ---
15
- ['erpbsg-card', 'bos-surface p-6 hover:border-bos-pink/30 transition-all duration-500'],
16
- ['erpbsg-input', 'w-full bg-bos-white border border-white/10 rounded-bos-sm px-6 py-4 text-bos-slate font-bold placeholder:text-bos-slate/30 focus:outline-none focus:ring-4 focus:ring-bos-pink/10 transition-all z-10 relative'],
17
- ['erpbsg-button', 'px-10 py-5 rounded-bos-sm bg-bos-pink text-bos-white font-brand font-900 uppercase tracking-[0.3em] text-[10px] hover:bg-bos-white hover:text-bos-pink transition-all duration-500 shadow-2xl relative overflow-hidden'],
9
+ // --- IDENTIDAD TIPOGRÁFICA ELÁSTICA (v0.3.0) ---
10
+ // Los tamaños ahora dependen del multiplicador --vve-u-font definido por la realidad.
11
+ ['erpbsg-title-access', 'font-brand font-black text-bos-white tracking-[-0.05em] uppercase leading-[0.9] whitespace-nowrap [font-size:calc(var(--vve-u-font)*3.5)]'],
12
+ ['erpbsg-technical-label', 'font-brand font-black text-bos-pink uppercase tracking-[0.4em] block [font-size:calc(var(--vve-u-font)*0.7)]'],
13
+ ['erpbsg-technical-sub', 'font-ui text-bos-gray/40 uppercase tracking-[0.3em] [font-size:calc(var(--vve-u-font)*0.65)]'],
14
+ // --- COMPONENTES ATÓMICOS ---
15
+ ['erpbsg-card', 'bos-surface hover:border-bos-pink/30 transition-all duration-500 [padding:calc(var(--vve-u-gap)*1.5)]'],
16
+ ['erpbsg-input', 'w-full bg-bos-white border border-white/10 rounded-bos-sm text-bos-slate font-bold placeholder:text-bos-slate/30 focus:outline-none focus:ring-4 focus:ring-bos-pink/10 transition-all z-10 relative [padding:calc(var(--vve-u-gap)*1.2)] [font-size:calc(var(--vve-u-font)*0.9)]'],
17
+ ['erpbsg-button', 'rounded-bos-sm bg-bos-pink text-bos-white font-brand font-900 uppercase tracking-[0.3em] hover:bg-bos-white hover:text-bos-pink transition-all duration-500 shadow-2xl relative overflow-hidden [padding:calc(var(--vve-u-gap)*1.5)] [font-size:calc(var(--vve-u-font)*0.75)]'],
18
18
  ['erpbsg-gradient-text', 'text-transparent bg-clip-text bg-gradient-to-r from-bos-pink to-bos-indigo'],
19
- // --- NAVEGACIÓN Y COMANDO (IDENTIDAD PURA) ---
19
+ // --- NAVEGACIÓN Y COMANDO ---
20
20
  ['erpbsg-button-manual', 'w-full p-1 border-b border-white/[0.03] hover:border-bos-pink/30 transition-all duration-500 bg-transparent'],
21
- ['erpbsg-button-manual-content', 'flex items-center justify-between py-4 px-2'],
22
- ['erpbsg-button-manual-label', 'font-brand font-black text-[10px] text-bos-gray/40 uppercase tracking-widest group-hover:text-bos-white transition-colors'],
23
- ['erpbsg-button-manual-sub', 'font-ui text-[9px] text-bos-gray/20 uppercase tracking-wider group-hover:text-bos-gray/60 transition-colors'],
21
+ ['erpbsg-button-manual-content', 'flex items-center justify-between [padding-block:calc(var(--vve-u-gap)*1.2)] px-2'],
22
+ ['erpbsg-button-manual-label', 'font-brand font-black text-bos-gray/40 uppercase tracking-widest group-hover:text-bos-white transition-colors [font-size:calc(var(--vve-u-font)*0.75)]'],
23
+ ['erpbsg-button-manual-sub', 'font-ui text-bos-gray/20 uppercase tracking-wider group-hover:text-bos-gray/60 transition-colors [font-size:calc(var(--vve-u-font)*0.65)]'],
24
24
  ['erpbsg-button-manual-icon', 'w-8 h-8 rounded-full border border-white/[0.03] flex items-center justify-center text-bos-gray/20 group-hover:border-bos-pink/30 group-hover:bg-bos-pink/5 group-hover:text-bos-pink transition-all'],
25
- ['erpbsg-button-back', 'flex items-center gap-3 text-bos-gray/40 hover:text-bos-white transition-all bg-transparent border-none p-0 outline-none'],
25
+ ['erpbsg-button-back', 'flex items-center gap-3 text-bos-gray/40 hover:text-bos-white transition-all bg-transparent border-none p-0 outline-none [margin-bottom:calc(var(--vve-u-gap)*2)]'],
26
26
  ['erpbsg-button-back-icon', 'w-6 h-6 rounded-full border border-white/[0.03] flex items-center justify-center text-bos-gray/20 group-hover:border-bos-pink/30 group-hover:text-bos-pink transition-all'],
27
- ['erpbsg-button-back-text', 'text-[10px] font-brand font-black uppercase tracking-[0.3em]'],
27
+ ['erpbsg-button-back-text', 'font-brand font-black uppercase tracking-[0.3em] [font-size:calc(var(--vve-u-font)*0.75)]'],
28
28
  ];
29
29
  export const erpbsgPreflights = `
30
30
  /* erpbsg Protocol Base Resets */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dammgo/vena-visual-engine",
3
- "version": "0.2.7",
4
- "description": "The Sovereign Visual Engine. A rebellion against generic AI-generated interfaces, built for infrastructure longevity.",
3
+ "version": "0.3.0-alpha.2",
4
+ "description": "The Sovereign Visual Engine. Reality-Aware Infrastructure for the erpbsg ecosystem.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",