length select on vp display

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "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/DisplayModeSelect.tsx

@@ -23,4 +23,14 @@ export function ScriptSelect({ value, onChange }: { value: "p" | "f", onChange:
     </button>;
 }
 
+export function LengthSelect({ value, onChange }: { value: "long" | "short", onChange: (l: "long" | "short") => void }) {
+    return <button style={{ marginLeft: "1.5rem" }} className="btn btn-sm btn-light">
+        {value === "long" ? <div className="clickable" onClick={() => onChange("short")}>
+            long
+        </div> : <div className="clickable" onClick={() => onChange("long")}>
+            short
+        </div>}
+    </button>;
+}
+
 export default ModeSelect;

src/components/vp-explorer/VPDisplay.tsx

@@ -4,13 +4,13 @@ import AbbreviationFormSelector from "./AbbreviationFormSelector";
 import { getObjectSelection, getSubjectSelection } from "../../lib/phrase-building/blocks-utils";
 import { completeVPSelection } from "../../lib/phrase-building/vp-tools";
 import { renderVP } from "../../library";
-import ModeSelect, { Mode, ScriptSelect } from "../DisplayModeSelect";
+import ModeSelect, { LengthSelect, Mode, ScriptSelect } from "../DisplayModeSelect";
 import { useState } from "react";
 import CompiledPTextDisplay from "../CompiledPTextDisplay";
 import RenderedBlocksDisplay from "../RenderedBlocksDisplay";
 import useStickyState from "../../lib/useStickyState";
 
-function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript }: {
+function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript, onLengthChange }: {
     VPS: T.VPSelectionState,
     opts: T.TextOptions,
     setForm: "disable" | ((form: T.FormVersion) => void),
@@ -18,7 +18,8 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
     onlyOne?: boolean | "concat",
     length?: "long" | "short",
     mode?: Mode,
-    script?: "p" | "f"
+    script?: "p" | "f",
+    onLengthChange?: (length: "long" | "short") => void,
 }) {
     const [mode, setMode] = useState<Mode>(preferredMode || "text");
     const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice");
@@ -46,6 +47,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
         <div className="d-flex flex-row">
             <ModeSelect value={mode} onChange={setMode} />
             {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
+            {mode === "text" && length && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />}
         </div>
         {mode === "text"
             ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} />

src/components/vp-explorer/VPPicker.tsx

@@ -105,7 +105,7 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
                                 Subj. <span onClick={() => setShowingExplanation({ role: "king", item: "subject" })}>{roleIcon.king}</span>
                                 {(rendered && rendered.whatsAdjustable !== "servant") && 
                                     <span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable">
-                                        {!VPS?.form.removeKing ? "🚫" : "🙈"}
+                                        {!VPS?.form.removeKing ? "🙈" : "🚫" }
                                     </span>
                                 }
                             </div>
@@ -148,7 +148,7 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
                                         Obj. <span onClick={() => setShowingExplanation({ role: "king", item: "object" })}>{roleIcon.king}</span>
                                             {(rendered && rendered.whatsAdjustable !== "servant") && 
                                                 <span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable">
-                                                    {!VPS?.form.removeKing ? "🚫" : "🙈"}
+                                                    {!VPS?.form.removeKing ? "🙈" : "🚫"}
                                                 </span>
                                             }
                                         </div>

src/lib/phrase-building/english-vp-rendering.ts

@@ -54,7 +54,7 @@ export function renderEnglishVPBase({ subjectPerson, object, vs }: {
             `$SUBJ ${engEquative("present", s)}${n ? " not" : ""} ${ec[2]}`,
         ]),
         subjunctiveVerb: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([
-            `$SUBJ ${n ? " not" : ""} should ${isToBe(ec) ? "be" : ec[0]}`,
+            `$SUBJ should${n ? " not" : ""} ${isToBe(ec) ? "be" : ec[0]}`,
             `that $SUBJ ${n ? " won't" : " will"} ${isToBe(ec) ? "be" : ec[0]}`,
         ]),
         imperfectiveFuture: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([