ability to prefer length on VPDisplay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.1.9",
+  "version": "3.2.0",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/components/CompiledPTextDisplay.tsx

@@ -1,8 +1,8 @@
-import { getShort } from "../lib/p-text-helpers";
+import { getLength, getShort } from "../lib/p-text-helpers";
 import * as T from "../types";
 import Examples from "./Examples";
 
-function CompiledPTextDisplay({ compiled, opts, justify, onlyOne }: {
+function CompiledPTextDisplay({ compiled, opts, justify, onlyOne, length }: {
     compiled: {
         ps: T.SingleOrLengthOpts<T.PsString[]>;
         e?: string[] | undefined;
@@ -10,22 +10,26 @@ function CompiledPTextDisplay({ compiled, opts, justify, onlyOne }: {
     opts: T.TextOptions,
     justify?: "left" | "right" | "center",
     onlyOne?: boolean,
+    length?: "long" | "short",
 }) {
     function VariationLayer({ vs }: { vs: T.PsString[] }) {
         return <div className="mb-2">
             <Examples opts={opts} lineHeight={0}>{vs}</Examples>
         </div>;
     }
+    const ps = length
+        ? getLength(compiled.ps, length)
+        : compiled.ps;
     return <div className={justify === "left" ? "text-left" : justify === "right" ? "text-right" : "text-center"}>
         {onlyOne
-            ? <VariationLayer vs={[getShort(compiled.ps)[0]]} />
-            : "long" in compiled.ps ?
+            ? <VariationLayer vs={[getShort(ps)[0]]} />
+            : "long" in ps ?
                 <div>
-                    <VariationLayer vs={compiled.ps.long} />
-                    <VariationLayer vs={compiled.ps.short} />
-                    {compiled.ps.mini && <VariationLayer vs={compiled.ps.mini} />}
+                    <VariationLayer vs={ps.long} />
+                    <VariationLayer vs={ps.short} />
+                    {ps.mini && <VariationLayer vs={ps.mini} />}
                 </div>
-                : <VariationLayer vs={compiled.ps} />
+                : <VariationLayer vs={ps} />
         }
     </div>;
 }

src/components/vp-explorer/VPDisplay.tsx

@@ -10,12 +10,13 @@ import CompiledPTextDisplay from "../CompiledPTextDisplay";
 import RenderedBlocksDisplay from "../RenderedBlocksDisplay";
 import useStickyState from "../../lib/useStickyState";
 
-function VPDisplay({ VPS, opts, setForm, justify, onlyOne }: {
+function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length }: {
     VPS: T.VPSelectionState,
     opts: T.TextOptions,
     setForm: "disable" | ((form: T.FormVersion) => void),
     justify?: "left" | "right" | "center",
     onlyOne?: boolean | "concat",
+    length?: "long" | "short",
 }) {
     const [mode, setMode] = useState<Mode>("text");
     const [script, setScript] = useStickyState<"p" | "f">("f", "blockScriptChoice");
@@ -45,7 +46,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne }: {
             {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
         </div>
         {mode === "text"
-            ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} />
+            ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} />
             : <RenderedBlocksDisplay opts={opts} rendered={rendered} justify={justify} script={script} />}
         {result.e && <div className={`text-muted mt-2 text-${justify === "left" ? "left" : justify === "right" ? "right" : "center"}`}>
             {onlyOne === "concat"