added demonstrative pronouns

2024-07-27 21:03:56 -04:00 · 2024-07-27 21:03:56 -04:00 · 453216e6f1
parent 46fd6e66e8
commit 453216e6f1
18 changed files with 985 additions and 753 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "pashto-inflector",
-  "version": "7.2.2",
+  "version": "7.3.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "pashto-inflector",
-      "version": "7.2.2",
+      "version": "7.3.0",
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pashto-inflector",
-  "version": "7.2.2",
+  "version": "7.3.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",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -20,7 +20,7 @@ import Hider from "./components/src/Hider";
 import InflectionDemo from "./demo-components/InflectionDemo";
 import SpellingDemo from "./demo-components/SpellingDemo";
 import ParserDemo from "./demo-components/ParserDemo";
-import InflectionTable from "./components/src/InflectionsTable";
+// import InflectionTable from "./components/src/InflectionsTable";

 function App() {
  const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>(
--- a/src/components/package-lock.json
+++ b/src/components/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "@lingdocs/ps-react",
-  "version": "7.2.2",
+  "version": "7.3.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@lingdocs/ps-react",
-      "version": "7.2.2",
+      "version": "7.3.0",
      "license": "MIT",
      "dependencies": {
        "@formkit/auto-animate": "^1.0.0-beta.3",
--- a/src/components/package.json
+++ b/src/components/package.json
@ -1,6 +1,6 @@
 {
  "name": "@lingdocs/ps-react",
-  "version": "7.2.2",
+  "version": "7.3.0",
  "description": "Pashto inflector library module with React components",
  "main": "dist/components/library.js",
  "module": "dist/components/library.js",
--- a/src/components/src/blocks/Block.tsx
+++ b/src/components/src/blocks/Block.tsx
@ -600,6 +600,27 @@ function Sandwich({
  );
 }

+function Demonstrative({
+  opts,
+  script,
+  children,
+}: {
+  opts: T.TextOptions;
+  script: "p" | "f";
+  children: T.Rendered<T.DemonstrativeSelection> | undefined;
+}) {
+  if (!children) {
+    return null;
+  }
+  return (
+    <div className="text-center">
+      <Border padding={"1rem"}>{children.ps[script]}</Border>
+      <div>DEM</div>
+      <SubText>{children.e}</SubText>
+    </div>
+  );
+}
+
 function CompNounBlock({
  opts,
  noun,
@ -612,7 +633,7 @@ function CompNounBlock({
  return (
    <div className="text-center">
      <Border
-        extraClassName={`!inside && hasPossesor ? "pt-2" : ""`}
+        // extraClassName={`${!inside && hasPossesor} ? "pt-2" : ""`}
        padding={"1rem"}
      >
        {flattenLengths(noun.ps)[0][script]}
@ -652,6 +673,9 @@ export function NPBlock({
          </Possesors>,
        ]
      : []),
+    <Demonstrative opts={opts} script={script}>
+      {np.selection.demonstrative ? np.selection.demonstrative : undefined}
+    </Demonstrative>,
    <Adjectives opts={opts} script={script}>
      {np.selection.adjectives}
    </Adjectives>,
@ -659,12 +683,15 @@ export function NPBlock({
      {" "}
      {flattenLengths(np.selection.ps)[0][script]}
    </div>,
-  ];
+  ].filter((x) => {
+    // @ts-ignore
+    return x !== " ";
+  });
  const el = script === "p" ? elements.reverse() : elements;
  return (
    <div className="text-center">
      <Border
-        extraClassName={`!inside && hasPossesor ? "pt-2" : ""`}
+        // extraClassName={`!inside && hasPossesor ? "pt-2" : ""`}
        padding={
          inside
            ? "0.3rem"
@ -759,6 +786,9 @@ function Adjectives({
    return null;
  }
  const c = script === "p" ? children.reverse() : children;
+  if (c.length === 0) {
+    return null;
+  }
  return (
    <em className="mr-1">
      {c.map((a) => a.ps[0][script]).join(" ")}
--- a/src/components/src/np-picker/AdjectiveManager.tsx
+++ b/src/components/src/np-picker/AdjectiveManager.tsx
@ -1,27 +1,21 @@
 import * as T from "../../../types";
 import { useState } from "react";
 import AdjectivePicker from "./AdjectivePicker";
-import classNames from "classnames";

 function AdjectiveManager(props: {
-    adjectives: T.AdjectiveSelection[],
-    entryFeeder: T.EntryFeeder,
-    opts: T.TextOptions,
-    demonstrative: T.NounSelection["demonstrative"],
-    onChange: (adjs: T.AdjectiveSelection[]) => void,
-    onDemonstrativeChange: (dem: T.NounSelection["demonstrative"]) => void,
-    phraseIsComplete: boolean,
+  adjectives: T.AdjectiveSelection[];
+  entryFeeder: T.EntryFeeder;
+  opts: T.TextOptions;
+  onChange: (adjs: T.AdjectiveSelection[]) => void;
+  phraseIsComplete: boolean;
 }) {
  const [adding, setAdding] = useState<boolean>(false);
-    const [addingDemonstrative, setAddingDemonstrative] = useState<boolean>(false);
  function handleChange(i: number) {
    return (a: T.AdjectiveSelection | undefined) => {
      if (a === undefined) return;
      const updated = [...props.adjectives];
      updated[i] = a;
-            props.onChange(
-                updated.filter((x): x is T.AdjectiveSelection => !!x)
-            );
+      props.onChange(updated.filter((x): x is T.AdjectiveSelection => !!x));
    };
  }
  function deleteAdj(i: number) {
@ -32,16 +26,15 @@ function AdjectiveManager(props: {
  function handleAddNew(a: T.AdjectiveSelection | undefined) {
    if (a === undefined) return;
    setAdding(false);
-        props.onChange([
-            a,
-            ...props.adjectives,
-        ]);
+    props.onChange([a, ...props.adjectives]);
  }
  // const flippedList = [...props.adjectives];
  // flippedList.reverse();
  // console.log(props.adjectives);
-    return <div className="mb-1">
-        {adding && <div>
+  return (
+    <div className="mb-1">
+      {adding && (
+        <div>
          <div className="d-flex flex-row justify-content-between mb-1">
            <div>Add Adjective</div>
            <div className="clickable" onClick={() => setAdding(false)}>
@ -56,29 +49,21 @@ function AdjectiveManager(props: {
            opts={props.opts}
            onChange={handleAddNew}
          />
-        </div>}
-        {addingDemonstrative && <div>
-            <div className="d-flex flex-row justify-content-between mb-1">
-                <div>Add Demonstrative</div>
-                <div className="clickable" onClick={() => {
-                    setAddingDemonstrative(false);
-                    props.onDemonstrativeChange(undefined);
-                }}>
-                    <i className="fas fa-trash" />
        </div>
-            </div>
-            <DemonstrativePicker
-                demonstrative={props.demonstrative}
-                onChange={props.onDemonstrativeChange}
-            />
-        </div>}
-        {props.adjectives.map((adj, i) => <div key={i}>
+      )}
+
+      {props.adjectives.map((adj, i) => (
+        <div key={i}>
          <div className="d-flex flex-row justify-content-between">
            <div>Adjective</div>
            <div className="d-flex flex-row align-items-baseline">
-                    {!!props.adjectives.length && !adding && <div>
-                        <div className="clickable h6" onClick={() => setAdding(true)}>+ Adj.</div>
-                    </div>}
+              {!!props.adjectives.length && !adding && (
+                <div>
+                  <div className="clickable h6" onClick={() => setAdding(true)}>
+                    + Adj.
+                  </div>
+                </div>
+              )}
              <div onClick={deleteAdj(i)} className="ml-4">
                <div className="fas fa-trash" />
              </div>
@ -93,61 +78,21 @@ function AdjectiveManager(props: {
            opts={props.opts}
            onChange={handleChange(i)}
          />
-        </div>)}
-        {!adding && !props.adjectives.length && <div className="h6 clickable" style={{ float: "right" }}>
-            <div className="clickable" onClick={() => setAdding(true)}>+ Adj.</div>
-        </div>}
-        {/* {!addingDemonstrative && !props.demonstrative && <h6 className="clickable mr-2" style={{ float: "right" }}>
-            <div className="clickable" onClick={() => setAddingDemonstrative(true)}>+ Demons.</div>
-        </h6>} */}
-    </div>;
-}
-
-function DemonstrativePicker({ demonstrative, onChange }: {
-    demonstrative: T.NounSelection["demonstrative"],
-    onChange: (dem: T.NounSelection["demonstrative"]) => void,
-}) {
-    function handleDChange(d: "daa" | "hagha" | "dagha") {
-        if (!demonstrative) {
-            onChange({
-                type: "demonstrative",
-                demonstrative: d,
-                hideNoun: false,
-            });
-        } else {
-            onChange({
-                ...demonstrative,
-                demonstrative: d,
-            });
-        }
-    }
-    return <div className="d-flex flex-row justify-content-around py-1">
-        <div>
-            <button
-                className={classNames("btn", "btn-outline-secondary", { active: demonstrative?.demonstrative === "daa" })}
-                onClick={() => handleDChange("daa")}
-            >دا</button>
        </div>
-        <div>
-            <button
-                className={classNames("btn", "btn-outline-secondary", { active: demonstrative?.demonstrative === "hagha" })}
-                onClick={() => handleDChange("hagha")}
-            >هغه</button>
+      ))}
+      {!adding && !props.adjectives.length && (
+        <div className="h6 clickable" style={{ float: "right" }}>
+          <div className="clickable" onClick={() => setAdding(true)}>
+            + Adj.
          </div>
-        <div>
-            <button
-                className={classNames("btn", "btn-outline-secondary", { active: demonstrative?.demonstrative === "dagha" })}
-                onClick={() => handleDChange("dagha")}
-            >دغه</button>
        </div>
-    </div>;
+      )}
+    </div>
+  );
 }

 function remove<X>(arr: X[], i: number): X[] {
-    return [
-        ...arr.slice(0, i),
-        ...arr.slice(i + 1),
-    ];
+  return [...arr.slice(0, i), ...arr.slice(i + 1)];
 }

 export default AdjectiveManager;
--- a/src/components/src/np-picker/DemonstrativePicker.tsx
+++ b/src/components/src/np-picker/DemonstrativePicker.tsx
@ -0,0 +1,59 @@
+import * as T from "../../../types";
+import classNames from "classnames";
+
+export default function DemonstrativePicker({
+  demonstrative,
+  onChange,
+}: {
+  demonstrative: T.NounSelection["demonstrative"];
+  onChange: (dem: T.NounSelection["demonstrative"]) => void;
+}) {
+  function handleDChange(d: "daa" | "hagha" | "dagha") {
+    if (!demonstrative) {
+      onChange({
+        type: "demonstrative",
+        demonstrative: d,
+        hideNoun: false,
+      });
+    } else {
+      onChange({
+        ...demonstrative,
+        demonstrative: d,
+      });
+    }
+  }
+  return (
+    <div className="d-flex flex-row justify-content-around py-1">
+      <div>
+        <button
+          className={classNames("btn", "btn-outline-secondary", {
+            active: demonstrative?.demonstrative === "daa",
+          })}
+          onClick={() => handleDChange("daa")}
+        >
+          دا
+        </button>
+      </div>
+      <div>
+        <button
+          className={classNames("btn", "btn-outline-secondary", {
+            active: demonstrative?.demonstrative === "dagha",
+          })}
+          onClick={() => handleDChange("dagha")}
+        >
+          دغه
+        </button>
+      </div>
+      <div>
+        <button
+          className={classNames("btn", "btn-outline-secondary", {
+            active: demonstrative?.demonstrative === "hagha",
+          })}
+          onClick={() => handleDChange("hagha")}
+        >
+          هغه
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/components/src/np-picker/NPNounPicker.tsx
+++ b/src/components/src/np-picker/NPNounPicker.tsx
@ -6,6 +6,8 @@ import InlinePs from "../InlinePs";
 // import { isFemNounEntry, isPattern1Entry, isPattern2Entry, isPattern3Entry, isPattern4Entry, isPattern5Entry, isPattern6FemEntry } from "../../lib/type-predicates";
 import EntrySelect from "../EntrySelect";
 import AdjectiveManager from "./AdjectiveManager";
+import { useState } from "react";
+import DemonstrativePicker from "./DemonstrativePicker";

 // const filterOptions = [
 //     {
@ -61,6 +63,8 @@ function NPNounPicker(props: {
  opts: T.TextOptions;
  phraseIsComplete: boolean;
 }) {
+  const [addingDemonstrative, setAddingDemonstrative] =
+    useState<boolean>(false);
  // const [patternFilter, setPatternFilter] = useState<FilterPattern | undefined>(undefined);
  // const [showFilter, setShowFilter] = useState<boolean>(false)
  // const nounsFiltered = props.nouns
@ -84,7 +88,7 @@ function NPNounPicker(props: {
      });
    }
  }
-  function handleDemonstrativeUpdate(
+  function handleDemonstrativeChange(
    demonstrative: undefined | T.NounSelection["demonstrative"]
  ) {
    if (props.noun) {
@ -96,6 +100,36 @@ function NPNounPicker(props: {
  }
  return (
    <div style={{ maxWidth: "225px", minWidth: "125px" }}>
+      {!addingDemonstrative && !props.noun?.demonstrative ? (
+        <div>
+          <span
+            className="clickable text-muted"
+            onClick={() => setAddingDemonstrative(true)}
+          >
+            + Demonstrative
+          </span>
+        </div>
+      ) : (
+        <div>
+          <div className="d-flex flex-row justify-content-between mb-1">
+            <div>{!props.noun?.demonstrative ? "Add" : ""} Demonstrative</div>
+            <div
+              className="clickable"
+              onClick={() => {
+                handleDemonstrativeChange(undefined);
+                setAddingDemonstrative(false);
+              }}
+            >
+              <i className="fas fa-trash" />
+            </div>
+          </div>
+          <DemonstrativePicker
+            demonstrative={props.noun?.demonstrative}
+            onChange={handleDemonstrativeChange}
+          />
+        </div>
+      )}
+
      {/* {showFilter && <div className="mb-2 text-center">
            <div className="d-flex flex-row justify-content-between">
                <div className="text-small mb-1">Filter by inflection pattern</div>
@ -113,11 +147,9 @@ function NPNounPicker(props: {
        <AdjectiveManager
          phraseIsComplete={props.phraseIsComplete}
          adjectives={props.noun?.adjectives}
-          demonstrative={props.noun.demonstrative}
          entryFeeder={props.entryFeeder}
          opts={props.opts}
          onChange={handelAdjectivesUpdate}
-          onDemonstrativeChange={handleDemonstrativeUpdate}
        />
      )}
      <div className="h6">Noun</div>
--- a/src/components/src/np-picker/NPPicker.tsx
+++ b/src/components/src/np-picker/NPPicker.tsx
@ -1,48 +1,62 @@
 import PronounPicker from "./NPPronounPicker";
 import NounPicker from "./NPNounPicker";
 import ParticiplePicker from "./NPParticiplePicker";
-import {
-    randomPerson,
-} from "../../../lib/src/np-tools";
+import { randomPerson } from "../../../lib/src/np-tools";
 import { useState, useEffect } from "react";
 import * as T from "../../../types";
 import { isSecondPerson } from "../../../lib/src/misc-helpers";

 const npTypes: T.NPType[] = ["pronoun", "noun", "participle"];

+// TODO: BUG WITH PICKING IMPERATIVE FORMS OUTSIDE OF SECOND PERSON!
+
 export const shrunkenBackground = "rgba(255, 206, 43, 0.15)";

 function NPPicker(props: {
-    heading?: JSX.Element | string,
-    onChange: (nps: T.NPSelection | undefined) => void,
-    np: T.NPSelection | undefined,
-    counterPart: T.NPSelection | T.VerbObject | undefined,
-    role: "subject" | "object" | "ergative" | "possesor",
-    opts: T.TextOptions,
-    cantClear?: boolean,
-    is2ndPersonPicker?: boolean,
-    entryFeeder: T.EntryFeeder,
-    phraseIsComplete: boolean,
-    isShrunk?: boolean,
-    isRemoved?: boolean,
+  heading?: JSX.Element | string;
+  onChange: (nps: T.NPSelection | undefined) => void;
+  np: T.NPSelection | undefined;
+  counterPart: T.NPSelection | T.VerbObject | undefined;
+  role: "subject" | "object" | "ergative" | "possesor";
+  opts: T.TextOptions;
+  cantClear?: boolean;
+  is2ndPersonPicker?: boolean;
+  entryFeeder: T.EntryFeeder;
+  phraseIsComplete: boolean;
+  isShrunk?: boolean;
+  isRemoved?: boolean;
 }) {
-    if (props.is2ndPersonPicker && ((props.np?.selection.type !== "pronoun") || !isSecondPerson(props.np.selection.person))) {
+  if (
+    props.is2ndPersonPicker &&
+    (props.np?.selection.type !== "pronoun" ||
+      !isSecondPerson(props.np.selection.person))
+  ) {
    throw new Error("can't use 2ndPerson NPPicker without a pronoun");
  }
  const [addingPoss, setAddingPoss] = useState<boolean>(false);
-    const [npType, setNpType] = useState<T.NPType | undefined>(props.np ? props.np.selection.type : undefined);
+  const [npType, setNpType] = useState<T.NPType | undefined>(
+    props.np ? props.np.selection.type : undefined
+  );
  const onChange = (np: T.NPSelection | undefined) => {
    props.onChange(ensureSingleShrink(props.np, np));
-        if ((np?.selection.type === "noun" || np?.selection.type === "participle") && np.selection.possesor) {
+    if (
+      (np?.selection.type === "noun" || np?.selection.type === "participle") &&
+      np.selection.possesor
+    ) {
      setAddingPoss(true);
    }
    setAddingPoss(false);
-    }
+  };
  useEffect(() => {
    setNpType(props.np ? props.np.selection.type : undefined);
  }, [props.np]);
  function handleClear() {
-        if (props.np && props.np.selection.type === "noun" && props.np.selection.dynamicComplement) return;
+    if (
+      props.np &&
+      props.np.selection.type === "noun" &&
+      props.np.selection.dynamicComplement
+    )
+      return;
    setNpType(undefined);
    onChange(undefined);
  }
@ -79,7 +93,10 @@ function NPPicker(props: {
    const isNewPosesser = checkForNewPossesor(p, props.np.selection.possesor);
    const possesor: T.PossesorSelection = {
      np: p,
-            shrunken: (!isNewPosesser && props.np.selection.possesor) ? props.np.selection.possesor.shrunken : false,
+      shrunken:
+        !isNewPosesser && props.np.selection.possesor
+          ? props.np.selection.possesor.shrunken
+          : false,
    };
    onChange({
      type: "NP",
@ -90,7 +107,13 @@ function NPPicker(props: {
    });
  }
  function handleToggleShrunken() {
-        if (!props.np || props.np.selection.type === "pronoun" || !props.np.selection.possesor || !props.phraseIsComplete) return;
+    if (
+      !props.np ||
+      props.np.selection.type === "pronoun" ||
+      !props.np.selection.possesor ||
+      !props.phraseIsComplete
+    )
+      return;
    onChange({
      type: "NP",
      selection: {
@ -102,31 +125,43 @@ function NPPicker(props: {
      },
    });
  }
-    const isDynamicComplement = props.np && props.np.selection.type === "noun" && props.np.selection.dynamicComplement;
-    const clearButton = (!props.cantClear && !props.is2ndPersonPicker && !isDynamicComplement) 
-        ? <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>
-        : <div></div>;
-    const possesiveLabel = props.np?.selection.type === "participle" ? "Subj/Obj" : "Possesor";
-    return <div style={{
+  const isDynamicComplement =
+    props.np &&
+    props.np.selection.type === "noun" &&
+    props.np.selection.dynamicComplement;
+  const clearButton =
+    !props.cantClear && !props.is2ndPersonPicker && !isDynamicComplement ? (
+      <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>
+        X
+      </button>
+    ) : (
+      <div></div>
+    );
+  const possesiveLabel =
+    props.np?.selection.type === "participle" ? "Subj/Obj" : "Possesor";
+  return (
+    <div
+      style={{
        opacity: props.isRemoved ? 0.5 : 1,
-    }}>
+      }}
+    >
      <div className="d-flex flex-row justify-content-between">
        <div></div>
        <div>
-                {typeof props.heading === "string"
-                    ? <div className="h5 text-center">{props.heading}</div>
-                    : props.heading}
-            </div>
-            <div>
-                {npType && clearButton}
+          {typeof props.heading === "string" ? (
+            <div className="h5 text-center">{props.heading}</div>
+          ) : (
+            props.heading
+          )}
        </div>
+        <div>{npType && clearButton}</div>
      </div>
      <div style={{ minWidth: "9rem" }}>
-                {!npType && <div className="text-center">
-                    <div className="h6 mr-3">
-                        Choose NP
-                    </div>
-                    {npTypes.map((npt) => <div key={npt} className="mb-2">
+        {!npType && (
+          <div className="text-center">
+            <div className="h6 mr-3">Choose NP</div>
+            {npTypes.map((npt) => (
+              <div key={npt} className="mb-2">
                <button
                  key={npt}
                  type="button"
@ -135,22 +170,43 @@ function NPPicker(props: {
                >
                  {npt}
                </button>
-                </div>)}
-            </div>}
-            {(props.np && props.np.selection.type !== "pronoun" && (props.np.selection.possesor || addingPoss)) && <div className="mb-3" style={{
+              </div>
+            ))}
+          </div>
+        )}
+        {props.np &&
+          props.np.selection.type !== "pronoun" &&
+          (props.np.selection.possesor || addingPoss) && (
+            <div
+              className="mb-3"
+              style={{
                paddingLeft: "0.65rem",
                borderLeft: "2px solid grey",
-                background: (props.np.selection.possesor?.shrunken && !props.isShrunk) ? shrunkenBackground : "inherit",
-            }}>
+                background:
+                  props.np.selection.possesor?.shrunken && !props.isShrunk
+                    ? shrunkenBackground
+                    : "inherit",
+              }}
+            >
              <div className="d-flex flex-row text-muted mb-2">
                <div>{possesiveLabel}:</div>
-                    {(props.np.selection.possesor && !props.isShrunk && props.phraseIsComplete) && <div className="clickable ml-3 mr-2" onClick={handleToggleShrunken}>
+                {props.np.selection.possesor &&
+                  !props.isShrunk &&
+                  props.phraseIsComplete && (
+                    <div
+                      className="clickable ml-3 mr-2"
+                      onClick={handleToggleShrunken}
+                    >
                      {!props.np.selection.possesor.shrunken ? "🪄" : "👶"}
-                    </div>}
-                    <div className="clickable ml-2" onClick={() => {
+                    </div>
+                  )}
+                <div
+                  className="clickable ml-2"
+                  onClick={() => {
                    setAddingPoss(false);
                    handlePossesiveChange(undefined);
-                    }}>
+                  }}
+                >
                  <i className="fas fa-trash" />
                </div>
              </div>
@ -159,54 +215,91 @@ function NPPicker(props: {
                onChange={handlePossesiveChange}
                counterPart={undefined}
                cantClear
-                    np={props.np.selection.possesor ? props.np.selection.possesor.np : undefined}
+                np={
+                  props.np.selection.possesor
+                    ? props.np.selection.possesor.np
+                    : undefined
+                }
                role="possesor"
                opts={props.opts}
                entryFeeder={props.entryFeeder}
              />
-            </div>}
-            {(npType === "noun" || npType === "participle") && props.np && !addingPoss && <div>
-                <span className="clickable text-muted" onClick={() => setAddingPoss(true)}>+ {possesiveLabel}</span>
-            </div>}
-            {(npType === "pronoun" && props.np?.selection.type === "pronoun")
-                ? <PronounPicker
+            </div>
+          )}
+        {(npType === "noun" || npType === "participle") &&
+          props.np &&
+          !addingPoss && (
+            <div>
+              <span
+                className="clickable text-muted"
+                onClick={() => setAddingPoss(true)}
+              >
+                + {possesiveLabel}
+              </span>
+            </div>
+          )}
+        {npType === "pronoun" && props.np?.selection.type === "pronoun" ? (
+          <PronounPicker
            role={props.role}
            pronoun={props.np.selection}
            onChange={(p) => onChange({ type: "NP", selection: p })}
            is2ndPersonPicker={props.is2ndPersonPicker}
            opts={props.opts}
          />
-                : npType === "noun"
-                ? <NounPicker
+        ) : npType === "noun" ? (
+          <NounPicker
            phraseIsComplete={props.phraseIsComplete}
            entryFeeder={props.entryFeeder}
-                    noun={(props.np && props.np.selection.type === "noun") ? props.np.selection : undefined}
-                    onChange={(s) => onChange(s ? { type: "NP", selection: s } : undefined)}
-                    opts={props.opts}
-                />
-                : npType === "participle"
-                ? <ParticiplePicker
-                    entryFeeder={props.entryFeeder.verbs}
-                    participle={(props.np && props.np.selection.type === "participle") ? props.np.selection : undefined}
-                    onChange={(s) => onChange(s ? { type: "NP", selection: s } : undefined)}
-                    opts={props.opts}
-                />
-                : null
+            noun={
+              props.np && props.np.selection.type === "noun"
+                ? props.np.selection
+                : undefined
            }
+            onChange={(s) =>
+              onChange(s ? { type: "NP", selection: s } : undefined)
+            }
+            opts={props.opts}
+          />
+        ) : npType === "participle" ? (
+          <ParticiplePicker
+            entryFeeder={props.entryFeeder.verbs}
+            participle={
+              props.np && props.np.selection.type === "participle"
+                ? props.np.selection
+                : undefined
+            }
+            onChange={(s) =>
+              onChange(s ? { type: "NP", selection: s } : undefined)
+            }
+            opts={props.opts}
+          />
+        ) : null}
      </div>
-    </div>;
+    </div>
+  );
 }

-function ensureSingleShrink(old: T.NPSelection | undefined, s: T.NPSelection | undefined): T.NPSelection | undefined {
+function ensureSingleShrink(
+  old: T.NPSelection | undefined,
+  s: T.NPSelection | undefined
+): T.NPSelection | undefined {
  if (!s) return s;
  function countShrinks(np: T.NPSelection): number {
    if (np.selection.type === "pronoun") return 0;
    if (!np.selection.possesor) return 0;
-        return (np.selection.possesor.shrunken ? 1 : 0) + countShrinks(np.selection.possesor.np);
+    return (
+      (np.selection.possesor.shrunken ? 1 : 0) +
+      countShrinks(np.selection.possesor.np)
+    );
  }
  function keepNewShrink(old: T.NPSelection, n: T.NPSelection): T.NPSelection {
    if (n.selection.type === "pronoun") return n;
-        if (old.selection.type === "pronoun" || !n.selection.possesor || !old.selection.possesor) return n;
+    if (
+      old.selection.type === "pronoun" ||
+      !n.selection.possesor ||
+      !old.selection.possesor
+    )
+      return n;
    if (n.selection.possesor.shrunken && !old.selection.possesor.shrunken) {
      return {
        type: "NP",
@ -221,7 +314,7 @@ function ensureSingleShrink(old: T.NPSelection | undefined, s: T.NPSelection | u
    }
    return {
      type: "NP",
-            selection:{
+      selection: {
        ...n.selection,
        possesor: {
          shrunken: false,
@ -252,7 +345,10 @@ function ensureSingleShrink(old: T.NPSelection | undefined, s: T.NPSelection | u
  return keepNewShrink(old, s);
 }

-function checkForNewPossesor(n: T.NPSelection | undefined, old: T.PossesorSelection | undefined): boolean {
+function checkForNewPossesor(
+  n: T.NPSelection | undefined,
+  old: T.PossesorSelection | undefined
+): boolean {
  if (!old || !n) {
    return true;
  }
@ -263,7 +359,10 @@ function checkForNewPossesor(n: T.NPSelection | undefined, old: T.PossesorSelect
  if (n.selection.type === "noun" && old.np.selection.type === "noun") {
    return n.selection.entry.ts !== old.np.selection.entry.ts;
  }
-    if (n.selection.type === "participle" && old.np.selection.type === "participle") {
+  if (
+    n.selection.type === "participle" &&
+    old.np.selection.type === "participle"
+  ) {
    return n.selection.verb.entry.ts !== old.np.selection.verb.entry.ts;
  }
  return false;
--- a/src/demo-components/InflectionDemo.tsx
+++ b/src/demo-components/InflectionDemo.tsx
@ -81,7 +81,6 @@ function InflectionDemo({ opts }: { opts: T.TextOptions }) {
    const v = e.target.value;
    const value = v === "all" ? v : (Number(v) as T.InflectionPattern);
    setPattern(value);
-    console.log({ word });
    if (word && !tp.isPattern(value)(word)) {
      setWord(undefined);
    }
--- a/src/index.js
+++ b/src/index.js
@ -1,17 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 import "@fortawesome/fontawesome-free/css/all.css";
-import 'bootstrap/dist/css/bootstrap.css';
-import './App.css';
+import "bootstrap/dist/css/bootstrap.css";
+import "./App.css";

 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  // <React.StrictMode>
+  <App />, // </React.StrictMode>,
+  document.getElementById("root")
 );

 // If you want to start measuring performance in your app, pass a function
--- a/src/lib/package.json
+++ b/src/lib/package.json
@ -1,6 +1,6 @@
 {
  "name": "@lingdocs/inflect",
-  "version": "7.2.2",
+  "version": "7.3.0",
  "description": "Pashto inflector library",
  "main": "dist/index.js",
  "types": "dist/lib/library.d.ts",
--- a/src/lib/src/phrase-building/make-selections.ts
+++ b/src/lib/src/phrase-building/make-selections.ts
@ -81,6 +81,6 @@ export function makeNounSelection(
    possesor: !complementType ? old?.possesor : undefined,
    dynamicComplement: complementType === "dynamic",
    genStativeComplement: complementType === "generative stative",
-    demonstrative: undefined,
+    demonstrative: old?.demonstrative,
  };
 }
--- a/src/lib/src/phrase-building/np-tools.ts
+++ b/src/lib/src/phrase-building/np-tools.ts
@ -12,19 +12,26 @@ function getBaseAndAdjectives({
    return getSandwichPsBaseAndAdjectives(selection);
  }
  const adjs = "adjectives" in selection && selection.adjectives;
+  const demons = ("demonstrative" in selection &&
+    selection.demonstrative?.ps) || { p: "", f: "" };
  if (!adjs) {
-    return flattenLengths(selection.ps);
+    // TODO: does this ever get used??
+    return flattenLengths(selection.ps).map((x) => concatPsString(demons, x));
  }
+
  return flattenLengths(selection.ps).map((p) =>
    concatPsString(
+      demons,
+      // demons ? " " : "",
      adjs.reduce(
-        (accum, curr) =>
-          // TODO: with variations of adjs?
-          concatPsString(
+        (accum, curr) => {
+          // TODO: with variations of adjs? {
+          return concatPsString(
            accum,
-            accum.p === "" && accum.f === "" ? "" : " ",
+            accum.p === "" && accum.f === "" ? "" : "", //" ",
            curr.ps[0]
-          ),
+          );
+        },
        { p: "", f: "" }
      ),
      " ",
@ -199,7 +206,10 @@ function addArticlesAndAdjs(
        ? " (f.)"
        : " (m.)"
      : "";
-    return `${articles}${adjs}${word}${genderTag}`;
+    const demonstrative = np.demonstrative ? ` ${np.demonstrative.e}` : "";
+    return `${
+      np.demonstrative ? "" : articles
+    }${demonstrative}${adjs}${word}${genderTag}`;
  } catch (e) {
    return undefined;
  }
--- a/src/lib/src/phrase-building/render-np.ts
+++ b/src/lib/src/phrase-building/render-np.ts
@ -131,34 +131,61 @@ export function renderNounSelection(
    ps: pashto,
    e: english,
    possesor: renderPossesor(n.possesor, role),
-    demonstrative: renderDemonstrative(
-      n.demonstrative,
-      inflected && n.number === "plural"
-    ),
+    demonstrative: renderDemonstrative({
+      demonstrative: n.demonstrative,
+      inflected,
+      plural: n.number === "plural",
+      gender: n.gender,
+    }),
  };
 }

-function renderDemonstrative(
-  demonstrative: T.DemonstrativeSelection | undefined,
-  plurInflected: boolean
-): T.Rendered<T.DemonstrativeSelection> | undefined {
+function renderDemonstrative({
+  demonstrative,
+  inflected,
+  plural,
+  gender,
+}: {
+  demonstrative: T.DemonstrativeSelection | undefined;
+  inflected: boolean;
+  plural: boolean;
+  gender: T.Gender;
+}): T.Rendered<T.DemonstrativeSelection> | undefined {
  if (!demonstrative) {
    return undefined;
  }
-  return {
-    ...demonstrative,
-    ps:
+  const ps =
    demonstrative.demonstrative === "daa"
-        ? plurInflected
+      ? inflected
        ? { p: "دې", f: "de" }
        : { p: "دا", f: "daa" }
      : demonstrative.demonstrative === "dagha"
-        ? plurInflected
-          ? { p: "دغه", f: "dágha" }
-          : { p: "دغو", f: "dágho" }
-        : plurInflected
-        ? { p: "هغه", f: "hágha" }
-        : { p: "هغو", f: "hágho" },
+      ? inflected
+        ? plural
+          ? { p: "دغو", f: "dágho" }
+          : gender === "masc"
+          ? { p: "دغه", f: "dághu" }
+          : { p: "دغې", f: "dághe" }
+        : { p: "دغه", f: "dágha" }
+      : inflected
+      ? plural
+        ? { p: "هغو", f: "hágho" }
+        : gender === "masc"
+        ? { p: "هغه", f: "hághu" }
+        : { p: "هغې", f: "hághe" }
+      : { p: "هغه", f: "hágha" };
+  const e =
+    demonstrative.demonstrative === "hagha"
+      ? plural
+        ? "those"
+        : "that"
+      : plural
+      ? "these"
+      : "this";
+  return {
+    ...demonstrative,
+    ps,
+    e,
  };
 }

--- a/src/lib/src/phrase-building/vps-reducer.ts
+++ b/src/lib/src/phrase-building/vps-reducer.ts
@ -1,13 +1,8 @@
 import * as T from "../../../types";
-import {
-    isInvalidSubjObjCombo,
-} from "./vp-tools";
+import { isInvalidSubjObjCombo } from "./vp-tools";
 import { switchSubjObj } from "./vp-tools";
 import { ensure2ndPersSubjPronounAndNoConflict } from "./vp-tools";
-import {
-    isPerfectTense,
-    isImperativeTense,
-} from "../type-predicates";
+import { isPerfectTense, isImperativeTense } from "../type-predicates";
 import { checkForMiniPronounsError } from "./compile";
 import {
  adjustObjectSelection,
@ -19,73 +14,100 @@ import {
  setAP,
  shiftBlock,
 } from "./blocks-utils";
-import { changeStatDyn, changeTransitivity, makeVPSelectionState } from "./verb-selection";
+import {
+  changeStatDyn,
+  changeTransitivity,
+  makeVPSelectionState,
+} from "./verb-selection";

-export type VpsReducerAction = {
-    type: "load vps",
-    payload: T.VPSelectionState,
-} | {
-    type: "set subject",
+export type VpsReducerAction =
+  | {
+      type: "load vps";
+      payload: T.VPSelectionState;
+    }
+  | {
+      type: "set subject";
      payload: {
-        subject: T.NPSelection | undefined,
-        skipPronounConflictCheck?: boolean,
-    },
-} | {
-    type: "set object",
-    payload: T.NPSelection | undefined,
-} | {
-    type: "swap subj/obj",
-} | {
-    type: "set form",
-    payload: T.FormVersion,
-} | {
-    type: "set voice",
-    payload: "active" | "passive",
-} | {
-    type: "set transitivity",
-    payload: "transitive" | "grammatically transitive",
-} | {
-    type: "set statDyn",
-    payload: "stative" | "dynamic",
-} | {
-    type: "set negativity",
-    payload: "true" | "false",
-} | {
-    type: "set tense",
-    payload: T.VerbTense | T.PerfectTense | T.ImperativeTense | undefined,
-} | {
-    type: "set tense category",
-    payload: "basic" | "modal" | "perfect" | "imperative",
-} | {
-    type: "toggle servant shrink",
-} | {
-    type: "toggle king remove",
-} |{
-    type: "set verb",
-    payload: T.VerbEntry,
-} | {
-    type: "insert new AP",
-} | {
-    type: "set AP",
+        subject: T.NPSelection | undefined;
+        skipPronounConflictCheck?: boolean;
+      };
+    }
+  | {
+      type: "set object";
+      payload: T.NPSelection | undefined;
+    }
+  | {
+      type: "swap subj/obj";
+    }
+  | {
+      type: "set form";
+      payload: T.FormVersion;
+    }
+  | {
+      type: "set voice";
+      payload: "active" | "passive";
+    }
+  | {
+      type: "set transitivity";
+      payload: "transitive" | "grammatically transitive";
+    }
+  | {
+      type: "set statDyn";
+      payload: "stative" | "dynamic";
+    }
+  | {
+      type: "set negativity";
+      payload: "true" | "false";
+    }
+  | {
+      type: "set tense";
+      payload: T.VerbTense | T.PerfectTense | T.ImperativeTense | undefined;
+    }
+  | {
+      type: "set tense category";
+      payload: "basic" | "modal" | "perfect" | "imperative";
+    }
+  | {
+      type: "toggle servant shrink";
+    }
+  | {
+      type: "toggle king remove";
+    }
+  | {
+      type: "set verb";
+      payload: T.VerbEntry;
+    }
+  | {
+      type: "insert new AP";
+    }
+  | {
+      type: "set AP";
      payload: {
-        index: number,
-        AP: T.APSelection | undefined,
-    },
-} | {
-    type: "remove AP",
-    payload: number,
-} | {
-    type: "shift block",
+        index: number;
+        AP: T.APSelection | undefined;
+      };
+    }
+  | {
+      type: "remove AP";
+      payload: number;
+    }
+  | {
+      type: "shift block";
      payload: {
-        index: number,
-        direction: "back" | "forward",
-    },
-} | {
-    type: "set externalComplement",
-    payload: T.ComplementSelection | undefined,
-}
+        index: number;
+        direction: "back" | "forward";
+      };
+    }
+  | {
+      type: "set externalComplement";
+      payload: T.ComplementSelection | undefined;
+    };

-export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, sendAlert?: (msg: string) => void): T.VPSelectionState {
+export function vpsReducer(
+  vps: T.VPSelectionState,
+  action: VpsReducerAction,
+  sendAlert?: (msg: string) => void
+): T.VPSelectionState {
  function doReduce(): T.VPSelectionState {
    if (action.type === "load vps") {
      return action.payload;
@ -93,11 +115,7 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
    if (action.type === "set subject") {
      const { subject, skipPronounConflictCheck } = action.payload;
      const object = getObjectSelection(vps.blocks).selection;
-            if (
-                !skipPronounConflictCheck
-                &&
-                hasPronounConflict(subject, object)
-            ) {
+      if (!skipPronounConflictCheck && hasPronounConflict(subject, object)) {
        if (sendAlert) sendAlert("That combination of pronouns is not allowed");
        return vps;
      }
@ -110,7 +128,7 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
      if (!vps.verb) return vps;
      const objectB = getObjectSelection(vps.blocks).selection;
      const subjectB = getSubjectSelection(vps.blocks).selection;
-            if ((objectB === "none") || (typeof objectB === "number")) {
+      if (objectB === "none" || typeof objectB === "number") {
        return vps;
      }
      const object = action.payload;
@ -146,8 +164,11 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
          return {
            ...vps,
            blocks: adjustObjectSelection(
-                            adjustSubjectSelection(vps.blocks, typeof object === "object" ? object : undefined),
-                            "none",
+              adjustSubjectSelection(
+                vps.blocks,
+                typeof object === "object" ? object : undefined
+              ),
+              "none"
            ),
            verb: {
              ...vps.verb,
@ -160,7 +181,7 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
            ...vps,
            blocks: adjustObjectSelection(
              adjustSubjectSelection(vps.blocks, undefined),
-                            typeof subject === "object" ? subject : undefined,
+              typeof subject === "object" ? subject : undefined
            ),
            verb: {
              ...vps.verb,
@ -217,7 +238,8 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
          verb: {
            ...vps.verb,
            verbTense: tense,
-                        tenseCategory: vps.verb.tenseCategory === "perfect"
+            tenseCategory:
+              vps.verb.tenseCategory === "perfect"
                ? "basic"
                : vps.verb.tenseCategory,
          },
@ -244,7 +266,7 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
            ...vps.verb,
            tenseCategory: category,
          },
-                }
+        };
      }
      return {
        ...vps,
@ -305,13 +327,14 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
      const selection = action.payload;
      return {
        ...vps,
-                externalComplement: selection === undefined
-                    // TODO: this is a bit messy
+        externalComplement:
+          selection === undefined
+            ? // TODO: this is a bit messy
              // when using the ComplementPicker with an EP - undefined means it hasn't been selected
              // when using the ComplementPicker with a VP - undefined means there can be no complement
-                    ? { type: "complement", selection: { type: "unselected" }}
+              { type: "complement", selection: { type: "unselected" } }
            : selection,
-            }
+      };
    }
    throw new Error("unknown vpsReducer state");
  }
@ -324,10 +347,18 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
  return modified;
 }

-function hasPronounConflict(subject: T.NPSelection | undefined, object: undefined | T.VerbObject): boolean {
-    const subjPronoun = (subject && subject.selection.type === "pronoun") ? subject.selection : undefined;
-    const objPronoun = (object && typeof object === "object" && object.selection.type === "pronoun") ? object.selection : undefined; 
+function hasPronounConflict(
+  subject: T.NPSelection | undefined,
+  object: undefined | T.VerbObject
+): boolean {
+  const subjPronoun =
+    subject && subject.selection.type === "pronoun"
+      ? subject.selection
+      : undefined;
+  const objPronoun =
+    object && typeof object === "object" && object.selection.type === "pronoun"
+      ? object.selection
+      : undefined;
  if (!subjPronoun || !objPronoun) return false;
  return isInvalidSubjObjCombo(subjPronoun.person, objPronoun.person);
 }
-
--- a/src/types.ts
+++ b/src/types.ts
@ -1026,6 +1026,7 @@ export type Rendered<
      demonstrative: DemonstrativeSelection["demonstrative"];
      hideNoun: boolean;
      ps: PsString;
+      e: string;
    }
  : T extends ComplementSelection
  ? {