mesdan 1.0.3 → 1.1.0

package/README.md

@@ -1,42 +1,218 @@
-# Osmani membasının gayesi nedir?
+# Mesdan (مسدان)
 
-Latin harflerinin bulunduğu mesdanla Osmanlı Türkçesi yazabilmek için hazırlanmıştır.
-Mesdandan basılan harfin yerine Osmanî dengini yazar.
+[![NPM Version](https://img.shields.io/npm/v/mesdan.svg)](https://www.npmjs.com/package/mesdan)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![React](https://img.shields.io/badge/react-%3E%3D18-blue.svg)](https://reactjs.org/)
 
-## Nasıl Kullanılır?
+_Mesdan_ kelimesi tuş (touch) takımı yani **keyboard** demektir.
 
-Bu memba **React** ile hazırlanan sahifelerde kullanılmak için geliştirilmiştir.
-Sırası ile aşağıdaki adımları takip edelim:
+İşbu menba Latin hurufatlı mesdanları kullanarak Osmanlı Türkçesi yazabilmek için hazırlanmıştır.
+Kancaya tanıtılan `<textarea>` ya `<input>` unsurlarının idâresini ele alıp yazma, silme, belleme (copy), koparma (cut), yerleme (paste) ilh.
+amelleri Osmanlı Türkçesiyle çalışacak şekilde îfâ eder.
 
-Membayı tarhımıza dahil edelim:
+---
 
+<details>
+<summary><strong>Click here for the English version</strong></summary>
+
+# Mesdan (مسدان)
+
+The word _Mesdan_ is an old Turkish word for **keyboard**.
+
+This React hook is designed to facilitate writing Ottoman Turkish text using a standard Latin keyboard. It takes control of a given `<textarea>` or `<input>` element to ensure that actions like typing, deleting, copying, cutting, and pasting work correctly for the Ottoman script.
+
+</details>
+
+---
+
+## Kurma (Installation)
+
+```bash
+npm install mesdan
+# ya / or
+yarn add mesdan
+```
+
+## Temel Kullanım (Basic Usage)
+
+`useMesdan` kancasını unsura (component) dahil edin ve dönen `metin` ile `metinSahasıİması` değerlerini alâkalı unsura tanıtın.
+
+- `metin`: Unsurun `value` hassasına verilecek olan metindir.
+- `metinSahasıİması`: Unsurun `ref` hassasına verilecek olan delîldir.
+
+```tsx
+import React from 'react';
+import { useMesdan } from 'mesdan';
+
+const TemelMesdan = () => {
+  const [metin, metinSahasıİması] = useMesdan<HTMLInputElement>({
+    ibtidaiMetin: '',
+    tekSatırMı: true, // `true` ise <input>, `false` ise <textarea>
+  });
+
+  return (
+    <input
+      ref={metinSahasıİması}
+      dir="rtl"
+      value={metin}
+      onChange={() => {}} // Kanca metni kendi idare ettiği için boş bırakılabilir
+    />
+  );
+};
+
+export default TemelMesdan;
 ```
-  npm install mesdan
+
+> **Şerh:** `onChange` vaqası (event) kanca tarafından dâhilen idare edildiği için boş bırakılabilir. React, `value` hassası olan unsurlarda bir `onChange` ameli beklediği için ekledik ama lâzım değil.
+
+## Kancanın Hassaları (Hook Props)
+
+`useMesdan` kancası bir nesne (object) alır. İşte bu nesnenin alabileceği hassalar:
+
+| Hususiyet (Prop)     | Nev (Type)                    | Mecburi mi? (Required?) | İzah (Description)                                                                                                                               |
+| -------------------- | ----------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ibtidaiMetin`       | `string`                      | Yo (No)                 | Metin sahasının ilk değeridir. Varsayılan (default) `''`.                                                                                        |
+| `tekSatırMı`         | `boolean`                     | He (Yes)                | `true` ise tek satırlı (`<input>`) gibi çalışır ve `Enter` tuşuna basılınca `aramaTalepEdilince` amelini tetikler. `false` ise yeni satır ekler. |
+| `latiniMi`           | `boolean`                     | Yo (No)                 | `true` ise kanca âtıl hale gelir ve Alfabe ile yazmağa başlar. Varsayılan `false`.                                                               |
+| `aramaTalepEdilince` | `() => void`                  | Yo (No)                 | `tekSatırMı` `true` iken `Enter` tuşuna basıldığında koşulan ameldir.                                                                            |
+| `metin`              | `string`                      | Yo (No)                 | Kancanın idâresini harice verir. `tayinMetin` ile beraber kullanılır.                                                                            |
+| `tayinMetin`         | `(yeniMetin: string) => void` | Yo (No)                 | Kancanın idâresini harice verir. `metin` ile beraber kullanılır.                                                                                 |
+
+## Kancanın Vâsılatı (Return Values)
+
+Kanca, dört unsurdan müteşekkil bir dizi (array) döndürür:
+
+```ts
+type MesdanVasılatı<T> = [
+  metin: string,
+  metinSahasıİması: RefObject<T | null>,
+  tebdilMetin: (yeniMetin: string) => void,
+  tebdilLatiniMi: (latiniMi: boolean) => void,
+];
 ```
 
-**useMesdan** kancasını unsura dahil edelim:
+1.  **`metin`** (`string`):
+    Metin sahasının cârî değeri.
+
+2.  **`metinSahasıİması`** (`RefObject`):
+    `input` veya `textarea` unsuruna banılacak olan `ref`. (ba-mak => bağlamak, rapt etmek)
+
+3.  **`tebdilMetin`** (`(yeniMetin: string) => void`):
+    Metni haricen (programmatically) değiştirir.
+
+4.  **`tebdilLatiniMi`** (`(latiniMi: boolean) => void`):
+    Haleti Elifba ile Alfabe değiştirmek için kullanılır.
+
+## İleri Seviye Kullanım Misâlleri (Advanced Usage Examples)
+
+### 1. Çok Satırlı Metin Sahası (`<textarea>`)
 
+`tekSatırMı` hassasını `false` yaparak adid satırlı metin girişi sağlayabilirsiniz. Bu halde `Enter` mesine basmak yeni bir satır ekler.
+
+```tsx
+import { useMesdan } from 'mesdan';
+
+const AdidSatırlıMesdan = () => {
+  const [metin, metinSahasıİması] = useMesdan<HTMLTextAreaElement>({
+    ibtidaiMetin: '',
+    tekSatırMı: false,
+  });
+
+  return <textarea ref={metinSahasıİması} dir="rtl" value={metin} onChange={() => {}} rows={5} />;
+};
 ```
-  const [kelime, metinSahasıİması] = useMesdan<HTMLInputElement>({
-    ibtidaiKelime: "",
+
+### 2. Hâriçten İdâreli Unsur (Controlled Component)
+
+Metin vaziyetini (state) kancanın hâricinden idâre etmek isterseniz, `metin` ve `tayinMetin` hassalarını kullanabilirsiniz.
+
+```tsx
+import { useState } from 'react';
+import { useMesdan } from 'mesdan';
+
+const HariçtenİdareliMesdan = () => {
+  const [hariciMetin, tayinHariciMetin] = useState('');
+
+  const [, metinSahasıİması] = useMesdan<HTMLInputElement>({
     tekSatırMı: true,
+
+    metin: hariciMetin,
+    tayinMetin: tayinHariciMetin,
   });
+
+  return (
+    <div>
+      <input ref={metinSahasıİması} dir="rtl" value={hariciMetin} onChange={() => {}} />
+      <button onClick={() => tayinHariciMetin('')}>Metni İmhâ Et</button>
+      <p>Hârici Metin: {hariciMetin}</p>
+    </div>
+  );
+};
 ```
 
-Bu kanca **[kelime, metinSahasıİması]** dizisini cevaben iletir.
-**metinSahasıİması**, **input** unsurunun **ref** hususiyetine tanıtılmalıdır.
-Bu sayede **useMesdan** **input** sahası seçiliyken basılan harfleri dinleyecek ve işbu harfleri
-Osmanî denkleri ile değiştirecektir. Osmani Elifba ile yazılmış **kelime** evvelki dizi ile
-kancaldan alınmıştı. **input** sahasının **value** kısmına işbu **kelime** tanıtılmalıdır.
-İlaveten, **onChange** dinleyicisi de aşağıdaki gibi hazır edilmelidir.
+### 3. Yazım Haletini Zirleme (Toggling Input Mode)
+
+Kullanıcının Elifba ve Alfabe yazım arasında geçiş yapmasını sağlamak için `tebdilLatiniMi` amelini kullanabilirsiniz.
+
+```tsx
+import { useState } from 'react';
+import { useMesdan } from 'mesdan';
+
+const LisanZirliMesdan = () => {
+  const [latiniMi, tayinLatiniMi] = useState(false);
 
+  const [metin, metinSahasıİması, , tebdilLatiniMi] = useMesdan<HTMLInputElement>({
+    ibtidaiMetin: '',
+    tekSatırMı: true,
+    latiniMi: latiniMi,
+  });
+
+  const ifaZir = () => {
+    const yeniHalet = !latiniMi;
+    tayinLatiniMi(yeniHalet);
+    tebdilLatiniMi(yeniHalet);
+  };
+
+  return (
+    <div>
+      <input
+        ref={metinSahasıİması}
+        value={metin}
+        onChange={() => {}}
+        dir={latiniMi ? 'ltr' : 'rtl'}
+        placeholder={latiniMi ? 'Alfabe ile yaz...' : 'الفبا ايله‌ ياز...'}
+      />
+      <button onClick={ifaZir}>{latiniMi ? "Elifba'ya geç" : "Alfabe'ye geç"}</button>
+    </div>
+  );
+};
 ```
-<input
-  ref={metinSahasıİması}
-  dir="rtl"
-  type="text"
-  placeholder="كلمه"
-  value={kelime}
-  onChange={hadise => { }}
-/>
+
+### 4. Metni Haricen Değiştirme (Programmatically Setting Text)
+
+`tebdilMetin` fonksiyonu ile metni bir vaqaya (event) bağlı olarak değiştirebilirsiniz.
+
+```tsx
+import { useMesdan } from 'mesdan';
+
+const HariçtenMetinTebdilliMesdan = () => {
+  const [metin, metinSahasıİması, tebdilMetin] = useMesdan<HTMLTextAreaElement>({
+    tekSatırMı: false,
+  });
+
+  return (
+    <div>
+      <textarea ref={metinSahasıİması} dir="rtl" value={metin} onChange={() => {}} rows={5} />
+      <button onClick={() => tebdilMetin('السلام عليكم')}>Selam Ver</button>
+    </div>
+  );
+};
 ```
+
+## Anahtar Kelimeler (Keywords)
+
+osmanlıca, türkçe, türki, osmani, turkish, elifba, keyboard, tercüme, ottoman, latini, react, hook
+
+## Ruhsat (License)
+
+Bu menba MIT Ruhsatlıdır.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesdan",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Latinî mesdan ile Osmanî metin yazmak için hazırlanmış bir alettir.",
   "keywords": [
     "osmanlıca",

package/teshir/kanca/use-mesdan.d.ts

@@ -4,6 +4,8 @@ type MesdanHususları = {
     tekSatırMı: boolean;
     latiniMi?: boolean;
     aramaTalepEdilince?: () => void;
+    metin?: string;
+    tayinMetin?: (yeniMetin: string) => void;
 };
 type MesdanCevabı<T> = [
     metin: string,
@@ -11,6 +13,6 @@ type MesdanCevabı<T> = [
     tebdilMetin: (yeniMetin: string) => void,
     tebdilLatiniMi: (latiniMi: boolean) => void
 ];
-export declare const useMesdan: <T extends HTMLInputElement | HTMLTextAreaElement>({ ibtidaiMetin, tekSatırMı, latiniMi: ibtidaiLatiniMi, aramaTalepEdilince, }: MesdanHususları) => MesdanCevabı<T>;
+export declare const useMesdan: <T extends HTMLInputElement | HTMLTextAreaElement>({ ibtidaiMetin, tekSatırMı, latiniMi: ibtidaiLatiniMi, aramaTalepEdilince, metin: metinHarici, tayinMetin: tayinMetinHarici, }: MesdanHususları) => MesdanCevabı<T>;
 export {};
 //# sourceMappingURL=use-mesdan.d.ts.map

package/teshir/kanca/use-mesdan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-mesdan.d.ts","sourceRoot":"","sources":["../../memba/kanca/use-mesdan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;AAU7F,KAAK,eAAe,GAAG;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,MAAM;IACb,gBAAgB,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;IACxC,cAAc,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;CAC5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,gBAAgB,GAAG,mBAAmB,gFAKvE,eAAe,KAAG,YAAY,CAAC,CAAC,CA6LlC,CAAC"}
+{"version":3,"file":"use-mesdan.d.ts","sourceRoot":"","sources":["../../memba/kanca/use-mesdan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;AAU7F,KAAK,eAAe,GAAG;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,MAAM;IACb,gBAAgB,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;IACxC,cAAc,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;CAC5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,gBAAgB,GAAG,mBAAmB,kIAOvE,eAAe,KAAG,YAAY,CAAC,CAAC,CA4MlC,CAAC"}

package/teshir/kanca/use-mesdan.js

@@ -3,9 +3,19 @@ import { harfBüyükMü } from '../aletler/harf-buyuk-mu';
 import { hazırlaAlemMevkisini, hazırlaAlemMevkisiniMenzilli } from '../nev/alem-mevkisi';
 import { TadiliMetinEmri } from '../nev/tadili-metin-emri';
 import { Talimat_MetniTadilEt } from '../nuve/tadil-et-metni';
-export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLatiniMi = false, aramaTalepEdilince, }) => {
-    const [metin, setMetin] = useState(ibtidaiMetin);
-    const [isLatin, setIsLatin] = useState(ibtidaiLatiniMi);
+export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLatiniMi = false, aramaTalepEdilince, metin: metinHarici, tayinMetin: tayinMetinHarici, }) => {
+    const [metinDahili, tayinMetinDahili] = useState(ibtidaiMetin);
+    const [latiniMi, tayinLatiniMi] = useState(ibtidaiLatiniMi);
+    const kontrollüMü = metinHarici !== undefined && tayinMetinHarici !== undefined;
+    const metin = kontrollüMü ? metinHarici : metinDahili;
+    const tayinMetin = useCallback((yeniMetin) => {
+        if (kontrollüMü) {
+            tayinMetinHarici(yeniMetin);
+        }
+        else {
+            tayinMetinDahili(yeniMetin);
+        }
+    }, [kontrollüMü, tayinMetinHarici]);
     const metinSahasıİması = useRef(null);
     const alemMevkisiİması = useRef(hazırlaAlemMevkisini(ibtidaiMetin.length));
     const aramaTalepEdilinceRef = useRef(aramaTalepEdilince);
@@ -64,7 +74,7 @@ export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLa
         }
         const netice = await Talimat_MetniTadilEt(metinSahası, currentMetin, alemMevkisi, tadiliMetinEmri, mesHadisesi, true);
         alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
-        setMetin(netice.metinTadilSonrası);
+        tayinMetin(netice.metinTadilSonrası);
     }, [tekSatırMı]);
     const handlePaste = useCallback(async (hadise) => {
         const metinSahası = metinSahasıİması.current;
@@ -75,7 +85,7 @@ export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLa
         const alemMevkisi = hazırlaAlemMevkisiniMenzilli(metinSahası.selectionStart || 0, metinSahası.selectionEnd || 0);
         const netice = await Talimat_MetniTadilEt(metinSahası, currentMetin, alemMevkisi, TadiliMetinEmri.YERLE, { latiniHarf: '', shiftBasılıMı: false, altBasılıMı: false, capsLockBasılıMı: false }, true);
         alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
-        setMetin(netice.metinTadilSonrası);
+        tayinMetin(netice.metinTadilSonrası);
     }, []);
     const handleBeforeInput = useCallback((hadise) => {
         const metinSahası = metinSahasıİması.current;
@@ -112,11 +122,11 @@ export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLa
         const alemMevkisi = hazırlaAlemMevkisiniMenzilli(alemMevkisiEvveli.current.baş, alemMevkisiEvveli.current.son);
         const netice = await Talimat_MetniTadilEt(metinSahası, currentMetin, alemMevkisi, tadiliMetinEmri, mesHadisesi, false);
         alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
-        setMetin(netice.metinTadilSonrası);
+        tayinMetin(netice.metinTadilSonrası);
     }, [tekSatırMı]);
     useEffect(() => {
         const metinSahası = metinSahasıİması.current;
-        if (!metinSahası || isLatin) {
+        if (!metinSahası || latiniMi) {
             if (metinSahası) {
                 metinSahası.setAttribute('spellcheck', 'true');
             }
@@ -155,19 +165,19 @@ export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLa
             metinSahası.removeEventListener('keydown', keydownListener);
             metinSahası.removeEventListener('paste', pasteListener);
         };
-    }, [isLatin, tekSatırMı]);
+    }, [latiniMi, tekSatırMı]);
     useLayoutEffect(() => {
         const metinSahası = metinSahasıİması.current;
-        if (metinSahası && !isLatin) {
+        if (metinSahası && !latiniMi) {
             const { başMevki, sonMevki } = alemMevkisiİması.current;
             if (başMevki <= metinSahası.value.length && sonMevki <= metinSahası.value.length) {
                 metinSahası.setSelectionRange(başMevki, sonMevki);
             }
         }
-    }, [metin, isLatin]);
-    const DışarıdanMetniTebdilEt = useCallback((yeniMetin) => {
-        setMetin(yeniMetin);
+    }, [metin, latiniMi]);
+    const tebdilMetin = useCallback((yeniMetin) => {
+        tayinMetin(yeniMetin);
         alemMevkisiİması.current = hazırlaAlemMevkisini(yeniMetin.length);
     }, []);
-    return [metin, metinSahasıİması, DışarıdanMetniTebdilEt, setIsLatin];
+    return [metin, metinSahasıİması, tebdilMetin, tayinLatiniMi];
 };

package/talimat-2.md

@@ -1,297 +0,0 @@
-Excellent! Setting up a local development workflow to test your NPM package is a crucial step before publishing. It allows you to use your `mesdan` hook in a real application (like one made with Create React App, Vite, or Next.js) as if it were installed from the registry.
-
-Here are the best methods to do this, starting with the most common and recommended approach.
-
-### Method 1: `npm link` (Recommended for Active Development)
-
-This is the standard and most efficient way to test a local package. It works by creating a symbolic link (a "symlink," which is like a shortcut) between your consumer project's `node_modules` folder and your `mesdan` package's source code.
-
-This means any changes you make in your `mesdan` project are **instantly** reflected in your test project (after you rebuild, of course), without needing to reinstall anything.
-
-**Here's the step-by-step process:**
-
-**Step 1: In your `mesdan` package directory**
-
-1.  **Build your package.** Your `package.json` has a `kur` script that compiles your TypeScript into JavaScript in the `teshir/` directory. This is the code that will actually be used by the other project.
-    ```bash
-    # In your /path/to/mesdan project folder
-    npm run kur 
-    ```
-
-2.  **Register a global link.** This command tells NPM to create a global link on your computer that points to this project directory.
-    ```bash
-    npm link
-    ```
-    You should see a success message confirming the link was created for `mesdan@1.0.2`.
-
-**Step 2: In your local test project (e.g., a Create React App)**
-
-1.  **Create a test project** if you don't have one.
-    ```bash
-    # For example, using Vite (recommended for speed)
-    npm create vite@latest my-test-app -- --template react-ts
-    cd my-test-app
-    npm install
-    ```
-
-2.  **Link the `mesdan` package.** This command creates a symlink inside `my-test-app/node_modules/` that points to the global link you created in Step 1.
-    ```bash
-    # In your /path/to/my-test-app folder
-    npm link mesdan
-    ```
-    Now, if you look inside `my-test-app/node_modules/`, you'll see that `mesdan` is a shortcut to your original project folder.
-
-**Step 3: Use the hook in your test project**
-
-Now you can import and use your hook just like any other package.
-
-```tsx
-// In my-test-app/src/App.tsx
-
-import { useRef } from 'react';
-import { useMesdan } from 'mesdan'; // It works!
-
-function App() {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const [metin, metinSahasıİması, tebdilMetin, tebdilLatiniMi] = useMesdan<HTMLInputElement>({
-    ibtidaiMetin: "",
-    tekSatırMı: true,
-    latiniMi: false,
-    aramaTalepEdilince: () => alert("Arama talep edildi!"),
-  });
-
-  return (
-    <div>
-      <h1>Mesdan Test Sahası</h1>
-      <p>Aşağıdaki sahaya Osmanî metin yazmayı deneyin:</p>
-      <input
-        ref={metinSahasıİması}
-        value={metin}
-        onChange={(e) => tebdilMetin(e.target.value)} // Controlled component
-        style={{ width: '300px', padding: '8px', direction: 'rtl', fontFamily: 'Amiri, serif', fontSize: '1.5rem' }}
-      />
-      <hr />
-      <button onClick={() => tebdilLatiniMi(true)}>Latini Moda Geç</button>
-      <button onClick={() => tebdilLatiniMi(false)}>Osmanî Moda Geç</button>
-    </div>
-  );
-}
-
-export default App;
-```
-
-#### ⚠️ Important Gotcha: The "Invalid Hook Call" Error
-
-When using `npm link` with React libraries, you might encounter the dreaded "Invalid Hook Call" error. This happens because the symlink can cause your setup to have **two different copies of React** loaded: one from your test app's `node_modules` and another from your `mesdan` project's `node_modules`.
-
-**The Fix:** Tell your `mesdan` project to use the `react` from your test project.
-
-From within your `mesdan` project directory, run this command:
-```bash
-# In your /path/to/mesdan project folder
-npm link ../my-test-app/node_modules/react
-```
-This creates a symlink inside `mesdan/node_modules/` pointing to the single React instance in your test app, resolving the conflict.
-
----
-
-### Method 2: `npm pack` (The "Real-World Simulation")
-
-This method is less convenient for rapid development but is an excellent way to do a final check before publishing. It creates a compressed `.tgz` file, which is the exact file that gets uploaded to the NPM registry.
-
-1.  **Build your `mesdan` project.**
-    ```bash
-    # In /path/to/mesdan
-    npm run kur
-    ```
-
-2.  **Pack it.**
-    ```bash
-    # In /path/to/mesdan
-    npm pack
-    ```
-    This will create a file named `mesdan-1.0.2.tgz` in your project's root directory.
-
-3.  **Install the file in your test project.**
-    ```bash
-    # In /path/to/my-test-app
-    # Use a relative or absolute path to the .tgz file
-    npm install ../mesdan/mesdan-1.0.2.tgz
-    ```
-    This will install the package just as if it came from NPM.
-
-**Downside:** Every time you make a change to `mesdan`, you must re-build, re-pack, and re-install it in your test project.
-
----
-
-### Summary and Recommendation
-
-| Method | Pros | Cons | Best for... |
-| :--- | :--- | :--- | :--- |
-| **`npm link`** | **Instant updates** (after rebuild). Fast development cycle. | Can cause React duplication issues (but it's fixable). Requires cleanup (`npm unlink`). | **Active, day-to-day development and testing.** |
-| **`npm pack`** | **Perfectly simulates** a real NPM installation. No weird dependency issues. | **Slow workflow.** Requires re-packing and re-installing for every change. | **Final sanity check** before you run `npm publish`. |
-
-**My advice:**
-Use **`npm link`** for your development. Just be ready to apply the fix for the "Invalid Hook Call" error if it appears. It's the most productive workflow by far. Then, before you publish a new version, use **`npm pack`** once as a final test to be 100% sure everything is configured correctly.
-
-
----------------------------------------------
-
-Of course! This is a very common and essential workflow for package development. Your `tercefzar` project is the perfect "consumer" application to test your local `mesdan` hook.
-
-The process involves uninstalling the version from NPM and then creating a symbolic link (`symlink`) to your local `mesdan` project folder. Here's the step-by-step guide using the recommended `npm link` method.
-
-### Step 1: Prepare Your Local `mesdan` Package
-
-First, go to the directory where you are developing the `mesdan` hook.
-
-1.  **Build the project:** Make sure your latest TypeScript changes are compiled into JavaScript in the `teshir/` directory. Your `kur` script handles this.
-    ```bash
-    # Navigate to your mesdan project folder
-    cd /path/to/your/local/mesdan
-
-    # Run the build script
-    npm run kur
-    ```
-
-2.  **Create a global link:** This command tells your computer to create a global "shortcut" to this specific project folder, making it available to be linked by other projects.
-    ```bash
-    npm link
-    ```
-    You should see a success message indicating that a global link for `mesdan` was created.
-
-### Step 2: Update Your `tercefzar` Project
-
-Now, go to your `tercefzar` project to remove the old package and link the new one.
-
-1.  **Uninstall the NPM version:** This removes the `mesdan` package from your `node_modules` and its entry from your `package-lock.json`.
-    ```bash
-    # Navigate to your tercefzar project folder
-    cd /path/to/your/tercefzar
-
-    # Uninstall the package
-    npm uninstall mesdan
-    ```
-    This step is crucial to avoid conflicts.
-
-2.  **Link to your local `mesdan`:** This command looks for the global link you created in Step 1 and creates a symlink inside `tercefzar/node_modules/` that points directly to your local `mesdan` project folder.
-    ```bash
-    npm link mesdan
-    ```
-
-### Step 3: Verification and Development
-
-1.  **Check `node_modules`:** If you look inside `tercefzar/node_modules/`, you will now see that `mesdan` has a small arrow icon next to it (in many terminals and file explorers), indicating it's a symlink.
-
-2.  **Run your dev server:** Start your `tercefzar` application as usual.
-    ```bash
-    # In the tercefzar folder
-    npm run çat
-    ```
-    Your application will now be using the code directly from your local `/path/to/your/local/mesdan` folder.
-
-### The Development Workflow From Now On
-
-This is where `npm link` is so powerful. To test new changes:
-
-1.  Make any code changes you want in your `mesdan` project's source files (`.ts` files).
-2.  In the `mesdan` project terminal, **re-run your build script**.
-    ```bash
-    # In the mesdan folder
-    npm run kur
-    ```
-3.  Vite's development server in your `tercefzar` project will detect the changes in the linked `node_modules` directory and **automatically hot-reload** your application.
-
-You **do not** need to run `npm link` again. The link is permanent until you break it.
-
-### ⚠️ Important: Fixing the "Invalid Hook Call" Error
-
-As mentioned previously, this setup can lead to an "Invalid Hook Call" error because you might have two copies of React—one in `tercefzar/node_modules` and one in `mesdan/node_modules`.
-
-**To fix this proactively:**
-Go back to your `mesdan` project folder and tell it to use the `react` from your `tercefzar` project.
-
-```bash
-# In your /path/to/your/local/mesdan folder
-npm link ../tercefzar/node_modules/react
-```
-*(Adjust the relative path `../tercefzar` if your projects are in different locations)*.
-
-This ensures both your hook and your application are using the exact same React instance.
-
-### How to Revert Back to the NPM Version
-
-When you're done with local development and want to go back to using the official package from the NPM registry:
-
-1.  **Unlink the local package** in your `tercefzar` project. The `--no-save` flag is important as it prevents `npm` from removing `mesdan` from your `package.json` dependencies.
-    ```bash
-    # In the tercefzar folder
-    npm unlink --no-save mesdan
-    ```
-
-2.  **Re-install the package** from the registry.
-    ```bash
-    # In the tercefzar folder
-    npm install
-    ```
-    This will read your `package.json` and pull the specified version of `mesdan` from NPM, restoring the original state.
-
-
--------------------------------------------
-
-Excellent questions. This touches on the core behavior of `npm link` and how it interacts with `package.json` and the `node_modules` directory.
-
-### Question 1: "mesdan not visible in package.json. How can we keep track of it?"
-
-You are correct, `npm link` **does not** modify your `package.json`. This is by design.
-
-The purpose of `npm link` is to create a temporary, local development setup. It's not meant to be a permanent dependency declaration. Your `package.json` should always reflect the dependencies that a user (or a CI/CD pipeline) would install from the NPM registry.
-
-**How to keep track of linked packages:**
-
-1.  **The `ls` command with `-g`:** You can see all globally linked packages on your system.
-    ```bash
-    npm ls -g --depth=0 --link=true
-    ```
-    This command lists all packages that you have run `npm link` on *in their source directories*. It will show you that `mesdan` is available globally for linking.
-
-2.  **The `ls` command in your project:** Inside your `tercefzar` project, you can see which dependencies are symlinked.
-    ```bash
-    npm ls
-    ```
-    In the output tree, a linked package will be clearly marked, often with an arrow `->` pointing to the absolute path of its source code on your machine. For example:
-    ```
-    tercefzar@0.0.1 /path/to/your/tercefzar
-    └── mesdan@1.0.2 -> /path/to/your/local/mesdan
-    ```
-
-3.  **Check `node_modules` directly:** In your file explorer or using `ls -l node_modules` in the terminal, you will see that `mesdan` is a symbolic link, not a regular directory.
-
-**In summary:** The "source of truth" for knowing a package is linked is the state of your `node_modules` directory, not `package.json`.
-
-### Question 2: "What will happen if I run `npm install mesdan` without unlinking?"
-
-This is a great "what-if" scenario. If you run `npm install mesdan` while the symlink is active, **npm will overwrite the symlink.**
-
-Here's the sequence of events:
-
-1.  **npm sees `mesdan` in `package.json`:** Your `tercefzar` project's `package.json` still has `"mesdan": "^1.0.2"` listed as a dependency.
-2.  **npm checks `node_modules`:** It finds a folder (which is actually a symlink) named `mesdan`.
-3.  **npm replaces it:** npm will remove the existing symlink and install the `mesdan` package from the NPM registry, downloading the version specified in your `package.json` (or the latest compatible version).
-4.  **`package.json` and `package-lock.json` are updated:** The command will ensure your `package.json` and `package-lock.json` are consistent with the newly installed version from the registry.
-
-**The outcome:** Your local development link is broken, and you are back to using the official published version of the package.
-
-This is actually a very simple way to revert your setup. Instead of running `npm unlink --no-save mesdan` followed by `npm install`, you could just run `npm install` (or `npm install mesdan`), and it would effectively do the same thing: restore the dependency from the NPM registry.
-
-### Recommended Workflow Summary
-
-| Action | Command in `tercefzar` | What it Does | Effect on `package.json` |
-| :--- | :--- | :--- | :--- |
-| **Start Local Dev** | 1. `npm uninstall mesdan` <br> 2. `npm link mesdan` | Removes NPM version, creates symlink to local `mesdan`. | `mesdan` is removed from dependencies. |
-| **A Better Start** | 1. `npm link mesdan` | *If `mesdan` is already in `package.json`*, this command just creates the link. No need to uninstall first. | No change. |
-| **End Local Dev** | `npm unlink --no-save mesdan` | Removes the symlink but keeps the dependency listed in `package.json`. | No change. |
-| **Restore from NPM** | `npm install` | Removes the symlink and installs the package from the NPM registry based on `package.json`. | No change. |
-
-**Pro Tip:** To avoid accidentally removing the dependency from your `package.json`, it's often best to just run `npm link mesdan` to start. If it's already installed from NPM, the link will replace it. When you're done, running `npm install` is the most reliable way to restore everything to its "official" state based on your `package.json`.