@zync/zync-screnplay-player 0.1.221 → 0.1.223

package/dist/screenplay/RemotionRenderer/components/utils/README.md

@@ -1,80 +1,80 @@
-# StretchText Component
-
-A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
-
-## Usage
-
-```jsx
-import StretchText from './StretchText';
-
-// Basic usage
-<StretchText text="Hello World" />
-
-// With custom styling
-<StretchText 
-  text="Contribution" 
-  color="#1a73e8" 
-  fontFamily="Arial" 
-  maxFontSize={200}
-  minFontSize={10}
-  style={{ fontWeight: 'bold' }}
-/>
-
-// With text stroke
-<StretchText 
-  text="Outlined Text" 
-  color="transparent"
-  textStrokeColor="white"
-  textStrokeWidth="2px"
-  style={{ fontWeight: 'bold' }}
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | string | required | The text to display |
-| `color` | string | '#000000' | Text color |
-| `fontFamily` | string | 'Arial' | Font family |
-| `maxFontSize` | number | 100 | Maximum font size in pixels |
-| `minFontSize` | number | 10 | Minimum font size in pixels |
-| `textStrokeColor` | string | undefined | Color of the text stroke |
-| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
-| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
-| `style` | object | {} | Additional style properties |
-
-## Examples
-
-The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
-
-- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
-- The text will always be contained within the parent container and will not overflow.
-- The component recalculates the font size when the window is resized.
-
-## Demo
-
-You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
-
-The demo shows several words of different lengths rendered in containers of the same width:
-
-- "Contribution" (longer word, smaller font)
-- "Work" (shorter word, larger font)
-- "Hello" (medium length word, medium font)
-- "Supercalifragilisticexpialidocious" (very long word, very small font)
-
-Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
-
-## Implementation Details
-
-The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
-
-The component uses SVG for rendering text, which provides several advantages:
-- Proper text-stroke rendering in headless mode
-- Better control over text positioning and alignment
-- Consistent rendering across different browsers and environments
-- Support for advanced SVG features like filters for text shadows
-
-For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
-
-The component also includes a resize listener to recalculate the font size when the window size changes.
+# StretchText Component
+
+A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
+
+## Usage
+
+```jsx
+import StretchText from './StretchText';
+
+// Basic usage
+<StretchText text="Hello World" />
+
+// With custom styling
+<StretchText 
+  text="Contribution" 
+  color="#1a73e8" 
+  fontFamily="Arial" 
+  maxFontSize={200}
+  minFontSize={10}
+  style={{ fontWeight: 'bold' }}
+/>
+
+// With text stroke
+<StretchText 
+  text="Outlined Text" 
+  color="transparent"
+  textStrokeColor="white"
+  textStrokeWidth="2px"
+  style={{ fontWeight: 'bold' }}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | string | required | The text to display |
+| `color` | string | '#000000' | Text color |
+| `fontFamily` | string | 'Arial' | Font family |
+| `maxFontSize` | number | 100 | Maximum font size in pixels |
+| `minFontSize` | number | 10 | Minimum font size in pixels |
+| `textStrokeColor` | string | undefined | Color of the text stroke |
+| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
+| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
+| `style` | object | {} | Additional style properties |
+
+## Examples
+
+The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
+
+- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
+- The text will always be contained within the parent container and will not overflow.
+- The component recalculates the font size when the window is resized.
+
+## Demo
+
+You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
+
+The demo shows several words of different lengths rendered in containers of the same width:
+
+- "Contribution" (longer word, smaller font)
+- "Work" (shorter word, larger font)
+- "Hello" (medium length word, medium font)
+- "Supercalifragilisticexpialidocious" (very long word, very small font)
+
+Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
+
+## Implementation Details
+
+The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
+
+The component uses SVG for rendering text, which provides several advantages:
+- Proper text-stroke rendering in headless mode
+- Better control over text positioning and alignment
+- Consistent rendering across different browsers and environments
+- Support for advanced SVG features like filters for text shadows
+
+For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
+
+The component also includes a resize listener to recalculate the font size when the window size changes.

package/dist/screenplay/RemotionRenderer/components/utils/StretchTextDemo.js

@@ -2,9 +2,9 @@ import React from "react";
 import { AbsoluteFill } from "remotion";
 import StretchText from "./StretchText";
 
-/**
- * Demo component to showcase the StretchText component
- * Shows how different words stretch to the same width with different font sizes
+/**
+ * Demo component to showcase the StretchText component
+ * Shows how different words stretch to the same width with different font sizes
  */
 var StretchTextDemo = function StretchTextDemo() {
   var containerStyle = {