move.gl 0.0.1

package/scss/mixins/scroll/_scrollbar.scss

@@ -0,0 +1,249 @@
+
+
+// ============================================================================
+// Scrollbar
+// ============================================================================
+@use "../variables" as *;
+@use "../mixins" as *;
+
+/*
+::-webkit-scrollbar              {}
+::-webkit-scrollbar-button       {}
+::-webkit-scrollbar-track        {}
+::-webkit-scrollbar-track-piece  {}
+::-webkit-scrollbar-thumb        {}
+::-webkit-scrollbar-corner       {}
+::-webkit-resizer                {}
+https://gist.github.com/JuanMaRuiz/7927982
+
+
+::-webkit-scrollbar               — the entire scrollbar.
+::-webkit-scrollbar-button        — the buttons on the scrollbar (arrows pointing upwards and downwards).
+::-webkit-scrollbar-thumb         — the draggable scrolling handle.
+::-webkit-scrollbar-track         — the track (progress bar) of the scrollbar.
+::-webkit-scrollbar-track-piece   — the part of the track (progress bar) not covered by the handle.
+::-webkit-scrollbar-corner        — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
+::-webkit-resizer                 — the draggable resizing handle that appears at the bottom corner of some elements.
+*/
+
+
+// width
+*::-webkit-scrollbar {
+    // width: $q * 2;
+    // //width: 0px;
+    // background: transparent;
+    // overflow: visible;
+    // background-color: transparent;
+    // display: none;
+    width: 12px;
+
+    // width: 3px !important;
+    background-color: transparent;
+}
+  
+// Track
+*::-webkit-scrollbar-track {
+    //background: $color_01; 
+    // opacity: 0.0;
+    // // opacity: 1.0;
+    // background-color: transparent;
+    // //width: 0px;
+    // //background: rgba(0, 0, 0, 0.2);
+    // display: none;
+    // -webkit-box-shadow: none;
+    
+    // display: none;
+    -webkit-box-shadow: none !important;
+    background-color: transparent;
+}
+
+// Track Piece
+*::-webkit-scrollbar-track-piece{
+    //display: none;
+    // width: 8px;
+    // display: none;
+
+    -webkit-border-radius: 6px;
+}
+
+// Handle
+*::-webkit-scrollbar-thumb {
+    //height:30px;
+    //background-color: rgba(0, 0, 0, 0.2);
+    //border: solid $color_02;
+    // border-radius: $q;
+    // opacity: 0.5;
+    //  display: block;
+    // background-color: transparent;
+
+    // background:$color_02; 
+    // -webkit-box-shadow: none;
+}
+
+*::-webkit-scrollbar-thumb:window-inactive {
+    background: none;
+}
+
+// Handle on hover
+*::-webkit-scrollbar-thumb:hover {
+  //background:$color_02; 
+  //opacity: 1;
+
+}
+
+
+::-webkit-scrollbar-thumb:vertical {
+    ///height: 50px;
+    //background-color: #333333;
+    //-webkit-border-radius: 8px;
+}
+
+
+
+
+::-webkit-scrollbar-button:start:decrement,
+body::-webkit-scrollbar-button:end:increment {
+    //display: block;
+    //height: 0;
+    //background-color: transparent;
+}
+
+
+
+
+// SCSS Mixin for Custom Scrollbars
+// This mixin allows for customization of the scrollbar's appearance. Note that scrollbar customization is primarily supported in WebKit-based browsers (like Chrome and Safari) and partially in Firefox.
+/// @name custom-scrollbar
+/// Customizes the appearance of scrollbars in WebKit browsers.
+/// @param {Color} $thumb-color - The color of the scrollbar thumb.
+/// @param {Color} $track-color - The color of the scrollbar track.
+/// @param {Number|Unit} $width - The width of the scrollbar (default: 8px).
+/// @example scss - Usage
+///   @include custom-scrollbar(#888, #ccc, 10px);
+@mixin custom-scrollbar($width: 12px, $track-color: #f1f1f1, $thumb-color: #888) {
+    // For WebKit-based browsers
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $track-color;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $thumb-color;
+        border-radius: $width / 2;
+        border: 2px solid $track-color;
+        &:hover {
+        background: darken($thumb-color, 10%);
+        }
+    }
+
+    // For Firefox
+    scrollbar-width: thin;
+    scrollbar-color: $thumb-color $track-color;
+
+    // For other browsers, there's limited support for customization.
+}
+
+
+// Usage Example
+// You can apply this mixin to any element that has overflow content, such as a container with scrollable content.
+
+
+.scrollable-content {
+    @include custom-scrollbar(10px, #e0e0e0, #4A4A4A); // Customize the width, track color, and thumb color
+    max-height: 300px;
+    overflow-y: scroll;
+}
+
+
+
+
+
+// Extended Custom Scrollbar Mixin
+// This extended version includes additional styling options for the scrollbar thumb, including hover and active states, and introduces a more detailed approach to styling the scrollbar track and corner.
+
+
+@mixin extended-custom-scrollbar(
+    $width: 12px,
+    $track-color: #f1f1f1,
+    $thumb-color: #888,
+    $thumb-hover-color: darken($thumb-color, 10%),
+    $thumb-active-color: darken($thumb-color, 20%)
+) {
+    // Scrollbar track
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width; // For horizontal scrollbars
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $track-color;
+        border-radius: $width / 2;
+        box-shadow: inset 0 0 5px grey; // Optional: adds inset shadow to the track
+    }
+
+    // Scrollbar thumb
+    &::-webkit-scrollbar-thumb {
+        background: $thumb-color;
+        border-radius: $width / 2;
+        border: 3px solid $track-color; // Creates a margin between the track and thumb
+
+        &:hover {
+        background: $thumb-hover-color;
+        }
+
+        &:active {
+        background: $thumb-active-color;
+        }
+    }
+
+    // Scrollbar corner (where horizontal and vertical scrollbars meet)
+    &::-webkit-scrollbar-corner {
+        background: $track-color;
+    }
+
+    // Firefox
+    scrollbar-width: auto;
+    scrollbar-color: $thumb-color $track-color;
+
+    // More detailed styling for Firefox can be achieved with properties like `scrollbar-width` and `scrollbar-color`
+}
+// Usage Example with Extended Options
+// Apply this mixin to any scrollable element to enhance its appearance with a custom scrollbar that includes interactive states for better user engagement.
+
+
+.detailed-scrollable-content {
+    @include extended-custom-scrollbar(8px, #eaeaea, #bcbcbc, #a8a8a8, #989898);
+    max-height: 400px;
+    overflow-y: auto;
+}
+// Advanced Customization for Specific Elements
+// You can also target specific parts of the scrollbar for even more detailed customization. For instance, you might want to style only the vertical or horizontal scrollbar, or apply unique styles to the scrollbar buttons (arrows), which some browsers display.
+
+
+.unique-vertical-scrollbar {
+    &::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, #ff8a00, #e52e71);
+        border-radius: 5px;
+    }
+}
+
+.unique-horizontal-scrollbar {
+    &::-webkit-scrollbar {
+        height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(90deg, #ff8a00, #e52e71);
+        border-radius: 5px;
+    }
+}
+
+

package/scss/mixins/transforms/_flip.scss

@@ -0,0 +1,76 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Flip Transforms Mixin Module
+/// ===========================================================================
+/// This module provides mixins for flipping elements in various directions,
+/// such as horizontally, vertically, or both. These mixins can be used to 
+/// easily apply flip transforms throughout your project.
+/// 
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Mixin for flipping elements horizontally.
+/// Applies a horizontal flip by scaling the element along the X-axis.
+/// 
+/// @name transform_flip_horizontal
+/// @example scss - Usage
+///   .transform_flip_horizontal { @include transform_flip_horizontal(); }
+///
+@mixin transform_flip_horizontal {
+    transform: scale(-1, 1);
+}
+
+
+///
+/// Mixin for flipping elements vertically.
+/// Applies a vertical flip by scaling the element along the Y-axis.
+/// 
+/// @name transform_flip_vertical
+/// @example scss - Usage
+///     .transform_flip_vertical { @include transform_flip_vertical(); }
+///
+@mixin transform_flip_vertical {
+    transform: scale(1, -1);
+}
+
+
+///
+/// Mixin for flipping elements both horizontally and vertically.
+/// Combines horizontal and vertical flips to mirror the element.
+/// 
+/// @name transform_flip_both
+/// @example scss - Usage
+///   .transform_flip_both { @include transform_flip_both(); }
+///
+@mixin transform_flip_both {
+    transform: scale(-1, -1);
+}

package/scss/mixins/transforms/_index.scss

@@ -0,0 +1,23 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Transforms Mixin Module
+/// ===========================================================================
+/// This module provides reusable mixins for applying transformations such as 
+/// rotations and flips to elements. It includes mixins for rotating elements 
+/// by a specified degree, as well as predefined classes for common rotation 
+/// angles. This module is designed to facilitate the application of CSS 
+/// transforms in a consistent and maintainable manner throughout your project.
+/// 
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+

package/scss/mixins/transforms/_matrix.scss

@@ -0,0 +1 @@
+https://developer.mozilla.org/en-US/docs/Web/CSS/transform

package/scss/mixins/transforms/_perspective.scss

@@ -0,0 +1,11 @@
+///
+/// Mixin for setting perspective on elements, useful for 3D transforms.
+/// 
+/// @mixin perspective
+/// @param {Number} $value [$default-perspective] - The perspective value for 3D transformations.
+/// @example scss - Usage
+///   .icon-perspective { @include perspective(1000px); } // Applies a perspective of 1000px
+///
+@mixin perspective($value: $default-perspective) {
+    perspective: $value;
+}

package/scss/mixins/transforms/_rotate.scss

@@ -0,0 +1,101 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Rotate Transforms Mixin Module
+/// ===========================================================================
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Mixin for rotating elements by a specified degree.
+/// Applies a CSS rotation transform to the element.
+///
+/// @name transform_rotate
+/// @param {Number} $degrees [0deg] - The degree to rotate the element.
+/// @example scss - Usage
+///   .icon_rotate { @include transform_rotate(90deg); } // Rotates icon by 90 degrees
+///
+@mixin transform_rotate($degrees: 0deg) {
+    transform: rotate($degrees);
+}
+
+
+///
+/// Mixin for rotating elements based on a dynamic value from a CSS variable.
+/// This allows for rotations that can be adjusted at runtime using CSS variables.
+///
+/// @name transform_rotate_dynamic
+/// @param {String} $variable [--rotation-angle] - The CSS variable to use for dynamic rotation.
+/// @example scss - Usage
+///   .transform_rotate_dynamic { @include transform_rotate_dynamic('--my_custom_rotation'); }
+///
+@mixin transform_rotate_dynamic($variable: '--rotation_angle') {
+    transform: rotate(var(#{$variable}));
+}
+
+
+
+
+///
+/// Mixin for rotating elements along the X-axis.
+/// 
+/// @name transform_rotate_x
+/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the X-axis.
+/// @example scss - Usage
+///   .icon-transform_rotate_x { @include transform_rotate_x(45deg); } // Rotates the element 45 degrees along the X-axis
+///
+@mixin transform_rotate_x($degrees: $default-rotation) {
+    transform: rotateX($degrees);
+}
+
+///
+/// Mixin for rotating elements along the Y-axis.
+/// 
+/// @name transform_rotate_y
+/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the Y-axis.
+/// @example scss - Usage
+///   .icon-transform_rotate_y { @include transform_rotate_y(45deg); } // Rotates the element 45 degrees along the Y-axis
+///
+@mixin transform_rotate_y($degrees: $default-rotation) {
+    transform: rotateY($degrees);
+}
+
+///
+/// Mixin for rotating elements along the Z-axis.
+/// 
+/// @name transform_rotate_z
+/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the Z-axis.
+/// @example scss - Usage
+///   .icon-transform_rotate_z { @include transform_rotate_z(45deg); } // Rotates the element 45 degrees along the Z-axis
+///
+@mixin transform_rotate_z($degrees: $default-rotation) {
+    transform: rotateZ($degrees);
+}

package/scss/mixins/transforms/_scale.scss

@@ -0,0 +1,11 @@
+///
+/// Mixin for scaling elements by a specified factor.
+/// 
+/// @mixin scale
+/// @param {Number} $factor [1] - The scaling factor.
+/// @example scss - Usage
+///   .icon_scale { @include scale(1.5); } // Scales the element by 1.5
+///
+@mixin scale($factor: 1) {
+    transform: scale($factor);
+}

package/scss/mixins/transforms/_skew.scss

@@ -0,0 +1,13 @@
+
+///
+/// Mixin for skewing elements by specified angles along X and Y axes.
+/// 
+/// @mixin skew
+/// @param {Number} $x [$default-skew] - The angle to skew along the X-axis.
+/// @param {Number} $y [$default-skew] - The angle to skew along the Y-axis.
+/// @example scss - Usage
+///   .icon-skew { @include skew(10deg, 5deg); } // Skews the element 10deg on X-axis and 5deg on Y-axis
+///
+@mixin skew($x: $default-skew, $y: $default-skew) {
+    transform: skew($x, $y);
+}

package/scss/mixins/transforms/_translate.scss

@@ -0,0 +1,13 @@
+
+///
+/// Mixin for translating elements by a specified distance along X and Y axes.
+/// 
+/// @mixin translate
+/// @param {Number} $x [$default-translate] - The distance to translate along the X-axis.
+/// @param {Number} $y [$default-translate] - The distance to translate along the Y-axis.
+/// @example scss - Usage
+///   .icon-translate { @include translate(10px, 20px); } // Moves the element 10px right and 20px down
+///
+@mixin translate($x: $default-translate, $y: $default-translate) {
+    transform: translate($x, $y);
+}

package/scss/mixins/transitions/_transition.scss

@@ -0,0 +1,13 @@
+/// 
+/// Applies a transition to an element.
+/// 
+/// @name transition
+/// @param {String} $property - The CSS property to transition.
+/// @param {String} $duration - The duration of the transition (default: 0.3s).
+/// @param {String} $timing-function - The timing function of the transition (default: ease).
+/// @example scss - Usage
+///   @include transition('all', '0.3s', 'ease-in-out');
+/// 
+@mixin transition($property, $duration: 0.3s, $timing-function: ease) {
+    transition: #{$property} #{$duration} #{$timing-function};
+}

package/scss/variables/_animation.scss

@@ -0,0 +1,91 @@
+
+// ============================================================================
+// StyleScape | Animations | Base
+// ============================================================================
+
+@use "../dev" as *;
+
+
+// Default Variables
+// ----------------------------------------------------------------------------
+
+$animate_base_duration: 1s !default;
+$animate_base_duration_fast: 0.5s !default;
+$animate_base_duration_slow: 2s !default;
+
+$animate_base_delay: 0s !default;
+$animate_base_timing_function: ease-in-out !default;
+$animate_base_iteration_count: infinite !default;
+$animate_base_direction: normal !default;
+$animate_base_color_start: #ffffff !default;
+$animate_base_color_end: #000000 !default;
+$animate_base_color_glow_01: $N2405 !default;
+$animate_base_color_glow_02: $N3005 !default;
+$animate_base_color_glow_03: $N3605 !default;
+
+
+// ============================================================================
+
+$transition_duration_00:    0.5s;
+$transition_duration_01:    1.0s;
+$transition_duration_02:    1.5s;
+$transition_duration_03:    2.0s;
+
+
+
+$slideshow-time: 6s;
+
+
+
+// ============================================================================
+
+/// Default animation durations
+$animate-base-duration: 0.5s !default;
+$animate-base-duration-slow: 1s !default;
+$animate-base-duration-fast: 0.25s !default;
+
+/// Default timing functions
+$animate-base-timing-function: ease-in-out !default;
+$animate-base-timing-function-fade: cubic-bezier(.4, 0, .6, 1) !default;
+
+/// Default iteration counts
+$animate-base-iteration-count: infinite !default;
+
+/// Default scale values
+$animate-scale-base: 1 !default;
+$animate-scale-beat: 1.25 !default;
+$animate-scale-beat-fade: 1.125 !default;
+$animate-scale-beat-double-small: 0.8 !default;
+$animate-scale-beat-double-large: 1.5 !default;
+
+/// Default opacity values
+$animate-opacity-fade: 0.4 !default;
+
+/// Default angles
+$animate-angle-twist: 10deg !default;
+$animate-angle-gentle: 5deg !default;
+$animate-angle-rapid: 15deg !default;
+
+
+
+
+
+
+/// Animation Durations
+$animate-base-duration: 0.5s !default;
+$animate-base-duration-slow: 1s !default;
+$animate-base-duration-fast: 0.25s !default;
+
+/// Timing Functions
+$animate-base-timing-function: step-end !default;
+$animate-timing-function-rapid: steps(2, end) !default;
+$animate-timing-function-soft: ease-in-out !default;
+$animate-timing-function-alternate: linear !default;
+
+/// Iteration Count
+$animate-base-iteration-count: infinite !default;
+
+/// Opacity Levels
+$animate-opacity-start: 1 !default;
+$animate-opacity-blink: 0 !default;
+$animate-opacity-soft-blink: 0.3 !default;

package/ts/ARContent.ts

@@ -0,0 +1,27 @@
+/**
+ * @title Augmented Reality Content Manager
+ * @notice Manages the lifecycle and interaction of AR content in web applications.
+ * @dev Supports dynamic content updates, positioning, and user interaction in an augmented reality context.
+ */
+ class ARContentManager {
+    private scene: any; // Placeholder for an AR framework scene object, like AR.js or similar.
+
+    constructor(scene: any) {
+        this.scene = scene;
+    }
+
+    public addContent(modelUrl: string, lat: number, lon: number) {
+        console.log(`Adding AR content at [${lat}, ${lon}] from ${modelUrl}`);
+        // Here you'd add the model to the scene at the specified geolocation.
+    }
+
+    public updateContent(modelId: string, properties: any) {
+        console.log(`Updating content ${modelId} with properties`, properties);
+        // Update properties like scale, rotation, or interactive elements.
+    }
+
+    public removeContent(modelId: string) {
+        console.log(`Removing content ${modelId}`);
+        // Remove a model from the scene.
+    }
+}

package/ts/ARInteraction.ts

@@ -0,0 +1,34 @@
+/**
+ * @title AR Interaction Handler
+ * @notice Manages Augmented Reality overlays and interactions using the WebXR Device API.
+ * @dev Provides functionalities to place and interact with virtual objects in the real world through the user's camera.
+ */
+ class ARInteractionHandler {
+    private xrSession: XRSession | null = null;
+
+    constructor() {
+        this.checkARSupport();
+    }
+
+    private async checkARSupport() {
+        if (navigator.xr && await navigator.xr.isSessionSupported('immersive-ar')) {
+            console.log("AR is supported.");
+            this.initAR();
+        } else {
+            console.error("AR is not supported on this device.");
+        }
+    }
+
+    private async initAR() {
+        this.xrSession = await navigator.xr.requestSession('immersive-ar');
+        this.setupARSession();
+    }
+
+    private setupARSession() {
+        // Initialize and configure AR session settings
+    }
+
+    public addARObjectAt(x: number, y: number, z: number, object: HTMLElement) {
+        // Translate screen coordinates to real-world coordinates and add an object there
+    }
+}