@fest-lib/veela 0.1.20 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fest-lib/veela",
     "description": "fest-lib Veela: CSS tokens, --c2 color functions, Agate.UX, SCSS + runtime loaders",
-    "version": "0.1.20",
+    "version": "1.0.2",
     "license": "MIT",
     "type": "module",
     "sideEffects": true,
@@ -38,7 +38,13 @@
             "import": "./dist/veela.js",
             "default": "./dist/veela.js"
         },
-        "./scss/*": "./src/scss/*",
+        "./scss": "./src/scss/index.scss",
+        "./scss/core": "./src/scss/core/index.scss",
+        "./scss/basic": "./src/scss/basic/index.scss",
+        "./scss/interact": "./src/scss/interact/index.scss",
+        "./scss/ui": "./src/scss/ui/index.scss",
+        "./scss/theme": "./src/scss/theme/index.scss",
+        "./scss/native-controls": "./src/scss/ui/native-controls.scss",
         "./package.json": "./package.json",
         "./dist/index.js": "./dist/veela.js",
         "./index.js": "./dist/veela.js"
@@ -57,6 +63,7 @@
     },
     "scripts": {
         "test": "npm run test:puppeteer",
+        "test:scss-contracts": "node test/scss-contracts.mjs",
         "test:puppeteer": "node test/puppeteer/run.mjs",
         "test:browser": "npm run demo",
         "dev": "vite --host 0.0.0.0",

package/src/scss/_layers.scss

@@ -1,42 +1,14 @@
 /*
  * Filename: _layers.scss
  * FullPath: modules/projects/veela.css/src/scss/_layers.scss
+ * FIND:veela-layers
+ * TAG:veela,style-lib
  * Reason for changes: One cascade-order registry; include view-transitions before overrides.
  */
 
 /*
- * INVARIANT: legacy layer names remain in the registry while their consumers
- * migrate. New component rules use the `ux-*` names; no host may establish a
- * competing layer order by importing a second prelude.
+ * INVARIANT: this is the compiled-SCSS cascade-order prelude. Component, view,
+ * and shell sheets join one of these layers instead of declaring local preludes.
+ * JS wrap/unwrap/order lives in `@fest-lib/style-lib` `layers.ts` (`VEELA_CASCADE_LAYERS`).
  */
-@layer
-    ux-normalize,
-    tokens,
-    ux-tokens,
-    base,
-    ux-base,
-    layout,
-    ux-layout,
-    shells,
-    shell,
-    views,
-    view,
-    viewer,
-    components,
-    ux-components,
-    ux-layer,
-    ui-icon,
-    ui-icon-reset,
-    ux-file-manager,
-    ux-file-manager-content,
-    utilities,
-    ux-utilities,
-    theme,
-    ux-theme,
-    markdown,
-    essentials,
-    print,
-    print-breaks,
-    view-transitions,
-    overrides,
-    ux-overrides;
+@layer tokens, base, layout, components, utilities, theme, overrides, print;

package/src/scss/basic/{misc/_core-layout.scss → _core-layout.scss}

@@ -1,5 +1,5 @@
 //
-@layer ux-agate {
+@layer layout {
     @media screen {
         :root, :host, :scope, :where(body) {
             pointer-events: auto;

package/src/scss/basic/_layers.scss

@@ -0,0 +1 @@
+@forward "../layers";

package/src/scss/basic/{misc/_layout.scss → _layout.scss}

@@ -563,9 +563,9 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
     $limit: map.get($map, $size);
 
     @if $limit {
-        @media (max-inline-size: $limit) { @content; }
+        @media (max-width: $limit) { @content; }
     } @else {
-        @media (max-inline-size: #{$size}) { @content; }
+        @media (max-width: #{$size}) { @content; }
     }
 }
 
@@ -580,9 +580,9 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
     $limit: map.get($map, $size);
 
     @if $limit {
-        @media (min-inline-size: $limit) { @content; }
+        @media (min-width: $limit) { @content; }
     } @else {
-        @media (min-inline-size: #{$size}) { @content; }
+        @media (min-width: #{$size}) { @content; }
     }
 }
 
@@ -676,23 +676,23 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
 
 @mixin media-up($breakpoint) {
     @if $breakpoint == sm {
-        @media (min-inline-size: $breakpoint-sm) {
+        @media (min-width: $breakpoint-sm) {
             @content;
         }
     } @else if $breakpoint == md {
-        @media (min-inline-size: $breakpoint-md) {
+        @media (min-width: $breakpoint-md) {
             @content;
         }
     } @else if $breakpoint == lg {
-        @media (min-inline-size: $breakpoint-lg) {
+        @media (min-width: $breakpoint-lg) {
             @content;
         }
     } @else if $breakpoint == xl {
-        @media (min-inline-size: $breakpoint-xl) {
+        @media (min-width: $breakpoint-xl) {
             @content;
         }
     } @else if $breakpoint == 2xl {
-        @media (min-inline-size: $breakpoint-2xl) {
+        @media (min-width: $breakpoint-2xl) {
             @content;
         }
     }
@@ -701,30 +701,30 @@ $is-windowed: "@container u2-windowed #{$is-not-wide}";
 //
 @mixin media-down($breakpoint) {
     @if $breakpoint == sm {
-        @media (max-inline-size: #{$breakpoint-sm - 1px}) {
+        @media (max-width: #{$breakpoint-sm - 1px}) {
             @content;
         }
     } @else if $breakpoint == md {
-        @media (max-inline-size: #{$breakpoint-md - 1px}) {
+        @media (max-width: #{$breakpoint-md - 1px}) {
             @content;
         }
     } @else if $breakpoint == lg {
-        @media (max-inline-size: #{$breakpoint-lg - 1px}) {
+        @media (max-width: #{$breakpoint-lg - 1px}) {
             @content;
         }
     } @else if $breakpoint == xl {
-        @media (max-inline-size: #{$breakpoint-xl - 1px}) {
+        @media (max-width: #{$breakpoint-xl - 1px}) {
             @content;
         }
     } @else if $breakpoint == 2xl {
-        @media (max-inline-size: #{$breakpoint-2xl - 1px}) {
+        @media (max-width: #{$breakpoint-2xl - 1px}) {
             @content;
         }
     }
 }
 
 @mixin media-between($min, $max) {
-    @media (min-inline-size: $min) and (max-inline-size: #{$max - 1px}) {
+    @media (min-width: $min) and (max-width: #{$max - 1px}) {
         @content;
     }
 }

package/src/scss/basic/{misc/_normalize.scss → _normalize.scss}

@@ -1,111 +1,12 @@
 /*
  * Filename: _normalize.scss
- * FullPath: modules/projects/fl.ui/src/styles/runtime/basic/misc/_normalize.scss
+ * FullPath: modules/projects/veela.css/src/scss/basic/_normalize.scss
  * Change date and time: 16.25.00_31.07.2026
- * Reason for changes: vl-basic palette via --u2-color-mod (token names kept).
+ * Reason for changes: Basic consumes the canonical core token emitter.
  */
 @use "./shared" as *;
-@use "layers";
-
-// COMPAT: vl-basic may load without veela _tokens.scss — keep function local.
-@#{"function --u2-color-mod(--base-color <color>, --index <number> : 550) returns <color>"} {
-    --i: clamp(0, var(--index), 1000);
-    --pivot: 550;
-    --white-distance: clamp(0, calc((var(--pivot) - var(--i)) / var(--pivot)), 1);
-    --black-distance: clamp(0, calc((var(--i) - var(--pivot)) / (1000 - var(--pivot))), 1);
-    --to-white: pow(var(--white-distance), 1.15);
-    --to-black: pow(var(--black-distance), 1.08);
-    --center-left: clamp(0, calc(var(--i) / var(--pivot)), 1);
-    --center-right: clamp(0, calc((1000 - var(--i)) / (1000 - var(--pivot))), 1);
-    --chroma-shape: sqrt(min(var(--center-left), var(--center-right)));
-    --chroma-scale: calc(0.08 + 0.92 * var(--chroma-shape));
-    result: oklch(
-        from var(--base-color)
-        calc(l + (0.985 - l) * var(--to-white) + (0.16 - l) * var(--to-black))
-        calc(c * var(--chroma-scale))
-        h
-    );
-}
-
-@layer tokens {
-    :where(:root, html) {
-        color-scheme: light dark;
-        dynamic-range-limit: no-limit;
-        /*
-         * WHY: vl-basic loads only this runtime sheet; advanced MD3 tokens are not bundled.
-         * Body/normalize use var(--color-bg) etc. — without defaults, backgrounds stay transparent
-         * and light-dark() in views never resolves meaningfully.
-         * Native CSS light-dark() follows the used color-scheme (Theme.ts sets html.style.colorScheme).
-         */
-        --color-primary: light-dark(#91b6e3, #2e3a64);
-        --base-color: var(--color-primary);
-        --color-bg: light-dark(
-            --u2-color-mod(var(--base-color), 20),
-            --u2-color-mod(var(--base-color), 980)
-        );
-        --color-text: light-dark(
-            --u2-color-mod(var(--base-color), 900),
-            --u2-color-mod(var(--base-color), 100)
-        );
-        --color-fg: var(--color-text);
-        --color-bg-secondary: light-dark(
-            --u2-color-mod(var(--base-color), 160),
-            --u2-color-mod(var(--base-color), 840)
-        );
-        --color-bg-alt: light-dark(
-            --u2-color-mod(var(--base-color), 200),
-            --u2-color-mod(var(--base-color), 880)
-        );
-        --color-text-secondary: light-dark(
-            --u2-color-mod(var(--base-color), 700),
-            --u2-color-mod(var(--base-color), 280)
-        );
-        --color-border: light-dark(
-            --u2-color-mod(var(--base-color), 300),
-            --u2-color-mod(var(--base-color), 640)
-        );
-        --color-table: light-dark(
-            --u2-color-mod(var(--base-color), 120),
-            --u2-color-mod(var(--base-color), 860)
-        );
-        --color-link: var(--color-primary);
-        --color-primary-hover: light-dark(
-            --u2-color-mod(var(--base-color), 620),
-            --u2-color-mod(var(--base-color), 480)
-        );
-        --color-secondary: light-dark(
-            --u2-color-mod(var(--base-color), 420),
-            --u2-color-mod(var(--base-color), 680)
-        );
-        --color-outline: light-dark(
-            --u2-color-mod(var(--base-color), 100),
-            --u2-color-mod(var(--base-color), 900)
-        );
-        --color-outline-variant: light-dark(
-            --u2-color-mod(var(--base-color), 100),
-            --u2-color-mod(var(--base-color), 900)
-        );
-        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        --line-height: 1.5;
-        --border-radius: 0.5rem;
-        tab-size: 4;
-        text-size-adjust: 100%;
-        interpolate-size: allow-keywords;
-        font-size-adjust: from-font;
-        font-optical-sizing: auto;
-        font-size: 16px;
-        line-height: 1.5;
-        min-block-size: 0;
-        min-inline-size: 0;
-        padding: 0;
-        margin: 0;
-        border: none;
-        contain: strict;
-        overflow: hidden;
-        font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-        @include stretch-viewport;
-    }
-}
+@use "../core/tokens";
+@use "../layers";
 
 @layer base {
     @keyframes bottom-to-top {
@@ -131,6 +32,7 @@
 
         :where(html) {
             -webkit-text-size-adjust: 100%;
+            tab-size: 4;
             font-size-adjust: from-font;
             font-optical-sizing: auto;
             -webkit-font-smoothing: antialiased;

package/src/scss/basic/{misc/_states.scss → _states.scss}

@@ -1,7 +1,7 @@
 @use "./shared" as *;
 
 //
-@layer ux-existence {
+@layer base {
     //
     *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
         &, * {
@@ -104,7 +104,7 @@
 }
 
 //
-@layer ux-existence {
+@layer base {
     //
     *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
         &, * {

package/src/scss/{core/misc → basic}/_utilities.scss

@@ -1,6 +1,6 @@
-@use "./mixins" as *;
-@use "./functions" as cfg;
-@use "../../basic/misc/layout" as ux;
+@use "../core/mixins" as *;
+@use "../core/functions" as cfg;
+@use "./layout" as ux;
 @use "../interact/position" as *;
 @use "../interact/ps-anchor" as *;
 @use "../interact/ps-cursor" as *;
@@ -849,7 +849,7 @@
 @property --icon-image { syntax: "<image>"; initial-value: linear-gradient(#0000, #0000); inherits: true; };
 
 //
-@layer ux-classes {
+@layer utilities {
     @include ux.host-related(".grid-rows", "::slotted(*)") { @include ux.grid-row; }
     @include ux.host-related(".grid-rows", "*") { @include ux.grid-row; }
     @include ux.host-context(".grid-rows") {

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

@@ -1,4 +1,4 @@
-@layer animations {
+@layer theme {
     @mixin rotate-spin($name) {
         @keyframes #{$name} {
             from {

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

@@ -1,7 +1,7 @@
 //@use "veela-lib" as *;
 
 //
-@layer ux-shapes {
+@layer components {
 
     // ─────────────────────────────────────────────────────────────────────────
     // Base Shaped Element

package/src/scss/basic/index.scss

@@ -1,19 +1,17 @@
-@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
+/*
+ * Filename: index.scss
+ * FullPath: modules/projects/veela.css/src/scss/basic/index.scss
+ * Reason for changes: Flatten base styles and remove the legacy misc facade.
  */
 
-@use "layers" as *;
-@use "misc" as *;
-@use "design" as *;
+@forward "./motion";
+@forward "./queries";
+
+@use "../layers";
+@use "./normalize";
+@use "./core-layout";
+@use "./shared";
+@use "./states";
+@use "./utilities";
+@use "./design";
  

package/src/scss/chrome.scss

@@ -0,0 +1,2 @@
+// Chrome barrel. Do not name this `ui.scss` — that loops with `@use "ui"` / `styles/ui`.
+@forward "./ui/index";

package/src/scss/core/_color-mod.scss

@@ -0,0 +1,24 @@
+/*
+ * Filename: _color-mod.scss
+ * FullPath: modules/projects/veela.css/src/scss/core/_color-mod.scss
+ * Reason for changes: Single source for the custom color modulation function.
+ */
+
+@#{"function --u2-color-mod(--base-color <color>, --index <number> : 550) returns <color>"} {
+    --i: clamp(0, var(--index), 1000);
+    --pivot: 550;
+    --white-distance: clamp(0, calc((var(--pivot) - var(--i)) / var(--pivot)), 1);
+    --black-distance: clamp(0, calc((var(--i) - var(--pivot)) / (1000 - var(--pivot))), 1);
+    --to-white: pow(var(--white-distance), 1.15);
+    --to-black: pow(var(--black-distance), 1.08);
+    --center-left: clamp(0, calc(var(--i) / var(--pivot)), 1);
+    --center-right: clamp(0, calc((1000 - var(--i)) / (1000 - var(--pivot))), 1);
+    --chroma-shape: sqrt(min(var(--center-left), var(--center-right)));
+    --chroma-scale: calc(0.08 + 0.92 * var(--chroma-shape));
+    result: oklch(
+        from var(--base-color)
+        calc(l + (0.985 - l) * var(--to-white) + (0.16 - l) * var(--to-black))
+        calc(c * var(--chroma-scale))
+        h
+    );
+}

package/src/scss/core/{misc/_color-properties.scss → _color-properties.scss}

@@ -1,6 +1,6 @@
 /*
  * Filename: _color-properties.scss
- * FullPath: modules/projects/veela.css/src/scss/core/misc/_color-properties.scss
+ * FullPath: modules/projects/veela.css/src/scss/core/_color-properties.scss
  * Change date and time: 15.50.00_22.08.2026
  * Reason for changes: Seed initial-value is the desktop cyan-blue fallback (#5a9ec8).
  */

package/src/scss/core/{misc/_tokens.scss → _tokens.scss}

@@ -1,6 +1,6 @@
 /*
  * Filename: _tokens.scss
- * FullPath: modules/projects/veela.css/src/scss/core/misc/_tokens.scss
+ * FullPath: modules/projects/veela.css/src/scss/core/_tokens.scss
  * Change date and time: 22.30.00_22.08.2026
  * Reason for changes: Light/dark primary-container so Start plates and chrome ink flip.
  */
@@ -8,24 +8,16 @@
 /*
  * INVARIANT: This is the canonical color-token registry for the full veela bundle.
  * All color token DEFAULTS live here on `:root, :host, :scope`.
- * - `misc/_tokens.scss` is a symlink of this file.
- * - `basic/misc/_tokens.scss` and `advanced/misc/_tokens.scss` are intentional
- *   per-bundle SCSS alias shims (no CSS output) for the lightweight vl-basic / advanced
- *   bundles; they MUST NOT `@forward` this file (would pull the full `@layer tokens`
- *   CSS into those bundles and break their size semantics).
- * - `basic/misc/_normalize.scss` carries a documented vl-basic fallback palette for
- *   standalone vl-basic loading (no advanced MD3 tokens bundled).
- * - The advanced MD3/C2 system (`advanced/tokens/_variables.scss`, `_color.scss`,
- *   `_shadow.scss`) keeps its mixin/function definitions in place (depends on
- *   `veela-lib`); color-token EMISSION for that system is invoked from here where
- *   safe, otherwise remains in its layer with a pointer comment.
+ * - The core entry-point owns every default; basic and theme modules consume it.
+ * - Component/shell/view styles may only provide scoped semantic aliases.
  * - Component/shell/view files keep only context overrides and shadow-DOM
  *   `var(--token, light-dark(...))` fallbacks; they never redefine a canonical default.
  */
 
 @use "./config" as config;
 @use "./color-properties";
-@use "layers";
+@use "./color-mod";
+@use "../layers";
 
 // Design tokens: SCSS aliases for CSS custom properties
 // Keep aliases small and meaningful to encourage reuse
@@ -90,85 +82,6 @@ $scrollbar-tint: var(--scrollbar-tint, 86%);
 $z-modal-backdrop: var(--z-modal-backdrop);
 $z-modal: var(--z-modal);
 
-// use native custom CSS function syntax
-@#{"function --u2-color-mod(--base-color <color>, --index <number> : 550) returns <color>"} {
-    /* Ограничиваем индекс */
-    --i: clamp(0, var(--index), 1000);
-  
-    /* Переданный цвет считается оттенком 550 */
-    --pivot: 550;
-  
-    /* Расстояние от базового цвета к белой и чёрной границам */
-    --white-distance:
-      clamp(
-        0,
-        calc((var(--pivot) - var(--i)) / var(--pivot)),
-        1
-      );
-  
-    --black-distance:
-      clamp(
-        0,
-        calc(
-          (var(--i) - var(--pivot)) /
-          (1000 - var(--pivot))
-        ),
-        1
-      );
-  
-    /*
-     * Нелинейное изменение светлоты:
-     * близкие к 550 оттенки меньше отличаются от базового.
-     */
-    --to-white: pow(var(--white-distance), 1.15);
-    --to-black: pow(var(--black-distance), 1.08);
-  
-    /*
-     * Цветность максимальна около 550
-     * и плавно снижается к обоим краям.
-     */
-    --center-left:
-      clamp(0, calc(var(--i) / var(--pivot)), 1);
-  
-    --center-right:
-      clamp(
-        0,
-        calc(
-          (1000 - var(--i)) /
-          (1000 - var(--pivot))
-        ),
-        1
-      );
-  
-    --chroma-shape:
-      sqrt(min(var(--center-left), var(--center-right)));
-  
-    /*
-     * На краях остаётся 8% исходной цветности:
-     * получается почти белый/чёрный, но с оттенком base-color.
-     */
-    --chroma-scale:
-      calc(0.08 + 0.92 * var(--chroma-shape));
-  
-    result:
-      oklch(
-        from var(--base-color)
-  
-        /* 98.5% около белого, 16% около чёрного */
-        calc(
-          l
-          + (0.985 - l) * var(--to-white)
-          + (0.16 - l) * var(--to-black)
-        )
-  
-        calc(c * var(--chroma-scale))
-  
-        h
-      );
-  }
-
-
-
 /* ==========================================================================
     Meta / Declarations
    ========================================================================== */
@@ -593,6 +506,7 @@ $selectors: $md-roots;
         --gap-lg: var(--space-lg);
         --gap-xl: var(--space-xl);
         --gap-2xl: var(--space-2xl);
+        --fl-ui-gap: var(--space-md);
 
         /*
          * Shape scale — M3 Expressive / Android 16–17 (dp≈rem at 16px).
@@ -609,6 +523,8 @@ $selectors: $md-roots;
         --radius-2xl: 1.75rem;
         --radius-3xl: 2rem;
         --radius-full: 9999px;
+        --fl-ui-radius: var(--radius-md);
+        --border-radius: var(--radius-md);
         --shape-extra-small: var(--radius-xs);
         --shape-small: var(--radius-md);
         --shape-medium: var(--radius-lg);
@@ -660,7 +576,7 @@ $selectors: $md-roots;
         --ui-explorer-icon-size: 1.5rem;
         --ui-explorer-icon-track: 2rem;
         --ui-explorer-action-icon-size: 1.15rem;
-        --ui-explorer-row-height: 2.875rem;
+        --ui-explorer-row-height: 3.25rem;
         --icon-size-sm: var(--ui-icon-size);
         --icon-size-md: var(--ui-icon-size);
         --icon-size-lg: var(--ui-explorer-icon-size);
@@ -685,6 +601,7 @@ $selectors: $md-roots;
         --leading-tight: 1.2;
         --leading-normal: 1.5;
         --leading-relaxed: 1.8;
+        --line-height: var(--leading-normal);
 
         --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
         --ease-expressive: cubic-bezier(0.34, 1.25, 0.64, 1);

package/src/scss/core/index.scss

@@ -1 +1,13 @@
-@forward "misc/index.scss";
+/*
+ * Filename: index.scss
+ * FullPath: modules/projects/veela.css/src/scss/core/index.scss
+ * Reason for changes: Flatten the core SCSS surface behind one canonical entry.
+ */
+
+@forward "./config";
+@forward "./functions";
+@forward "./mixins";
+@forward "./properties";
+@forward "./tokens";
+@forward "./icons";
+@forward "../interact";

package/src/scss/index.scss

@@ -1,5 +1,10 @@
-// Core is canonical for layout helpers that also exist in `basic` (FL fallbacks).
-// Hide basic's duplicates so the forwarded surface stays a single definition.
+/*
+ * FIND:veela-scss
+ * TAG:veela
+ * WHY: One style library. Trees: core (tokens/mixins), basic (normalize),
+ * interact (via core/interact), ui (chrome; also fl.ui/styles/ui symlink).
+ * Do not @forward ./ui here — vl-basic must stay a small foundation bundle.
+ */
 @forward "./core";
 @forward "./basic" hide
     aspect-ratio,

package/src/scss/index.ts

@@ -43,7 +43,7 @@ let _loadedVariant: VeelaVariant | null = null;
 // ============================================================================
 
 import { loadBasicStyles } from "./basic/index";
-import { loadAdvancedStyles } from "./advanced/index";
+import { loadAdvancedStyles } from "./theme/loader";
 
 // ============================================================================
 // UNIFIED LOADER

package/src/scss/{core/interact → interact}/_viewport.scss

@@ -1,4 +1,4 @@
-@use "../misc/functions" as lg;
+@use "../core/functions" as lg;
 @use "sass:list";
 @use "sass:string";
 @use "sass:meta";

package/src/scss/interact/index.scss

@@ -0,0 +1,18 @@
+/*
+ * Filename: index.scss
+ * FullPath: modules/projects/veela.css/src/scss/interact/index.scss
+ * Reason for changes: Curated public interaction entry-point.
+ */
+
+@use "../layers";
+
+@forward "./position";
+@forward "./viewport";
+@forward "./draggable";
+@forward "./resizable";
+@forward "./ps-anchor";
+@forward "./ps-centered";
+@forward "./ps-cursor";
+@forward "./ps-draggable";
+@forward "./ps-properties";
+@forward "./ps-resizable";