witdh for teleprompter

Author: KSemenenko

AGENTS.md

@@ -93,6 +93,7 @@ Rule format:
 - Product localization must be complete across all supported UI languages: audit hardcoded user-facing strings with an explicit inventory file, move them into shared localization catalogs, and include tooltip text in the same localization pass instead of leaving tooltip copy or chrome labels hardcoded.
 - PrompterOne must ship a first-run onboarding flow that explains the product basics, TPS, RSVP, Editor, Learn, Teleprompter, and Go Live in-app; the walkthrough must appear on first launch until the user explicitly completes or dismisses it, persist that choice locally, and be fully localized across all supported UI languages.
 - The onboarding flow must include a dedicated TPS explainer step or page, separate from the generic editor step, that tells users what TPS is, why it exists, and how PrompterOne uses it.
+- The dedicated TPS onboarding step must explain TPS in concrete beginner terms: what the format is, why it exists, how PrompterOne uses it across Editor/Learn/Teleprompter/Go Live, and where users can continue with the official TPS site or glossary.
 - Script discovery and authoring surfaces must support real search by script name and script content; Library/script pages and editor flows must not force manual browsing when the user needs to find files or text inside files.
 
 ## Rules to Follow (Mandatory)

src/PrompterOne.Shared/AGENTS.md

@@ -46,6 +46,7 @@
 - Editor TPS menus in `PrompterOne.Shared` must use one spec-driven grouping and command inventory across top toolbar, floating toolbar, and Monaco authoring help; if a TPS tag or header pattern is supported, every relevant editor command surface must expose it coherently.
 - `PrompterOne.Shared` must provide a localized first-run onboarding flow that walks new users through PrompterOne, TPS, RSVP, Editor, Learn, Teleprompter, and Go Live, and it must persist completion or dismissal in browser-owned settings.
 - `PrompterOne.Shared` onboarding must give TPS its own dedicated explainer step or page, separate from the editor overview, so new users understand what TPS is and why PrompterOne centers it.
+- The TPS onboarding content in `PrompterOne.Shared` must speak to beginners directly: define TPS, explain why plain-text teleprompter markup matters, show how PrompterOne carries that source into rehearsal/reading/live flows, and point users to official TPS documentation or glossary paths for deeper orientation.
 - Library and editor routed surfaces in `PrompterOne.Shared` must expose real search affordances for script names and script content instead of relying only on manual browsing.
 - Teleprompter routed surfaces in `PrompterOne.Shared` must expose a direct in-reader text-size control, owned by the reader UI itself, so operators can tune readability during playback without leaving the route.
 - Teleprompter width controls in `PrompterOne.Shared` must scale relative to the active viewport or screen size and persist that adaptive ratio; do not clamp the readable lane around a fixed pixel-only desktop maximum.

src/PrompterOne.Shared/AppShell/Layout/MainLayout.Onboarding.cs

@@ -104,6 +104,13 @@ private int ResolveOnboardingStepIndex(string uri)
         }
 
         var currentRoute = GetNormalizedAppRoute(uri);
+        if (_onboardingStepIndex >= 0 &&
+            _onboardingStepIndex < _onboardingSteps.Count &&
+            string.Equals(_onboardingSteps[_onboardingStepIndex].Route, currentRoute, StringComparison.Ordinal))
+        {
+            return _onboardingStepIndex;
+        }
+
         var routeIndex = _onboardingSteps
             .Select((step, index) => (step.Route, index))
             .FirstOrDefault(candidate => string.Equals(candidate.Route, currentRoute, StringComparison.Ordinal))

src/PrompterOne.Shared/Components/AppOnboardingCatalog.cs

@@ -19,8 +19,22 @@ public static IReadOnlyList<AppOnboardingStepDescriptor> Build(string scriptId)
                 UiTextKey.OnboardingWelcomeBulletModes,
                 UiTextKey.OnboardingWelcomeBulletLocal
             ],
-            UiTextKey.OnboardingOpenEditor,
+            UiTextKey.OnboardingOpenTps,
             AppRoutes.Library),
+        CreateStep(
+            AppOnboardingStepId.Tps,
+            UiIconKind.CodeArrows,
+            UiTextKey.OnboardingStepTps,
+            UiTextKey.OnboardingTpsEyebrow,
+            UiTextKey.OnboardingTpsTitle,
+            UiTextKey.OnboardingTpsBody,
+            [
+                UiTextKey.OnboardingTpsBulletFormat,
+                UiTextKey.OnboardingTpsBulletRuntime,
+                UiTextKey.OnboardingTpsBulletGlossary
+            ],
+            UiTextKey.OnboardingOpenEditor,
+            AppRoutes.EditorWithId(scriptId)),
         CreateStep(
             AppOnboardingStepId.Editor,
             UiIconKind.DocumentLines,

src/PrompterOne.Shared/Components/AppOnboardingStepId.cs

@@ -3,6 +3,7 @@ namespace PrompterOne.Shared.Components;
 public enum AppOnboardingStepId
 {
     Library = 0,
+    Tps,
     Editor,
     Learn,
     Teleprompter,

src/PrompterOne.Shared/Localization/UiTextKey.cs

@@ -32,6 +32,7 @@ public enum UiTextKey
     OnboardingDismiss,
     OnboardingBack,
     OnboardingRestartTour,
+    OnboardingOpenTps,
     OnboardingOpenEditor,
     OnboardingOpenLearn,
     OnboardingOpenTeleprompter,
@@ -40,6 +41,7 @@ public enum UiTextKey
     OnboardingReopenBody,
     OnboardingFinish,
     OnboardingStepLibrary,
+    OnboardingStepTps,
     OnboardingStepEditor,
     OnboardingStepLearn,
     OnboardingStepTeleprompter,
@@ -50,6 +52,12 @@ public enum UiTextKey
     OnboardingWelcomeBulletSearch,
     OnboardingWelcomeBulletModes,
     OnboardingWelcomeBulletLocal,
+    OnboardingTpsEyebrow,
+    OnboardingTpsTitle,
+    OnboardingTpsBody,
+    OnboardingTpsBulletFormat,
+    OnboardingTpsBulletRuntime,
+    OnboardingTpsBulletGlossary,
     OnboardingEditorEyebrow,
     OnboardingEditorTitle,
     OnboardingEditorBody,

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderPlayback.cs

@@ -84,11 +84,11 @@ private async Task HandleReaderFocalPointInputAsync(ChangeEventArgs args)
 
     private async Task HandleReaderTextWidthInputAsync(ChangeEventArgs args)
     {
-        _readerTextWidth = ParseReaderControlValue(
+        _readerTextWidthPercent = ParseReaderControlValue(
             args.Value,
-            ReaderMinTextWidth,
-            ReaderMaxTextWidth,
-            _readerTextWidth);
+            ReaderMinTextWidthPercent,
+            ReaderMaxTextWidthPercent,
+            _readerTextWidthPercent);
         RequestReaderAlignment();
         await PersistCurrentReaderLayoutAsync();
         _areWidthGuidesActive = true;

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderPreferences.cs

@@ -10,7 +10,7 @@ private async Task PersistCurrentReaderLayoutAsync()
         await PersistReaderSettingsAsync(currentSettings => currentSettings with
         {
             FontScale = BuildReaderFontScale(_readerFontSize),
-            TextWidth = BuildReaderTextWidthRatio(_readerTextWidth),
+            TextWidth = BuildReaderTextWidthRatio(_readerTextWidthPercent),
             FocalPointPercent = _readerFocalPointPercent,
             MirrorText = _isReaderMirrorHorizontal,
             MirrorVertical = _isReaderMirrorVertical,
@@ -41,6 +41,6 @@ private async Task PersistReaderSettingsAsync(Func<ReaderSettings, ReaderSetting
     private static double BuildReaderFontScale(int fontSize) =>
         Math.Round(fontSize / (double)DefaultReaderFontSize, 2, MidpointRounding.AwayFromZero);
 
-    private static double BuildReaderTextWidthRatio(int textWidth) =>
-        Math.Round(textWidth / (double)ReaderMaxTextWidth, 4, MidpointRounding.AwayFromZero);
+    private static double BuildReaderTextWidthRatio(int textWidthPercent) =>
+        Math.Round(textWidthPercent / (double)ReaderMaxTextWidthPercent, 4, MidpointRounding.AwayFromZero);
 }

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderRendering.cs

@@ -13,10 +13,7 @@ public partial class TeleprompterPage
     private const string ReaderCardNextCssClass = "rd-card-next";
     private const string ReaderCardPreviousCssClass = "rd-card-prev";
     private const string ReaderAlignmentButtonCssClass = "rd-align-btn";
-    private const int ReaderCenterOpticalInsetPixels = 0;
-    private const int ReaderComfortableContentMaxWidth = 1080;
-    private const int ReaderComfortablePortraitContentMaxWidth = 760;
-    private const string ReaderContentMaxWidthVariableName = "--rd-content-max-width";
+    private const double ReaderContentWidthScaleFactor = 0.92d;
     private const string ReaderControlButtonCssClass = "rd-ctrl-btn";
     private const string ReaderCountdownCssClass = "rd-countdown";
     private const string ReaderGradientCssClass = "rd-gradient";
@@ -28,15 +25,18 @@ public partial class TeleprompterPage
     private const string ReaderHorizontalGuideCssClass = "rd-guide-h";
     private const string ReaderMirrorButtonCssClass = "rd-mirror-btn";
     private const string ReaderMirrorHorizontalTransform = "scaleX(-1)";
-    private const string ReaderOpticalInsetVariableName = "--rd-text-optical-inset";
     private const string ReaderOrientationLandscapeValue = "landscape";
     private const string ReaderOrientationPortraitTransform = "rotate(90deg)";
     private const string ReaderOrientationPortraitValue = "portrait";
+    private const string ReaderPercentSuffix = "%";
     private const string ReaderTextAlignmentCenterValue = "center";
     private const string ReaderTextAlignmentJustifyValue = "justify";
     private const string ReaderTextAlignmentLeftValue = "left";
     private const string ReaderTextAlignmentRightValue = "right";
     private const string ReaderMirrorTransformOrigin = "center center";
+    private const string ReaderStageContentScaleVariableName = "--rd-stage-content-scale";
+    private const string ReaderStageShellWidthVariableName = "--rd-stage-shell-width";
+    private const string ReaderStageWidthScaleVariableName = "--rd-stage-width-scale";
     private const string ReaderMirrorVerticalTransform = "scaleY(-1)";
     private const string ReaderVerticalGuideCssClass = "rd-guide-v";
     private const string ReaderVerticalGuideLeftCssClass = "rd-guide-v-l";
@@ -130,27 +130,28 @@ private string BuildFocalGuideCssClass() =>
     private string BuildFocalGuideStyle() =>
         $"top:{_readerFocalPointPercent.ToString(CultureInfo.InvariantCulture)}%;";
 
+    private string BuildReaderStageStyle()
+    {
+        var widthScale = BuildReaderWidthScale(_readerTextWidthPercent).ToString("0.####", CultureInfo.InvariantCulture);
+        var contentScale = BuildReaderContentScale(_readerTextWidthPercent).ToString("0.####", CultureInfo.InvariantCulture);
+        return $"{ReaderStageWidthScaleVariableName}:{widthScale};{ReaderStageContentScaleVariableName}:{contentScale};";
+    }
+
     private string BuildWidthGuideCssClass(bool isLeft) =>
         BuildClassList(
             ReaderVerticalGuideCssClass,
             isLeft ? ReaderVerticalGuideLeftCssClass : ReaderVerticalGuideRightCssClass,
             _areWidthGuidesActive ? ActiveCssClass : null);
 
-    private string BuildWidthGuideStyle(bool isLeft)
-    {
-        var halfWidth = (_readerTextWidth / 2d).ToString("0.##", CultureInfo.InvariantCulture);
-        var sign = isLeft ? '-' : '+';
-        return $"left:calc(50% {sign} {halfWidth}px);";
-    }
+    private static string BuildWidthGuideStyle(bool isLeft) =>
+        isLeft
+            ? $"left:calc(50% - (var({ReaderStageShellWidthVariableName}) / 2));"
+            : $"left:calc(50% + (var({ReaderStageShellWidthVariableName}) / 2));";
 
     private string BuildClusterWrapStyle()
     {
-        var contentMaxWidth = ResolveReaderContentMaxWidth();
         var styleParts = new List<string>
         {
-            $"max-width:{_readerTextWidth.ToString(CultureInfo.InvariantCulture)}px",
-            $"{ReaderContentMaxWidthVariableName}:{contentMaxWidth.ToString(CultureInfo.InvariantCulture)}px",
-            $"{ReaderOpticalInsetVariableName}:{ResolveReaderTextOpticalInset(contentMaxWidth).ToString(CultureInfo.InvariantCulture)}px",
             $"--rd-font-size:{_readerFontSize.ToString(CultureInfo.InvariantCulture)}px"
         };
         var readerTransform = BuildReaderTransform();
@@ -164,23 +165,14 @@ private string BuildClusterWrapStyle()
         return string.Join(';', styleParts) + ';';
     }
 
-    private int ResolveReaderContentMaxWidth()
-    {
-        var contentMaxWidth = Math.Min(_readerTextWidth, ReaderComfortableContentMaxWidth);
-        return _readerTextOrientation == ReaderTextOrientation.Portrait
-            ? Math.Min(contentMaxWidth, ReaderComfortablePortraitContentMaxWidth)
-            : contentMaxWidth;
-    }
+    private string BuildReaderWidthLabel() =>
+        $"{_readerTextWidthPercent.ToString(CultureInfo.InvariantCulture)}{ReaderPercentSuffix}";
 
-    private int ResolveReaderTextOpticalInset(int contentMaxWidth)
-    {
-        if (_readerTextAlignment is ReaderTextAlignment.Center or ReaderTextAlignment.Justify)
-        {
-            return ReaderCenterOpticalInsetPixels;
-        }
+    private static double BuildReaderWidthScale(int textWidthPercent) =>
+        Math.Clamp(textWidthPercent / (double)ReaderMaxTextWidthPercent, ReaderMinTextWidthPercent / 100d, 1d);
 
-        return Math.Clamp((int)Math.Round(contentMaxWidth * 0.06d, MidpointRounding.AwayFromZero), 28, 64);
-    }
+    private static double BuildReaderContentScale(int textWidthPercent) =>
+        Math.Round(BuildReaderWidthScale(textWidthPercent) * ReaderContentWidthScaleFactor, 4, MidpointRounding.AwayFromZero);
 
     private string BuildReaderTransform()
     {

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor

@@ -232,15 +232,15 @@
                     <input type="range"
                            class="rd-vslider"
                            id="rd-width-slider"
-                           min="@ReaderMinTextWidth"
-                           max="@ReaderMaxTextWidth"
-                           value="@_readerTextWidth"
+                           min="@ReaderMinTextWidthPercent"
+                           max="@ReaderMaxTextWidthPercent"
+                           value="@_readerTextWidthPercent"
                            @oninput="HandleReaderTextWidthInputAsync"
                            @onkeydown:stopPropagation="true"
                            aria-label="@ReaderWidthSliderTitle"
                            data-testid="@UiTestIds.Teleprompter.WidthSlider"
                            data-test-id="@UiTestIds.Teleprompter.WidthSlider">
-                    <span class="rd-slider-val" id="@UiDomIds.Teleprompter.WidthValue">@_readerTextWidth</span>
+                    <span class="rd-slider-val" id="@UiDomIds.Teleprompter.WidthValue">@BuildReaderWidthLabel()</span>
                 </div>
                 <span id="@BuildRailTooltipDomId(UiTestIds.Teleprompter.AlignmentTooltipWidthKey)"
                       class="@BuildRailTooltipCssClass(placeOnRightSide: false)"
@@ -252,7 +252,8 @@
 
             <div class="rd-stage"
                  id="@UiDomIds.Teleprompter.Stage"
-                 data-testid="@UiTestIds.Teleprompter.Stage">
+                 data-testid="@UiTestIds.Teleprompter.Stage"
+                 style="@BuildReaderStageStyle()">
                 <div class="rd-center-guide"></div>
                 <div class="@BuildFocalGuideCssClass()"
                      id="@UiDomIds.Teleprompter.FocalGuide"