💎 DOM.ts

Powerful DOM management & manipulation library pack

---

🚀 Features

• ⚡️ Ultra-fast DOM manipulation
• 🧩 Modular architecture
• 🏙️ Agate.UX: advanced UX/interaction sub-component
• 🧰 Generic API for flexible usage
• 🎨 Virtual UI/UX scaling & orientation
• 🖱️ Pointer events with virtual coordinates
• 🛠️ Custom CSS properties for advanced layouts

---

📦 Installation

npm install dom.ts
# or
yarn add dom.ts

---

🔌 Generic API

API documentation coming soon!

• Comprehensive API Reference
• Usage Examples
• TypeScript Support

---

🏙️ Agate.UX — Multi-dimensional UX/Interaction

Agate.UX is a next-gen sub-component for advanced UI/UX, designed for the "2REmembrance" generation (2025+).

🧩 Key Concepts

• Orientation-based transforms: calc(var(--orient, 0) * <A>) where <A> can be 100grad, 0.25turn, 90deg, etc.
• Self-centering elements: translate(-50%, -50%) with transform-origin: 0px 0px;
• Drag & center combined: translate(calc(var(--drag-x, 0px) - 50%), calc(var(--drag-y, 0px) - 50%))

How it works?

Coordinate Spaces

• Client-Space: page coordinate system
• Oriented-Space: virtual screen
• Algorithm-Space: internal logic

Degree Types

• 90deg-based (0°, 90°, 180°, 270°)
• Variable/Matrix-based

Event Pre-computation

• Client-Space Pointer Position
• Oriented-Space Pointer Position
• Algorithm-Space Pointer Position

---

🌟 Roadmap & Future Features

• Virtual UI/UX scaling
• Virtual screen orientation
• Pointer events adapted to virtual coordinates
• New and improved CSS rules
• API for fixed/independent oriented UI

---

📏 Scaling

Special versions of getBoundingClientRect, clientX, and clientY with virtual scaling support.

Scaling methods:

• CSS zoom (recommended)
• CSS scale (legacy)
• rem/em units

---

🖱️ Events

Custom ag-pointer* event wrappers with enhancements for virtualized UIs.

---

🎨 Custom CSS Properties

Oriented-Space	Client-Space	Implementation-Dependent
--os-inset-x	--cs-inset-x	--im-inset-x
--os-inset-y	--cs-inset-y	--im-inset-y
--os-drag-x	--cs-drag-x	--im-drag-x
--os-drag-y	--cs-drag-y	--im-drag-y
--os-size-x	--cs-size-x	--im-size-x
--os-size-y	--cs-size-y	--im-size-y
--os-self-size-x	--cs-self-size-x	--im-self-size-x
--os-self-size-y	--cs-self-size-y	--im-self-size-y
--os-offset-x	--cs-offset-x	--im-offset-x
--os-offset-y	--cs-offset-y	--im-offset-y

---

🛠️ Implementation Details

• Transforms: self-size-x/self-size-y = 100% (client-space)
• Insets/Sizing: self-size-x/self-size-y = offset parent size
• Transforms: default to client-space unless transformed
• Inline/Block: sizes/insets may swap in different writing modes

---

🏗️ Potential Implementations

• By layout:
  • Fixed/absolute (insets)
  • CSS Houdini (layout worklets)
• By orientation:
  • inline/block with writing-mode/direction
  • transform-based (rotate)
  • Mixed/combined approaches

---

🧭 Policy Concepts

• Use inset for semi-static, translate for dynamic (drag/animation) positioning.

---

🤝 Contributing

Pull requests, issues, and suggestions are welcome! See CONTRIBUTING.md for guidelines.

---

📄 License

MIT

---