@fest-lib/veela 0.1.1

package/src/scss/basic/design/_keyframes.scss

@@ -0,0 +1,163 @@
+@layer animations {
+    @mixin rotate-spin($name) {
+        @keyframes #{$name} {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+
+    @mixin fade-in($name) {
+        @keyframes #{$name} {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+    }
+
+    @mixin fade-in-up($name, $distance: 20px) {
+        @keyframes #{$name} {
+            from {
+                opacity: 0;
+                transform: translateY(#{$distance});
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    }
+
+    @mixin scale-in($name, $scale: 0.95) {
+        @keyframes #{$name} {
+            from {
+                opacity: 0;
+                transform: scale(#{$scale});
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    }
+
+    @mixin opacity-pulse($name, $max, $min) {
+        @keyframes #{$name} {
+            0%,
+            100% {
+                opacity: #{$max};
+            }
+            50% {
+                opacity: #{$min};
+            }
+        }
+    }
+
+    @mixin slide-in($name, $x, $y) {
+        @keyframes #{$name} {
+            from {
+                opacity: 0;
+                transform: translate(#{$x}, #{$y});
+            }
+            to {
+                opacity: 1;
+                transform: translate(0, 0);
+            }
+        }
+    }
+
+    @include rotate-spin(spin);
+    @include rotate-spin(app-shell-spin);
+    @include rotate-spin(viewer-spinner);
+    @include rotate-spin(explorer-spin);
+    @include rotate-spin(rs-spin);
+    @include rotate-spin(airpad-spin);
+    @include rotate-spin(view-spin);
+
+    @include fade-in(fadeIn);
+    @include fade-in(viewer-fade-in);
+
+    @include fade-in-up(fadeInUp);
+    @include fade-in-up(viewer-slide-in, 8px);
+    @include fade-in-up(slideInUp, 20px);
+
+    @include scale-in(scaleIn, 0.9);
+
+    @include opacity-pulse(viewer-pulse, 0.4, 0.8);
+    @include opacity-pulse(skeleton-pulse, 0.4, 0.8);
+    @include opacity-pulse(pulse, 1, 0.8);
+
+    @include slide-in(slide-in-top, 0, calc(-1 * var(--slide-distance, 1rem)));
+    @include slide-in(slide-in-right, var(--slide-distance, 1rem), 0);
+    @include slide-in(slide-in-bottom, 0, var(--slide-distance, 1rem));
+    @include slide-in(slide-in-left, calc(-1 * var(--slide-distance, 1rem)), 0);
+
+    @keyframes app-shell-status-enter {
+        from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(0.5rem);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+        }
+    }
+
+    @keyframes shell-status-fade-in {
+        from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(1rem);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+        }
+    }
+
+    @keyframes viewer-skeleton-shimmer {
+        0% {
+            background-position: -200% 0;
+        }
+        100% {
+            background-position: 200% 0;
+        }
+    }
+
+    @keyframes blink {
+        0%,
+        50% {
+            opacity: 1;
+        }
+        51%,
+        100% {
+            opacity: 0;
+        }
+    }
+
+    @keyframes card-pulse {
+        0%,
+        100% {
+            box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-blue) 50%, transparent), var(--card-shadow-base);
+        }
+        50% {
+            box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-blue) 20%, transparent), var(--card-shadow-base);
+        }
+    }
+
+    @keyframes card-hydrate-in {
+        from {
+            opacity: 0;
+            transform: translateY(8px) scale(0.98);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+}

package/src/scss/basic/design/_shapes.scss

@@ -0,0 +1,266 @@
+//@use "veela-lib" as *;
+
+//
+@layer ux-shapes {
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Base Shaped Element
+    // ─────────────────────────────────────────────────────────────────────────
+    .shaped {
+        // Layout
+        display: flex;
+        place-content: center;
+        place-items: center;
+        aspect-ratio: 1 / 1;
+        inline-size: stretch;
+        block-size: stretch;
+        padding: 1.25rem;
+
+        // Containment & Overflow
+        contain: strict;
+        overflow: hidden;
+
+        // Rendering
+        border-radius: 1.5rem;
+        //clip-path: var(--clip-path, none);
+        z-index: 1;
+
+        // Interaction
+        pointer-events: auto;
+        user-select: none;
+
+        // Animation
+        transition-behavior: allow-discrete;
+        transition: --background-tone-shift 0.2s ease-in-out, --icon-color 0.2s ease-in-out;
+
+        // Nested elements
+        & span, & ui-icon {
+            inline-size: stretch;
+            block-size: stretch;
+        }
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Dragging State
+    // ─────────────────────────────────────────────────────────────────────────
+    *[data-dragging] {
+        z-index: calc(100 + var(--z-index, 0)) !important;
+    }
+
+    //
+    // Shape Variants: Border-Radius Based (Simple)
+    // ─────────────────────────────────────────────────────────────────────────
+    *:not(:has(.shaped)),
+    *:not(.shaped) > *,
+    *:not(.shaped) .shaped {
+        //--clip-path: none;
+
+        // ─────────────────────────────────────────────────────────────────────────
+        // Base Shape Container
+        // ─────────────────────────────────────────────────────────────────────────
+        &[data-shape] {
+            contain: strict;
+            overflow: hidden;
+            aspect-ratio: 1 / 1;
+            pointer-events: auto;
+            touch-action: none;
+        }
+
+        // ─────────────────────────────────────────────────────────────────────────
+        // Shape Variants: Border-Radius Based (Simple)
+        // ─────────────────────────────────────────────────────────────────────────
+
+        // Square - minimal rounding
+        &[data-shape="square"] {
+            --border-radius: var(--radius-md);
+            --clip-path: none;
+        }
+
+        // Squircle - iOS-style super-ellipse approximation
+        &[data-shape="squircle"] {
+            --border-radius: 28%;
+            --clip-path: none;
+        }
+
+        // Circle - fully round
+        &[data-shape="circle"] {
+            --border-radius: 50%;
+            --clip-path: none;
+        }
+
+        // Rounded - generous rounding
+        &[data-shape="rounded"] {
+            --border-radius: var(--radius-xl);
+            --clip-path: none;
+        }
+
+        // Blob - organic asymmetric shape
+        &[data-shape="blob"] {
+            --border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+            --clip-path: none;
+        }
+
+        // ─────────────────────────────────────────────────────────────────────────
+        // Shape Variants: Clip-Path Based (Polygonal)
+        // Uses `polygon(round X, ...)` for smooth rounded corners (Chrome 111+)
+        // ─────────────────────────────────────────────────────────────────────────
+
+        // Hexagon - regular 6-sided polygon (flat-top orientation)
+        &[data-shape="hexagon"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.375rem,
+                50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%
+            );
+        }
+
+        // Diamond - rotated square / rhombus
+        &[data-shape="diamond"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.5rem,
+                50% 0%, 100% 50%, 50% 100%, 0% 50%
+            );
+        }
+
+        // Star - 5-pointed star with proper inner/outer radii
+        &[data-shape="star"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.25rem,
+                50% 0%,
+                61% 35%, 98% 38%,
+                68% 59%, 79% 95%,
+                50% 75%,
+                21% 95%, 32% 59%,
+                2% 38%, 39% 35%
+            );
+        }
+
+        // Badge - shield/pennant shape
+        &[data-shape="badge"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.375rem,
+                0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%
+            );
+        }
+
+        // Heart - smooth heart shape using polygon approximation
+        &[data-shape="heart"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.25rem,
+                50% 100%,
+                10% 65%, 0% 45%, 0% 30%,
+                5% 15%, 18% 3%, 35% 0%, 50% 12%,
+                65% 0%, 82% 3%, 95% 15%,
+                100% 30%, 100% 45%, 90% 65%
+            );
+        }
+
+        // Clover - 4-leaf clover / cross-star
+        &[data-shape="clover"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.375rem,
+                50% 0%, 60% 30%, 70% 30%, 100% 50%,
+                70% 70%, 60% 70%, 50% 100%,
+                40% 70%, 30% 70%, 0% 50%,
+                30% 30%, 40% 30%
+            );
+        }
+
+        // Flower - 8-petal flower with alternating radii
+        &[data-shape="flower"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.25rem,
+                50% 0%, 58% 25%, 85% 15%, 68% 40%,
+                100% 50%, 68% 60%, 85% 85%, 58% 75%,
+                50% 100%, 42% 75%, 15% 85%, 32% 60%,
+                0% 50%, 32% 40%, 15% 15%, 42% 25%
+            );
+        }
+
+        // Triangle - equilateral triangle
+        &[data-shape="triangle"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.5rem,
+                50% 0%, 100% 87%, 0% 87%
+            );
+        }
+
+        // Pentagon - regular 5-sided polygon
+        &[data-shape="pentagon"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.375rem,
+                50% 0%, 97.5% 35%, 79.5% 95%, 20.5% 95%, 2.5% 35%
+            );
+        }
+
+        // Octagon - regular 8-sided polygon
+        &[data-shape="octagon"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.25rem,
+                30% 0%, 70% 0%, 100% 30%, 100% 70%,
+                70% 100%, 30% 100%, 0% 70%, 0% 30%
+            );
+        }
+
+        // Cross / Plus - plus sign shape
+        &[data-shape="cross"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.375rem,
+                35% 0%, 65% 0%, 65% 35%, 100% 35%,
+                100% 65%, 65% 65%, 65% 100%, 35% 100%,
+                35% 65%, 0% 65%, 0% 35%, 35% 35%
+            );
+        }
+
+        // Arrow - right-pointing arrow/chevron
+        &[data-shape="arrow"] {
+            --border-radius: 0;
+            --clip-path: polygon(
+                round 0.375rem,
+                0% 20%, 60% 20%, 60% 0%, 100% 50%,
+                60% 100%, 60% 80%, 0% 80%
+            );
+        }
+
+        // ─────────────────────────────────────────────────────────────────────────
+        // Shape Variants: Tear/Drop (Asymmetric Radius)
+        // ─────────────────────────────────────────────────────────────────────────
+
+        // Tear - teardrop/water drop shape
+        &[data-shape="egg"] {
+            --border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+            --clip-path: none;
+        }
+
+        //
+        &[data-shape="tear"] {
+            --border-radius: 50cqmin 50cqmin 5rem 50cqmin;
+            --clip-path: none;
+
+            border-start-start-radius: 50cqmin;
+            border-start-end-radius: 50cqmin;
+            border-end-start-radius: 50cqmin;
+            border-end-end-radius: 5rem;
+        }
+
+        // ─────────────────────────────────────────────────────────────────────────
+        // Shape Variants: Wavy (Procedural)
+        // ─────────────────────────────────────────────────────────────────────────
+
+        // Wavy - procedural wavy edge (uses Integrate function)
+        &[data-shape="wavy"] {
+            --border-radius: calc(var(--icon-size, 100%) * 0.5);
+        }
+    }
+
+}

package/src/scss/basic/design/_wavy-runtime.scss

@@ -0,0 +1,50 @@
+@use "sass:math";
+@use "sass:list";
+
+// if you don't want to use deps...
+@function join($list, $glue: '', $is-nested: false) {
+    $result: null;
+    @for $i from 1 through length($list) {
+        $e: nth($list, $i);
+        @if type-of($e) == list {
+            $result: $result#{join($e, $glue, true)};
+        } @else {
+            $result: if(sass($i != length($list) or $is-nested): $result #{$e}#{$glue}; else: $result #{$e});
+        }
+    }
+    @return $result;
+};
+
+// F(X):[x,y] where X:[0..1]
+@#{"function --wavy-step(--step <number>)"} {
+    --angle: calc((var(--step, 0) * 2) * 1rad * pi);
+    --variant: calc(cos(var(--clip-freq, 8) * var(--angle, 0deg)) * 0.5 + 0.5);
+    --adjust: calc(var(--variant, 0) * var(--clip-amplitude, 0));
+    --x: calc(50% + (cos(var(--angle, 0deg)) * (0.5 - var(--adjust, 0))) * var(--icon-size, 100%));
+    --y: calc(50% + (sin(var(--angle, 0deg)) * (0.5 - var(--adjust, 0))) * var(--icon-size, 100%));
+    result: #{"var(--x) var(--y)"};
+}
+
+// F(X):[x,y] where X:[0..1]
+@function ShapeMaker($it: 0, $name: "wavy-step", $steps: 100) {
+    $step: math.div($it, $steps);
+    @if $it == 0
+        { @return "from --#{$name}(#{$step})"; } @else
+        { @return "line to --#{$name}(#{$step})"; }
+}
+
+// space cadet or cheater-tale
+@function Integrate($name: "wavy-step", $steps: 100) {
+    $points: ();
+    @for $i from 0 through $steps { $points: list.append($points, ShapeMaker($i, $name, $steps), $separator: comma); }
+    @return "shape(evenodd #{$points}, close)";
+}
+
+//
+@mixin wavy-shaped($detail: 100) {
+    --clip-amplitude: 0.05;
+    --clip-freq: 8;
+    --clip-path: #{Integrate("wavy-step", $detail)};
+    --icon-size: 100%;
+    --corrector: 1.1;
+}

package/src/scss/basic/index.scss

@@ -0,0 +1,19 @@
+@forward "./misc";
+/**
+ * Veela CSS - Core Runtime
+ *
+ * Shared foundation styles for all veela variants.
+ * This module provides:
+ * - CSS layer definitions
+ * - Normalize/reset styles
+ * - Core layout utilities
+ * - Base tokens and properties
+ * - Essential state management
+ *
+ * Inherited by: basic, advanced, beercss
+ */
+
+@use "layers" as *;
+@use "misc" as *;
+@use "design" as *;
+ 

package/src/scss/basic/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Veela CSS - Core Runtime Loader
+ *
+ * Provides the shared foundation styles for all veela variants.
+ * Use this when you only need the essential normalize and layout utilities.
+ *
+ * @example
+ * ```ts
+ * import { loadCoreStyles } from "@fest-lib/veela/core";
+ * await loadCoreStyles();
+ * ```
+ */
+
+import { loadAsAdopted } from "@fest-lib/dom"; //@ts-ignore
+import styles from "./index.scss?inline";
+
+/**
+ * Load core veela styles (normalize + layout + states)
+ */
+export async function loadBasicStyles(): Promise<void> {
+    try {
+        await loadAsAdopted(styles);
+        console.log("[Veela/Core] Core styles loaded");
+    } catch (e) {
+        console.warn("[Veela/Core] Failed to load core styles:", e);
+    }
+}
+
+export default loadBasicStyles;