@orioncactuscorp/ui 1.6.0 → 1.7.0

package/dist/utils/motion.js

@@ -9,7 +9,8 @@ const f = [
   "expand",
   "move",
   "gesture",
-  "ambient"
+  "ambient",
+  "continuous"
 ], w = [
   "change",
   "enter",
@@ -41,7 +42,8 @@ const f = [
     expand: 0.3,
     move: 0.3,
     gesture: 0.2,
-    ambient: 1.2
+    ambient: 1.2,
+    continuous: 2.2
   },
   durationByPhase: {
     disclosure: {
@@ -71,7 +73,8 @@ const f = [
     expand: "ease",
     move: "cubic-bezier(0.32, 0.72, 0, 1)",
     gesture: "ease",
-    ambient: "linear"
+    ambient: "ease-in-out",
+    continuous: "linear"
   },
   timingByPhase: {
     disclosure: {
@@ -101,7 +104,8 @@ const f = [
   expand: "static",
   move: "static",
   gesture: "feedback",
-  ambient: "static"
+  ambient: "static",
+  continuous: "static"
 }, V = /* @__PURE__ */ new Set([
   "opacity",
   "color",
@@ -137,9 +141,6 @@ const f = [
       propertyExtraBounce: { transform: 0.04 }
     },
     exit: null
-  },
-  ambient: {
-    loop: { preset: "smooth" }
   }
 }, U = z, $ = (t, e) => e.includes(t), l = (t, e, r) => {
   if (!$(e, r))
@@ -267,6 +268,10 @@ function N(t) {
       ambient: i(
         n(e, "--oc-motion-duration-ambient"),
         o.durationByIntent.ambient
+      ),
+      continuous: i(
+        n(e, "--oc-motion-duration-continuous"),
+        o.durationByIntent.continuous
       )
     },
     durationByPhase: {
@@ -315,7 +320,8 @@ function N(t) {
       expand: n(e, "--oc-motion-timing-expand") || o.timingByIntent.expand,
       move: n(e, "--oc-motion-timing-move") || o.timingByIntent.move,
       gesture: n(e, "--oc-motion-timing-gesture") || o.timingByIntent.gesture,
-      ambient: n(e, "--oc-motion-timing-ambient") || o.timingByIntent.ambient
+      ambient: n(e, "--oc-motion-timing-ambient") || o.timingByIntent.ambient,
+      continuous: n(e, "--oc-motion-timing-continuous") || o.timingByIntent.continuous
     },
     timingByPhase: {
       disclosure: {
@@ -370,37 +376,37 @@ function Q({
   reduced: m = "auto",
   reducedMotion: c = !1,
   property: p,
-  element: B,
+  element: h,
   tokens: D
 }) {
   l("intent", t, f), l("phase", e, w), l("pace", r, R);
   const x = G(a), P = H(s), u = K(
-    D ?? N(B)
+    D ?? N(h)
   ), y = T(t, m), b = j({
     property: p,
     reducedMotion: c,
     reducedPolicy: y
-  }), F = c && y === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor, I = O(
+  }), I = c && y === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor, F = O(
     u.durationByPhase,
     t,
     e,
     u.durationByIntent[t]
-  ), v = u.paceFactor[r], g = b ? I * F * v * x : 0, M = O(
+  ), v = u.paceFactor[r], g = b ? F * I * v * x : 0, M = O(
     u.timingByPhase,
     t,
     e,
     u.timingByIntent[t]
-  ), h = J(
+  ), B = J(
     t,
     e,
     p,
     P
-  ), k = h !== null;
+  ), k = B !== null;
   if (!k && P !== void 0)
     throw new Error(
       "oc-motion extraBounce is only supported for spring-backed motion."
     );
-  const q = g > 0 ? g : I;
+  const q = g > 0 ? g : F;
   return {
     intent: t,
     phase: e,
@@ -410,15 +416,15 @@ function Q({
     reducedMotion: c,
     property: p,
     durationFactor: x,
-    durationFactorToken: F,
+    durationFactorToken: I,
     paceFactor: v,
     durationSeconds: g,
     timingFunction: M,
     animate: b,
     springBacked: k,
-    spring: A[h?.preset ?? "smooth"]({
+    spring: A[B?.preset ?? "smooth"]({
       duration: q,
-      extraBounce: h?.extraBounce
+      extraBounce: B?.extraBounce
     })
   };
 }

package/dist/vscode/oc-ui-vars.css

@@ -296,6 +296,7 @@
   --oc-motion-distance-factor-reject: initial;
   --oc-motion-distance-factor-spatial: initial;
   --oc-motion-duration-ambient: initial;
+  --oc-motion-duration-continuous: initial;
   --oc-motion-duration-disclosure: initial;
   --oc-motion-duration-disclosure-exit: initial;
   --oc-motion-duration-expand: initial;
@@ -321,6 +322,7 @@
   --oc-motion-scale-factor-feedback: initial;
   --oc-motion-scale-factor-spatial: initial;
   --oc-motion-timing-ambient: initial;
+  --oc-motion-timing-continuous: initial;
   --oc-motion-timing-disclosure: initial;
   --oc-motion-timing-disclosure-exit: initial;
   --oc-motion-timing-expand: initial;
@@ -360,12 +362,12 @@
   --oc-space-section-gap-section: initial;
   --oc-space-section-gap-xlarge: initial;
   --oc-space-section-padding-viewport: initial;
+  --oc-space-section-padding-viewport-block-safe-end: initial;
+  --oc-space-section-padding-viewport-block-safe-start: initial;
+  --oc-space-section-padding-viewport-inline-safe-end: initial;
+  --oc-space-section-padding-viewport-inline-safe-start: initial;
   --oc-space-section-padding-viewport-x: initial;
-  --oc-space-section-padding-viewport-x-safe-left: initial;
-  --oc-space-section-padding-viewport-x-safe-right: initial;
   --oc-space-section-padding-viewport-y: initial;
-  --oc-space-section-padding-viewport-y-safe-bottom: initial;
-  --oc-space-section-padding-viewport-y-safe-top: initial;
   --oc-spring-bouncy-timing: initial;
   --oc-spring-smooth-duration-scale: initial;
   --oc-spring-smooth-timing: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioncactuscorp/ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "orioncactus UI foundations and core primitives",
   "private": false,
   "type": "module",

package/src/scss/foundations/motion.scss

@@ -31,6 +31,7 @@
   --oc-motion-duration-gesture: 0.2s;
   --oc-motion-duration-gesture-release: 0.52s;
   --oc-motion-duration-ambient: 1.2s;
+  --oc-motion-duration-continuous: 2.2s;
   --oc-motion-timing-feedback: ease;
   --oc-motion-timing-fade: ease;
   --oc-motion-timing-reject: #{oc-spring-timing(0.32s, smooth, $samples: 64)};
@@ -46,7 +47,8 @@
   --oc-motion-timing-move: cubic-bezier(0.32, 0.72, 0, 1);
   --oc-motion-timing-gesture: ease;
   --oc-motion-timing-gesture-release: cubic-bezier(0.32, 0.72, 0, 1);
-  --oc-motion-timing-ambient: linear;
+  --oc-motion-timing-ambient: ease-in-out;
+  --oc-motion-timing-continuous: linear;
   --oc-spring-smooth-timing: #{oc-spring-timing(0.5s, smooth, $samples: 64)};
   --oc-spring-smooth-duration-scale: #{oc-spring-duration-scale(0.5s, smooth)};
   --oc-spring-snappy-timing: #{oc-spring-timing(0.5s, snappy, $samples: 64)};

package/src/scss/foundations/responsive.test.ts

@@ -34,6 +34,28 @@ describe('responsive foundations', () => {
     expect(css).toContain('@media screen and (min-width:1921px)');
   });
 
+  it('exposes logical safe-area section padding aliases with rtl inline mapping', () => {
+    const css = compileScss(`
+      @use 'foundations/space';
+    `);
+
+    expect(css).toContain(
+      '--oc-space-section-padding-viewport-inline-safe-start:max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left, 0px))',
+    );
+    expect(css).toContain(
+      '--oc-space-section-padding-viewport-inline-safe-end:max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right, 0px))',
+    );
+    expect(css).toContain(
+      '--oc-space-section-padding-viewport-block-safe-start:max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-top, 0px))',
+    );
+    expect(css).toContain(
+      '--oc-space-section-padding-viewport-block-safe-end:max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-bottom, 0px))',
+    );
+    expect(css).toContain(
+      ':root:dir(rtl){--oc-space-section-padding-viewport-inline-safe-start:max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right, 0px));--oc-space-section-padding-viewport-inline-safe-end:max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left, 0px))}',
+    );
+  });
+
   it('uses one responsive config for typo and space stepped output', () => {
     const css = compileScss(`
       @use 'foundations/responsive.config' with (

package/src/scss/foundations/space.scss

@@ -197,10 +197,15 @@ $oc-space-responsive-segments: (
 
 :root {
   --oc-space-section-padding-viewport: var(--oc-space-section-padding-viewport-y) var(--oc-space-section-padding-viewport-x);
-  --oc-space-section-padding-viewport-x-safe-left: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left));
-  --oc-space-section-padding-viewport-x-safe-right: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right));
-  --oc-space-section-padding-viewport-y-safe-top: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-top));
-  --oc-space-section-padding-viewport-y-safe-bottom: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-bottom));
+  --oc-space-section-padding-viewport-inline-safe-start: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left, 0px));
+  --oc-space-section-padding-viewport-inline-safe-end: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right, 0px));
+  --oc-space-section-padding-viewport-block-safe-start: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-top, 0px));
+  --oc-space-section-padding-viewport-block-safe-end: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-bottom, 0px));
 
   @include oc-emit-responsive-tokens('space', $oc-space-stops, $oc-space-responsive-segments, $oc-responsive-space-stops, '$oc-responsive-space-stops', $oc-responsive-space-profile, '$oc-responsive-space-profile');
 }
+
+:root:dir(rtl) {
+  --oc-space-section-padding-viewport-inline-safe-start: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right, 0px));
+  --oc-space-section-padding-viewport-inline-safe-end: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left, 0px));
+}

package/src/scss/mixins/_motion.scss

@@ -16,6 +16,7 @@ $oc-motion-token-duration-by-intent: (
   move: var(--oc-motion-duration-move),
   gesture: var(--oc-motion-duration-gesture),
   ambient: var(--oc-motion-duration-ambient),
+  continuous: var(--oc-motion-duration-continuous),
 ) !default;
 
 $oc-motion-token-timing-by-intent: (
@@ -29,6 +30,7 @@ $oc-motion-token-timing-by-intent: (
   move: var(--oc-motion-timing-move),
   gesture: var(--oc-motion-timing-gesture),
   ambient: var(--oc-motion-timing-ambient),
+  continuous: var(--oc-motion-timing-continuous),
 ) !default;
 
 $oc-motion-token-duration-by-phase: (
@@ -88,6 +90,7 @@ $oc-motion-token-scale-by-intent: (
   move: var(--oc-motion-scale-factor-spatial),
   gesture: var(--oc-motion-scale-factor-feedback),
   ambient: var(--oc-motion-scale-factor-feedback),
+  continuous: var(--oc-motion-scale-factor-spatial),
 ) !default;
 
 $oc-motion-token-distance-by-intent: (
@@ -101,6 +104,7 @@ $oc-motion-token-distance-by-intent: (
   move: var(--oc-motion-distance-factor-spatial),
   gesture: var(--oc-motion-distance-factor-reject),
   ambient: var(--oc-motion-distance-factor-spatial),
+  continuous: var(--oc-motion-distance-factor-spatial),
 ) !default;
 
 // Spring profiles need compile-time Sass values because oc-spring() samples timing curves.
@@ -114,7 +118,6 @@ $oc-motion-spring-duration-by-intent: (
   expand: 0.3s,
   move: 0.3s,
   gesture: 0.2s,
-  ambient: 1.2s,
 ) !default;
 
 $oc-motion-spring-duration-by-phase: (
@@ -199,13 +202,6 @@ $oc-motion-spring-by-intent: (
     preset: snappy,
     extra-bounce: 0,
   ),
-  ambient: (
-    phases: (
-      loop,
-    ),
-    preset: smooth,
-    extra-bounce: 0,
-  ),
 ) !default;
 
 $oc-motion-reduced-policy-by-intent: (
@@ -219,6 +215,7 @@ $oc-motion-reduced-policy-by-intent: (
   move: static,
   gesture: feedback,
   ambient: static,
+  continuous: static,
 ) !default;
 
 $oc-motion-feedback-properties: (opacity, color, background-color, border-color, box-shadow, outline-color, fill, stroke) !default;

package/src/scss/mixins/_motion.test.ts

@@ -44,6 +44,26 @@ describe('motion utilities', () => {
     );
   });
 
+  it('keeps ambient and continuous loop motion on token-backed non-spring paths', () => {
+    const result = compileMotion(`
+      .ambient {
+        transition: oc-motion(opacity, ambient, $phase: loop, $pace: slow);
+      }
+
+      .continuous {
+        animation: spin oc-motion-duration(continuous, loop) oc-motion-timing(continuous, loop) infinite;
+      }
+    `);
+
+    expect(result.css).toContain(
+      'opacity calc(var(--oc-motion-duration-ambient) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-slow) * 1) var(--oc-motion-timing-ambient)',
+    );
+    expect(result.css).toContain(
+      'animation: spin calc(var(--oc-motion-duration-continuous) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-continuous) infinite;',
+    );
+    expect(result.css).not.toContain('linear(');
+  });
+
   it('emits token-backed fade motion for simple opacity transitions', () => {
     const result = compileMotion(`
       .target {