Make webViewNonce optional, revert to earlier TW classes, introduce missing TW classes

Author: alex-rawlings-yyc

src/__tests__/components/ContinuousView.test.tsx

@@ -428,10 +428,9 @@ describe('ContinuousView fade overlays', () => {
   it('does not render prev fade at book start', () => {
     const { container } = render(<ContinuousView book={makeBook()} />);
 
-    // Prev fade gradient is tw:from-background (prev-to-next gradient)
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const prevFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-linear-to-r'),
+      el.className.includes('tw:bg-linear-to-e'),
     );
     expect(prevFades).toHaveLength(0);
   });
@@ -441,7 +440,7 @@ describe('ContinuousView fade overlays', () => {
 
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const nextFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-linear-to-l'),
+      el.className.includes('tw:bg-linear-to-s'),
     );
     expect(nextFades).toHaveLength(1);
   });
@@ -453,7 +452,7 @@ describe('ContinuousView fade overlays', () => {
 
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const prevFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-linear-to-r'),
+      el.className.includes('tw:bg-linear-to-e'),
     );
     expect(prevFades).toHaveLength(1);
   });
@@ -468,7 +467,7 @@ describe('ContinuousView fade overlays', () => {
 
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const nextFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-linear-to-l'),
+      el.className.includes('tw:bg-linear-to-s'),
     );
     expect(nextFades).toHaveLength(0);
   });

src/__tests__/main.test.ts

@@ -73,7 +73,7 @@ type WebViewProvider = {
   getWebView(
     savedWebViewDefinition: SavedWebViewDefinition,
     openWebViewOptions: OpenWebViewOptions | undefined,
-    webViewNonce: string,
+    webViewNonce?: string,
   ): Promise<WebViewDefinition | undefined>;
 };
 
@@ -330,7 +330,7 @@ describe('main', () => {
         webViewType: mainWebViewType,
       };
 
-      const result = await provider.getWebView(savedWebView, {}, 'nonce');
+      const result = await provider.getWebView(savedWebView, {});
 
       expect(result).toMatchObject({
         ...savedWebView,
@@ -351,7 +351,7 @@ describe('main', () => {
       };
 
       const options: InterlinearizerOpenOptions = { projectId: 'my-project' };
-      const result = await provider.getWebView(savedWebView, options, 'nonce');
+      const result = await provider.getWebView(savedWebView, options);
 
       expect(result).toMatchObject({ projectId: 'my-project' });
     });
@@ -367,7 +367,7 @@ describe('main', () => {
         projectId: 'saved-project',
       };
 
-      const result = await provider.getWebView(savedWebView, {}, 'nonce');
+      const result = await provider.getWebView(savedWebView, {});
 
       expect(result).toMatchObject({ projectId: 'saved-project' });
     });
@@ -383,7 +383,7 @@ describe('main', () => {
         webViewType: 'other.webView',
       };
 
-      await expect(provider.getWebView(savedWebView, {}, 'nonce')).rejects.toThrow(
+      await expect(provider.getWebView(savedWebView, {})).rejects.toThrow(
         `${mainWebViewType} provider received request to provide a ${savedWebView.webViewType} WebView`,
       );
     });
@@ -399,7 +399,7 @@ describe('main', () => {
         projectId: 'saved-project',
       };
 
-      const result = await provider.getWebView(savedWebView, undefined, 'nonce');
+      const result = await provider.getWebView(savedWebView, undefined);
 
       expect(result).toMatchObject({ projectId: 'saved-project' });
     });

src/components/ContinuousView.tsx

@@ -332,15 +332,15 @@ export default function ContinuousView({
         {!atStart && (
           <div
             aria-hidden="true"
-            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:left-0 tw:z-10 tw:w-8 tw:bg-linear-to-r tw:from-background tw:to-transparent"
+            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:inset-s-0 tw:z-10 tw:w-8 tw:bg-linear-to-e tw:from-background tw:to-transparent"
           />
         )}
 
         {/* Next fade overlay — only rendered when the next arrow is enabled */}
         {!atEnd && (
           <div
             aria-hidden="true"
-            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:right-0 tw:z-10 tw:w-8 tw:bg-linear-to-l tw:from-background tw:to-transparent"
+            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:inset-e-0 tw:z-10 tw:w-8 tw:bg-linear-to-s tw:from-background tw:to-transparent"
           />
         )}
 

src/tailwind.css

@@ -48,9 +48,38 @@
 }
 
 @utility icon-button {
-  @apply tw:z-10 tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50;
+  @apply tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50;
 }
 
+@utility bg-linear-to-e {
+  --tw-gradient-position: to right;
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to right in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+  [dir='rtl'] & {
+    --tw-gradient-position: to left;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to left in oklab;
+    }
+  }
+}
+
+@utility bg-linear-to-s {
+  --tw-gradient-position: to left;
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to left in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+  [dir='rtl'] & {
+    --tw-gradient-position: to right;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to right in oklab;
+    }
+  }
+}
+
+
 /*
  * CUSTOM: Theme variable policy.
  *