ok getting better!

src/components/TensePicker.tsx

@@ -0,0 +1,180 @@
+import Select from "react-select";
+import {
+    zIndexProps,
+} from "./np-picker/picker-tools";
+import {
+    ButtonSelect,
+} from "@lingdocs/pashto-inflector";
+import { isPerfectTense } from "../lib/phrase-building/vp-tools";
+
+const tenseOptions: { label: string | JSX.Element, value: VerbTense }[] = [{
+    label: <div><i className="fas fa-video mr-2" />present</div>,
+    value: "presentVerb",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />subjunctive</div>,
+    value: "subjunctiveVerb",
+}, {
+    label: <div><i className="fas fa-video mr-2" />imperf. future</div>,
+    value: "imperfectiveFuture",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />perf. future</div>,
+    value: "perfectiveFuture",
+}, {
+    label: <div><i className="fas fa-video mr-2" />continuous past</div>,
+    value: "imperfectivePast",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />simple past</div>,
+    value: "perfectivePast",
+}, {
+    label: <div><i className="fas fa-video mr-2" />habitual cont. past</div>,
+    value: "habitualImperfectivePast",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />habitual simp. past</div>,
+    value: "habitualPerfectivePast",
+}];
+
+const perfectTenseOptions: { label: string | JSX.Element, value: PerfectTense }[] = [{
+    label: "Present Perfect",
+    value: "present perfect",
+}, {
+    label: "Habitual Perfect",
+    value: "habitual perfect",
+}, {
+    label: "Subjunctive Perfect",
+    value: "subjunctive perfect",
+}, {
+    label: "Future Perfect",
+    value: "future perfect",
+}, {
+    label: "Past Perfect",
+    value: "past perfect",
+}, {
+    label: `"Would Be" Perfect`,
+    value: "wouldBe perfect",
+}, {
+    label: "Past Subjunctive Perfect",
+    value: "pastSubjunctive perfect",
+}];
+
+function TensePicker({ onChange, verb, mode }: {
+    verbs: VerbEntry[],
+    verb: VerbSelection | undefined,
+    onChange: (p: VerbSelection | undefined) => void,
+    mode: "charts" | "phrases",
+}) {
+    function onTenseSelect(o: { value: VerbTense | PerfectTense } | null) {
+        const value = o?.value ? o.value : undefined; 
+        if (verb && value) {
+            if (isPerfectTense(value)) {
+                onChange({
+                    ...verb,
+                    tense: value,
+                    tenseCategory: "perfect",
+                });
+            } else {
+                onChange({
+                    ...verb,
+                    tense: value,
+                    tenseCategory: verb.tenseCategory === "perfect" ? "basic" : verb.tenseCategory,
+                });
+            }
+        }
+    }
+    function moveTense(dir: "forward" | "back") {
+        if (!verb) return;
+        return () => {
+            const tenses = verb.tenseCategory === "perfect" ? perfectTenseOptions : tenseOptions;
+            const currIndex = tenses.findIndex(tn => tn.value === verb.tense)
+            if (currIndex === -1) {
+                console.error("error moving tense", dir);
+                return;
+            }
+            const newIndex = dir === "forward"
+                ? ((currIndex + 1) % tenses.length)
+                : (currIndex === 0 ? (tenses.length - 1) : (currIndex - 1))
+            const newTense = tenses[newIndex];
+            onTenseSelect(newTense);
+        };
+    }
+    function onPosNegSelect(value: string) {
+        if (verb) {
+            onChange({
+                ...verb,
+                negative: value === "true",
+            });
+        }
+    }
+    function onTenseCategorySelect(value: "basic" | "modal" | "perfect") {
+        if (verb) {
+            if (value === "perfect") {
+                onChange({
+                    ...verb,
+                    tenseCategory: value,
+                    tense: isPerfectTense(verb.tense) ? verb.tense : "present perfect",
+                });
+            } else {
+                onChange({
+                    ...verb,
+                    tenseCategory: value,
+                    tense: isPerfectTense(verb.tense) ? "presentVerb" : verb.tense,
+                });
+            }
+        }
+    }
+    const tOptions = (verb?.tenseCategory === "perfect") ? perfectTenseOptions : tenseOptions;
+    return <div className="mb-0 mt-3">
+        <div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}>
+            <div className="d-flex flex-row justify-content-between align-items-center">
+                <div className="h5">Tense:</div>
+                {verb && <div className="mb-2">
+                    <ButtonSelect
+                        small
+                        value={verb.tenseCategory}
+                        options={[{
+                            label: "Basic",
+                            value: "basic",
+                        }, {
+                            label: "Perfect",
+                            value: "perfect",
+                        }, {
+                            label: "Modal",
+                            value: "modal",
+                        }]}
+                        handleChange={onTenseCategorySelect}
+                    />
+                </div>}
+            </div>
+            <Select
+                isSearchable={false}
+                // for some reason can't use tOptions with find here;
+                value={verb && ([...tenseOptions, ...perfectTenseOptions].find(o => o.value === verb.tense))}
+                onChange={onTenseSelect}
+                className="mb-2"
+                options={tOptions}
+                {...zIndexProps}
+            />
+            {verb && <div className="d-flex flex-row justify-content-between align-items-center mt-3 mb-1" style={{ width: "100%" }}>
+                <div onClick={moveTense("back")} className="clickable">
+                    <i className="fas fa-chevron-left" />
+                </div>
+                {mode !== "charts" && <ButtonSelect
+                    small
+                    value={verb.negative.toString()}
+                    options={[{
+                        label: "Pos.",
+                        value: "false",
+                    }, {
+                        label: "Neg.",
+                        value: "true",
+                    }]}
+                    handleChange={onPosNegSelect}
+                />}
+                <div onClick={moveTense("forward")} className="clickable">
+                    <i className="fas fa-chevron-right" />
+                </div>
+            </div>}
+        </div>
+    </div>;
+}
+
+export default TensePicker;

src/components/VerbPicker.tsx

@@ -1,22 +1,32 @@
 import {
     ButtonSelect,
     Types as T,
+    RootsAndStems,
+    getVerbInfo,
 } from "@lingdocs/pashto-inflector";
+import Hider from "@lingdocs/pashto-inflector/dist/components/Hider";
 import {
     makeVerbSelection,
 } from "./phrase-builder/verb-selection";
 import EntrySelect from "./EntrySelect";
+import useStickyState from "../useStickyState";
 
 // TODO: dark on past tense selecitons
 
-function VerbPicker({ onChange, subject, changeSubject, verb, verbs, opts }: {
+function VerbPicker({ onChange, subject, changeSubject, verb, verbs, opts, verbLocked }: {
     verbs: VerbEntry[],
     verb: VerbSelection | undefined,
     subject: NPSelection | undefined,
     onChange: (p: VerbSelection | undefined) => void,
     changeSubject: (p: NPSelection | undefined) => void,
     opts: T.TextOptions,
+    verbLocked: boolean,
 }) {
+    const [showRootsAndStems, setShowRootsAndStems] = useStickyState<boolean>(false, "showRootsAndStems");
+    const info = verb ? getVerbInfo(verb.verb.entry, verb.verb.complement) : undefined;
+    if (info && ("stative" in info || "transitive" in info)) {
+        return <div>ERROR: Verb version should be select first</div>;
+    }
     // const [filters, useFilters] = useState<Filters>({
     //     stative: true,
     //     dynamic: true,
@@ -56,7 +66,7 @@ function VerbPicker({ onChange, subject, changeSubject, verb, verbs, opts }: {
         }
     }
     return <div className="mb-3">
-        <div style={{ maxWidth: "300px", margin: "0 auto" }}>
+        {!verbLocked && <div style={{ maxWidth: "300px", margin: "0 auto" }}>
             <div className="h5">Verb:</div>
             <EntrySelect
                 entries={verbs}
@@ -66,7 +76,20 @@ function VerbPicker({ onChange, subject, changeSubject, verb, verbs, opts }: {
                 isVerbSelect
                 opts={opts}
             />
-        </div>
+        </div>}
+        {info && <div className="mt-3 mb-1 text-center">
+            <Hider
+                showing={showRootsAndStems}
+                label="🌳 Roots and Stems"      
+                handleChange={() => setShowRootsAndStems(p => !p)}
+                hLevel={5}
+            >
+                <RootsAndStems
+                    textOptions={opts}
+                    info={info}
+                />
+            </Hider>
+        </div>}
         <div className="d-flex flex-row justify-content-around flex-wrap" style={{ maxWidth: "400px", margin: "0 auto" }}>
             {verb && verb.changeTransitivity && <div className="text-center my-2">
                 <ButtonSelect

src/components/np-picker/picker-tools.tsx

@@ -0,0 +1,81 @@
+import {
+    isPluralNounEntry,
+    isMascNounEntry,
+    isUnisexNounEntry,
+    isVerbEntry,
+} from "../../lib/type-predicates";
+import {
+    getEnglishParticiple,
+    getEnglishVerb,
+} from "../../lib/np-tools";
+import {
+    getEnglishWord,
+    removeFVarients,
+    Types as T,
+    InlinePs,
+} from "@lingdocs/pashto-inflector";
+
+export const zIndexProps = {
+    menuPortalTarget: document.body, 
+    styles: { menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) },
+};
+
+export function makeVerbSelectOption(e: VerbEntry, opts: T.TextOptions): { value: string, label: string | JSX.Element } {
+    const eng = getEnglishVerb(e.entry);
+    return {
+        label: <InlinePs opts={opts}>
+            {{ p: e.entry.p, f: removeFVarients(e.entry.f), e: eng }}
+        </InlinePs>,
+        value: e.entry.ts.toString(),
+    };
+}
+
+export function makeSelectOption(
+    e: T.DictionaryEntry | VerbEntry | NounEntry | AdjectiveEntry | LocativeAdverbEntry,
+    opts: T.TextOptions,    
+): { value: string, label: JSX.Element | string } {
+    const entry = "entry" in e ? e.entry : e;
+    const eng = (isVerbEntry(e)) 
+        ? (getEnglishParticiple(e.entry))
+        : getEnglishWord(e);
+    const english = typeof eng === "string"
+        ? eng
+        : !eng
+        ? ""
+        : ("singular" in eng && eng.singular !== undefined)
+        ? eng.singular
+        : eng.plural;
+    return {
+        label: <InlinePs opts={opts}>
+            {{ p: entry.p, f: removeFVarients(entry.f), e: english }}
+        </InlinePs>,
+        value: entry.ts.toString(),
+    };
+}
+
+export function makeNounSelection(entry: NounEntry, dynamicComplement?: true): NounSelection {
+    const number = isPluralNounEntry(entry) ? "plural" : "singular";
+    return {
+        type: "noun",
+        entry,
+        gender: isMascNounEntry(entry) ? "masc" : "fem",
+        number,
+        dynamicComplement,
+        ...isUnisexNounEntry(entry) ? {
+            changeGender: function(gender: T.Gender): NounSelection {
+                return {
+                    ...this,
+                    gender,
+                };
+            },
+        } : {},
+        ...number === "singular" ? {
+            changeNumber: function(number: NounNumber): NounSelection {
+                return {
+                    ...this,
+                    number,
+                };
+            },
+        } : {},
+    };
+}

src/components/phrase-builder/ChartDisplay.tsx

@@ -0,0 +1,29 @@
+import {
+    conjugateVerb,
+    VerbFormDisplay,
+    Types as T,
+} from "@lingdocs/pashto-inflector";
+import {
+    getTenseVerbForm,
+} from "../../lib/phrase-building/vp-tools";
+
+function ChartDisplay({ VS, opts }: { VS: VerbSelection, opts: T.TextOptions }) {
+    const conjugations = conjugateVerb(VS.verb.entry, VS.verb.complement);
+    if (!conjugations) {
+        return <div>Error conjugating verb</div>;
+    }
+    if ("stative" in conjugations || "transitive" in conjugations) {
+        return <div>Error: compound or transitivity type should be selected first</div>;
+    }
+    const form = getTenseVerbForm(conjugations, VS.tense, VS.tenseCategory, VS.voice);
+    return <div className="mb-4">
+        <VerbFormDisplay
+            displayForm={form}
+            showingFormInfo={false}
+            textOptions={opts}
+            info={conjugations.info}
+        />
+    </div>;
+}
+
+export default ChartDisplay;

src/components/phrase-builder/PhraseBuilder.tsx

@@ -14,6 +14,8 @@ import {
     Types as T,
 } from "@lingdocs/pashto-inflector";
 import ChartDisplay from "./ChartDisplay";
+import useStickyState from "../../useStickyState";
+import { makeVerbSelection } from "./verb-selection";
 
 const kingEmoji = "👑";
 const servantEmoji = "🙇‍♂️";
@@ -34,9 +36,11 @@ export function PhraseBuilder(props: {
     verb?: VerbEntry,
     opts?: T.TextOptions,
 }) {
-    const [subject, setSubject] = useState<NPSelection | undefined>(undefined);
+    const [subject, setSubject] = useStickyState<NPSelection | undefined>(undefined, "subjectNPSelection");
-    const [mode, setMode] = useState<"charts" | "phrases">("phrases");
+    const [mode, setMode] = useStickyState<"charts" | "phrases">("phrases", "verbExplorerMode");
-    const [verb, setVerb] = useState<VerbSelection | undefined>(undefined);
+    const [verb, setVerb] = useState<VerbSelection | undefined>(
+        props.verb ? makeVerbSelection(props.verb, setSubject, undefined) : undefined,
+    );
     const textOpts = props.opts || defaultTextOptions;
     function handleSubjectChange(subject: NPSelection | undefined, skipPronounConflictCheck?: boolean) {
         if (!skipPronounConflictCheck && hasPronounConflict(subject, verb?.object)) {
@@ -69,6 +73,7 @@ export function PhraseBuilder(props: {
             <div>{servantEmoji} = <abbr title="can be shrunken into a mini-pronoun">servant</abbr> of phrase</div>
         </div>
         <VerbPicker
+            verbLocked={!!props.verb}
             verbs={verbs}
             verb={verb}
             subject={subject}
@@ -86,7 +91,7 @@ export function PhraseBuilder(props: {
                 handleChange={setMode}
             />
         </div>
-        {(verb && (typeof verb.object === "object") && (verb.isCompound !== "dynamic")) &&
+        {(verb && (typeof verb.object === "object") && (verb.isCompound !== "dynamic") && (mode !== "charts")) &&
             <div className="text-center mt-4">
                 <button onClick={handleSubjObjSwap} className="btn btn-sm btn-light">
                     <i className="fas fa-exchange-alt mr-2" /> subj/obj