@intlayer/design-system 5.6.0 → 5.7.0

package/dist/components/Pattern/GridPattern.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.cjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width - 1}\n              height={height - 1}\n              x={x * width + 1}\n              y={y * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n};\n"],"names":["useId","jsxs","cn","jsx","x","y"],"mappings":";;;;;AAYO,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKA,aAAAA,MAAM;AAGf,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,+BAAC,QACC,EAAA,UAAAA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAEA,UAAAA,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,gBAC5B,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QACAA,2BAAAA,IAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,QACrE,WACCA,2BAAA,IAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACC,IAAGC,EAAC,MACjBF,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,OAAO,QAAQ;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB,GAAGC,KAAI,QAAQ;AAAA,YACf,GAAGC,KAAI,SAAS;AAAA,UAAA;AAAA,UAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,QAAA,CAMjB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;;"}
+{"version":3,"file":"GridPattern.cjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nconst id = 'grid-pattern';\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id={id}\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <path\n          d={`M.5 ${height}V.5H${width}`}\n          fill=\"none\"\n          strokeDasharray={strokeDasharray}\n        />\n      </pattern>\n    </defs>\n    <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    {squares && (\n      <svg x={x} y={y} className=\"overflow-visible\">\n        {squares.map(([x, y]) => (\n          <rect\n            strokeWidth=\"0\"\n            key={`${x}-${y}`}\n            width={width - 1}\n            height={height - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    )}\n  </svg>\n);\n"],"names":["jsxs","cn","jsx","x","y"],"mappings":";;;;AAYA,MAAM,KAAK;AAEJ,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,+BAAC,QACC,EAAA,UAAAA,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UAEA,UAAAA,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,cAC5B,MAAK;AAAA,cACL;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GAEJ;AAAA,MACAA,2BAAAA,IAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,MACrE,WACCA,2BAAA,IAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACC,IAAGC,EAAC,MACjBF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UAEZ,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UACjB,GAAGC,KAAI,QAAQ;AAAA,UACf,GAAGC,KAAI,SAAS;AAAA,QAAA;AAAA,QAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,MAAA,CAMjB,EACH,CAAA;AAAA,IAAA;AAAA,EAAA;AAEJ;;"}

package/dist/components/Pattern/GridPattern.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/GridPattern.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAS,MAAM,OAAO,CAAC;AAGtD,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAE5B,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAsD5C,CAAC"}
+{"version":3,"file":"GridPattern.d.ts","sourceRoot":"","sources":["../../../src/components/Pattern/GridPattern.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAI5B,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkD5C,CAAC"}

package/dist/components/Pattern/GridPattern.mjs

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useId } from "react";
 import { cn } from "../../utils/cn.mjs";
+const id = "grid-pattern";
 const GridPattern = ({
   width = 40,
   height = 40,
@@ -10,53 +10,50 @@ const GridPattern = ({
   squares,
   className,
   ...props
-}) => {
-  const id = useId();
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-          "pattern",
-          {
-            id,
-            width,
-            height,
-            patternUnits: "userSpaceOnUse",
-            x,
-            y,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: `M.5 ${height}V.5H${width}`,
-                fill: "none",
-                strokeDasharray
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
-        squares && /* @__PURE__ */ jsx("svg", { x, y, className: "overflow-visible", children: squares.map(([x2, y2]) => /* @__PURE__ */ jsx(
-          "rect",
-          {
-            strokeWidth: "0",
-            width: width - 1,
-            height: height - 1,
-            x: x2 * width + 1,
-            y: y2 * height + 1
-          },
-          `${x2}-${y2}`
-        )) })
-      ]
-    }
-  );
-};
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className: cn(
+      "fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+        "pattern",
+        {
+          id,
+          width,
+          height,
+          patternUnits: "userSpaceOnUse",
+          x,
+          y,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: `M.5 ${height}V.5H${width}`,
+              fill: "none",
+              strokeDasharray
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
+      squares && /* @__PURE__ */ jsx("svg", { x, y, className: "overflow-visible", children: squares.map(([x2, y2]) => /* @__PURE__ */ jsx(
+        "rect",
+        {
+          strokeWidth: "0",
+          width: width - 1,
+          height: height - 1,
+          x: x2 * width + 1,
+          y: y2 * height + 1
+        },
+        `${x2}-${y2}`
+      )) })
+    ]
+  }
+);
 export {
   GridPattern
 };

package/dist/components/Pattern/GridPattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.mjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width - 1}\n              height={height - 1}\n              x={x * width + 1}\n              y={y * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n};\n"],"names":["x","y"],"mappings":";;;AAYO,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AAGf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QACC,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAEA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,gBAC5B,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QACA,oBAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,QACrE,WACC,oBAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACA,IAAGC,EAAC,MACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,OAAO,QAAQ;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB,GAAGD,KAAI,QAAQ;AAAA,YACf,GAAGC,KAAI,SAAS;AAAA,UAAA;AAAA,UAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,QAAA,CAMjB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"GridPattern.mjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nconst id = 'grid-pattern';\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id={id}\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <path\n          d={`M.5 ${height}V.5H${width}`}\n          fill=\"none\"\n          strokeDasharray={strokeDasharray}\n        />\n      </pattern>\n    </defs>\n    <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    {squares && (\n      <svg x={x} y={y} className=\"overflow-visible\">\n        {squares.map(([x, y]) => (\n          <rect\n            strokeWidth=\"0\"\n            key={`${x}-${y}`}\n            width={width - 1}\n            height={height - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    )}\n  </svg>\n);\n"],"names":["x","y"],"mappings":";;AAYA,MAAM,KAAK;AAEJ,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,QACC,EAAA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,cAC5B,MAAK;AAAA,cACL;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GAEJ;AAAA,MACA,oBAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,MACrE,WACC,oBAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACA,IAAGC,EAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UAEZ,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UACjB,GAAGD,KAAI,QAAQ;AAAA,UACf,GAAGC,KAAI,SAAS;AAAA,QAAA;AAAA,QAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,MAAA,CAMjB,EACH,CAAA;AAAA,IAAA;AAAA,EAAA;AAEJ;"}

package/dist/components/SwitchSelector/index.cjs

@@ -5,10 +5,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const ReactExports = require("react");
 const classVarianceAuthority = require("class-variance-authority");
 require("@intlayer/editor-react");
+require("../Toaster/Toast.cjs");
+require("../../hooks/useAsync/useAsyncStateStore.cjs");
 require("@intlayer/api");
 require("@intlayer/config/built");
-require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("../Toaster/Toast.cjs");
 require("deepmerge");
 const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");

package/dist/components/SwitchSelector/index.mjs

@@ -3,10 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, createElement } from "react";
 import { cva } from "class-variance-authority";
 import "@intlayer/editor-react";
+import "../Toaster/Toast.mjs";
+import "../../hooks/useAsync/useAsyncStateStore.mjs";
 import "@intlayer/api";
 import "@intlayer/config/built";
-import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Toaster/Toast.mjs";
 import "deepmerge";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";

package/dist/components/TabSelector/TabSelector.cjs

@@ -5,10 +5,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const classVarianceAuthority = require("class-variance-authority");
 const ReactExports = require("react");
 require("@intlayer/editor-react");
+require("../Toaster/Toast.cjs");
+require("../../hooks/useAsync/useAsyncStateStore.cjs");
 require("@intlayer/api");
 require("@intlayer/config/built");
-require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("../Toaster/Toast.cjs");
 require("deepmerge");
 const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");

package/dist/components/TabSelector/TabSelector.mjs

@@ -3,10 +3,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useRef, cloneElement } from "react";
 import "@intlayer/editor-react";
+import "../Toaster/Toast.mjs";
+import "../../hooks/useAsync/useAsyncStateStore.mjs";
 import "@intlayer/api";
 import "@intlayer/config/built";
-import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Toaster/Toast.mjs";
 import "deepmerge";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";

package/dist/components/TextArea/AutocompleteTextArea.cjs

@@ -6,6 +6,8 @@ const editorReact = require("@intlayer/editor-react");
 const ReactExports = require("react");
 const hooks_intlayerAPIHooks = require("../../hooks/intlayerAPIHooks.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");
+require("@intlayer/api");
+require("@intlayer/config/built");
 require("deepmerge");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 const components_TextArea_AutoSizeTextArea = require("./AutoSizeTextArea.cjs");
@@ -30,6 +32,11 @@ const AutoCompleteTextarea = ({
   const [isTyped, setIsTyped] = ReactExports.useState(false);
   const [text, setText] = ReactExports.useState(defaultValue);
   const [suggestion, setSuggestion] = ReactExports.useState("");
+  const textareaRef = ReactExports.useRef(null);
+  const placeholderRef = ReactExports.useRef(null);
+  const ghostLayerRef = ReactExports.useRef(null);
+  const [suggestionPosition, setSuggestionPosition] = ReactExports.useState(null);
+  const [cursorAtFetch, setCursorAtFetch] = ReactExports.useState(-1);
   const debouncedText = useDebounce(text, 200);
   ReactExports.useEffect(() => {
     if (typeof props.value === "undefined") return;
@@ -40,18 +47,33 @@ const AutoCompleteTextarea = ({
     if (!isTyped) return;
     const fetchSuggestion = async () => {
       try {
+        const cursor = textareaRef.current?.selectionStart ?? debouncedText.length;
+        const before = debouncedText.slice(0, cursor);
+        const after = debouncedText.slice(cursor);
+        const numLines = 5;
+        const beforeLines = before.split("\n");
+        const contextBeforeLines = beforeLines.slice(
+          Math.max(0, beforeLines.length - numLines - 1),
+          -1
+        );
+        const contextBefore = contextBeforeLines.join("\n");
+        const currentLine = beforeLines[beforeLines.length - 1] ?? "";
+        const afterLines = after.split("\n");
+        const contextAfter = afterLines.slice(1, numLines + 1).join("\n");
         const response = await autocomplete({
-          text: debouncedText,
-          openAiApiKey: configuration.editor.openAiApiKey,
-          model: configuration.editor.openAiApiModel,
-          temperature: configuration.editor.openAiApiTemperature
+          text: before,
+          contextBefore,
+          currentLine,
+          contextAfter,
+          aiOptions: {
+            apiKey: configuration.editor.openAiApiKey,
+            model: configuration.editor.openAiApiModel,
+            temperature: configuration.editor.openAiApiTemperature
+          }
         });
         const autocompletion = response?.data?.autocompletion ?? "";
-        if (autocompletion.startsWith(debouncedText)) {
-          const remaining = autocompletion.slice(debouncedText.length);
-          return setSuggestion(remaining);
-        }
-        return setSuggestion(autocompletion);
+        setSuggestion(autocompletion);
+        setCursorAtFetch(cursor);
       } catch (err) {
         console.error("Autocomplete error:", err);
       }
@@ -62,31 +84,79 @@ const AutoCompleteTextarea = ({
     } else {
       setSuggestion("");
     }
-  }, [debouncedText, isActive]);
+  }, [debouncedText, isActive, autocomplete, configuration]);
+  ReactExports.useEffect(() => {
+    if (!suggestion || cursorAtFetch === -1 || !placeholderRef.current || !ghostLayerRef.current) {
+      setSuggestionPosition(null);
+      return;
+    }
+    const rect = placeholderRef.current.getBoundingClientRect();
+    const parentRect = ghostLayerRef.current.getBoundingClientRect();
+    setSuggestionPosition({
+      left: rect.left - parentRect.left,
+      top: rect.top - parentRect.top
+    });
+  }, [suggestion, cursorAtFetch, text]);
   const acceptSuggestion = () => {
-    setText((prevText) => prevText + suggestion);
+    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
+    if (currentCursor !== cursorAtFetch) return;
+    const newText = text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);
+    setText(newText);
     setSuggestion("");
+    setCursorAtFetch(-1);
+    setTimeout(() => {
+      textareaRef.current?.focus();
+      const newCursorPos = currentCursor + suggestion.length;
+      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ref: ghostLayerRef,
         className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "align-text-top text-transparent", children: text }),
-          (suggestion || suggestionProp) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral ml-3 align-text-top", children: suggestionProp ?? suggestion })
+          suggestion && cursorAtFetch !== -1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "align-text-top text-transparent", children: text.slice(0, cursorAtFetch) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                ref: placeholderRef,
+                style: { visibility: "hidden" },
+                "aria-hidden": "true",
+                children: suggestion
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "align-text-top text-transparent", children: text.slice(cursorAtFetch) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "align-text-top text-transparent", children: text }),
+          suggestionProp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral align-text-top", children: suggestionProp })
         ]
       }
     ),
+    suggestion && suggestionPosition && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pointer-events-none text-neutral whitespace-pre-wrap break-words text-base leading-[1.45rem] md:text-sm md:leading-[1.23rem]",
+        style: {
+          position: "absolute",
+          left: suggestionPosition.left,
+          top: suggestionPosition.top
+        },
+        children: suggestion
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
       {
         ...props,
+        ref: textareaRef,
         value: text,
         onChange: (e) => {
           setIsTyped(true);
           setText(e.target.value);
+          setSuggestion("");
           props.onChange?.(e);
         },
         onKeyDown: (e) => {
@@ -95,6 +165,13 @@ const AutoCompleteTextarea = ({
             acceptSuggestion();
           }
           props.onKeyDown?.(e);
+        },
+        onSelect: (e) => {
+          if (suggestion && e.target.selectionStart !== cursorAtFetch) {
+            setSuggestion("");
+            setCursorAtFetch(-1);
+          }
+          props.onSelect?.(e);
         }
       }
     )

package/dist/components/TextArea/AutocompleteTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.cjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useState, useEffect } from 'react';\nimport { useAutocomplete } from '../../hooks';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\n\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\n\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n\n  // Only update this “debouncedText” after the user stops typing for 500ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const response = await autocomplete({\n          text: debouncedText,\n          openAiApiKey: configuration.editor.openAiApiKey,\n          model: configuration.editor.openAiApiModel,\n          temperature: configuration.editor.openAiApiTemperature,\n        });\n        // e.g. response.data.autocompletion = \"Hello World\"\n        const autocompletion = response?.data?.autocompletion ?? '';\n\n        // If the suggested text starts with what the user typed,\n        // we only store the *remaining* part as the suggestion\n        // so that we can render \"ghost\" text appropriately.\n        if (autocompletion.startsWith(debouncedText)) {\n          const remaining = autocompletion.slice(debouncedText.length);\n          return setSuggestion(remaining);\n        }\n\n        return setSuggestion(autocompletion);\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive]);\n\n  const acceptSuggestion = () => {\n    // Merge the typed text with the suggestion\n    setText((prevText) => prevText + suggestion);\n    setSuggestion('');\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      {/*\n        --- Background/Ghost layer ---\n        Mirrors user's typed text and shows suggestion as ghosted/gray\n      */}\n      <div\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        <span className=\"align-text-top text-transparent\">{text}</span>\n        {(suggestion || suggestionProp) && (\n          <span className=\"text-neutral ml-3 align-text-top\">\n            {suggestionProp ?? suggestion}\n          </span>\n        )}\n      </div>\n      {/*\n        --- Actual editable textarea ---\n        Must share the same styling (font size, line-height, etc.) so\n        text lines up exactly underneath the background layer.\n      */}\n      <AutoSizedTextArea\n        {...props}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          // If user presses Tab and we have a suggestion, accept it\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useState","useEffect","useAutocomplete","useConfiguration","jsxs","jsx","AutoSizedTextArea"],"mappings":"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"}
+{"version":3,"file":"AutocompleteTextArea.cjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\n\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\n\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const placeholderRef = useRef<HTMLSpanElement>(null);\n  const ghostLayerRef = useRef<HTMLDivElement>(null);\n  const [suggestionPosition, setSuggestionPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n  const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n  // Only update this “debouncedText” after the user stops typing for 200ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const cursor =\n          textareaRef.current?.selectionStart ?? debouncedText.length;\n        const before = debouncedText.slice(0, cursor);\n        const after = debouncedText.slice(cursor);\n        const numLines = 5;\n        const beforeLines = before.split('\\n');\n        const contextBeforeLines = beforeLines.slice(\n          Math.max(0, beforeLines.length - numLines - 1),\n          -1\n        );\n        const contextBefore = contextBeforeLines.join('\\n');\n        const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n        const afterLines = after.split('\\n');\n        const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n        const response = await autocomplete({\n          text: before,\n          contextBefore,\n          currentLine,\n          contextAfter,\n          aiOptions: {\n            apiKey: configuration.editor.openAiApiKey,\n            model: configuration.editor.openAiApiModel,\n            temperature: configuration.editor.openAiApiTemperature,\n          },\n        });\n        const autocompletion = response?.data?.autocompletion ?? '';\n\n        setSuggestion(autocompletion);\n        setCursorAtFetch(cursor);\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive, autocomplete, configuration]);\n\n  useEffect(() => {\n    if (\n      !suggestion ||\n      cursorAtFetch === -1 ||\n      !placeholderRef.current ||\n      !ghostLayerRef.current\n    ) {\n      setSuggestionPosition(null);\n      return;\n    }\n\n    const rect = placeholderRef.current.getBoundingClientRect();\n    const parentRect = ghostLayerRef.current.getBoundingClientRect();\n    setSuggestionPosition({\n      left: rect.left - parentRect.left,\n      top: rect.top - parentRect.top,\n    });\n  }, [suggestion, cursorAtFetch, text]);\n\n  const acceptSuggestion = () => {\n    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n    if (currentCursor !== cursorAtFetch) return;\n    const newText =\n      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n    setText(newText);\n    setSuggestion('');\n    setCursorAtFetch(-1);\n    setTimeout(() => {\n      textareaRef.current?.focus();\n      const newCursorPos = currentCursor + suggestion.length;\n      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n    }, 0);\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={ghostLayerRef}\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        {suggestion && cursorAtFetch !== -1 ? (\n          <>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(0, cursorAtFetch)}\n            </span>\n            <span\n              ref={placeholderRef}\n              style={{ visibility: 'hidden' }}\n              aria-hidden=\"true\"\n            >\n              {suggestion}\n            </span>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(cursorAtFetch)}\n            </span>\n          </>\n        ) : (\n          <span className=\"align-text-top text-transparent\">{text}</span>\n        )}\n        {suggestionProp && (\n          <span className=\"text-neutral align-text-top\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none text-neutral whitespace-pre-wrap break-words text-base leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n          style={{\n            position: 'absolute',\n            left: suggestionPosition.left,\n            top: suggestionPosition.top,\n          }}\n        >\n          {suggestion}\n        </div>\n      )}\n      <AutoSizedTextArea\n        {...props}\n        ref={textareaRef}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          setSuggestion('');\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n        onSelect={(e) => {\n          if (\n            suggestion &&\n            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n          ) {\n            setSuggestion('');\n            setCursorAtFetch(-1);\n          }\n          props.onSelect?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useState","useEffect","useAutocomplete","useConfiguration","useRef","jsxs","Fragment","jsx","AutoSizedTextArea"],"mappings":"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"}

package/dist/components/TextArea/AutocompleteTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAErD,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,CAazD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0G9D,CAAC"}
+{"version":3,"file":"AutocompleteTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAE7D,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,CAazD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAyL9D,CAAC"}

package/dist/components/TextArea/AutocompleteTextArea.mjs

@@ -1,9 +1,11 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useConfiguration } from "@intlayer/editor-react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useAutocomplete } from "../../hooks/intlayerAPIHooks.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
+import "@intlayer/api";
+import "@intlayer/config/built";
 import "deepmerge";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
@@ -28,6 +30,11 @@ const AutoCompleteTextarea = ({
   const [isTyped, setIsTyped] = useState(false);
   const [text, setText] = useState(defaultValue);
   const [suggestion, setSuggestion] = useState("");
+  const textareaRef = useRef(null);
+  const placeholderRef = useRef(null);
+  const ghostLayerRef = useRef(null);
+  const [suggestionPosition, setSuggestionPosition] = useState(null);
+  const [cursorAtFetch, setCursorAtFetch] = useState(-1);
   const debouncedText = useDebounce(text, 200);
   useEffect(() => {
     if (typeof props.value === "undefined") return;
@@ -38,18 +45,33 @@ const AutoCompleteTextarea = ({
     if (!isTyped) return;
     const fetchSuggestion = async () => {
       try {
+        const cursor = textareaRef.current?.selectionStart ?? debouncedText.length;
+        const before = debouncedText.slice(0, cursor);
+        const after = debouncedText.slice(cursor);
+        const numLines = 5;
+        const beforeLines = before.split("\n");
+        const contextBeforeLines = beforeLines.slice(
+          Math.max(0, beforeLines.length - numLines - 1),
+          -1
+        );
+        const contextBefore = contextBeforeLines.join("\n");
+        const currentLine = beforeLines[beforeLines.length - 1] ?? "";
+        const afterLines = after.split("\n");
+        const contextAfter = afterLines.slice(1, numLines + 1).join("\n");
         const response = await autocomplete({
-          text: debouncedText,
-          openAiApiKey: configuration.editor.openAiApiKey,
-          model: configuration.editor.openAiApiModel,
-          temperature: configuration.editor.openAiApiTemperature
+          text: before,
+          contextBefore,
+          currentLine,
+          contextAfter,
+          aiOptions: {
+            apiKey: configuration.editor.openAiApiKey,
+            model: configuration.editor.openAiApiModel,
+            temperature: configuration.editor.openAiApiTemperature
+          }
         });
         const autocompletion = response?.data?.autocompletion ?? "";
-        if (autocompletion.startsWith(debouncedText)) {
-          const remaining = autocompletion.slice(debouncedText.length);
-          return setSuggestion(remaining);
-        }
-        return setSuggestion(autocompletion);
+        setSuggestion(autocompletion);
+        setCursorAtFetch(cursor);
       } catch (err) {
         console.error("Autocomplete error:", err);
       }
@@ -60,31 +82,79 @@ const AutoCompleteTextarea = ({
     } else {
       setSuggestion("");
     }
-  }, [debouncedText, isActive]);
+  }, [debouncedText, isActive, autocomplete, configuration]);
+  useEffect(() => {
+    if (!suggestion || cursorAtFetch === -1 || !placeholderRef.current || !ghostLayerRef.current) {
+      setSuggestionPosition(null);
+      return;
+    }
+    const rect = placeholderRef.current.getBoundingClientRect();
+    const parentRect = ghostLayerRef.current.getBoundingClientRect();
+    setSuggestionPosition({
+      left: rect.left - parentRect.left,
+      top: rect.top - parentRect.top
+    });
+  }, [suggestion, cursorAtFetch, text]);
   const acceptSuggestion = () => {
-    setText((prevText) => prevText + suggestion);
+    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
+    if (currentCursor !== cursorAtFetch) return;
+    const newText = text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);
+    setText(newText);
     setSuggestion("");
+    setCursorAtFetch(-1);
+    setTimeout(() => {
+      textareaRef.current?.focus();
+      const newCursorPos = currentCursor + suggestion.length;
+      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
   };
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: ghostLayerRef,
         className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsx("span", { className: "align-text-top text-transparent", children: text }),
-          (suggestion || suggestionProp) && /* @__PURE__ */ jsx("span", { className: "text-neutral ml-3 align-text-top", children: suggestionProp ?? suggestion })
+          suggestion && cursorAtFetch !== -1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "align-text-top text-transparent", children: text.slice(0, cursorAtFetch) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                ref: placeholderRef,
+                style: { visibility: "hidden" },
+                "aria-hidden": "true",
+                children: suggestion
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "align-text-top text-transparent", children: text.slice(cursorAtFetch) })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "align-text-top text-transparent", children: text }),
+          suggestionProp && /* @__PURE__ */ jsx("span", { className: "text-neutral align-text-top", children: suggestionProp })
         ]
       }
     ),
+    suggestion && suggestionPosition && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none text-neutral whitespace-pre-wrap break-words text-base leading-[1.45rem] md:text-sm md:leading-[1.23rem]",
+        style: {
+          position: "absolute",
+          left: suggestionPosition.left,
+          top: suggestionPosition.top
+        },
+        children: suggestion
+      }
+    ),
     /* @__PURE__ */ jsx(
       AutoSizedTextArea,
       {
         ...props,
+        ref: textareaRef,
         value: text,
         onChange: (e) => {
           setIsTyped(true);
           setText(e.target.value);
+          setSuggestion("");
           props.onChange?.(e);
         },
         onKeyDown: (e) => {
@@ -93,6 +163,13 @@ const AutoCompleteTextarea = ({
             acceptSuggestion();
           }
           props.onKeyDown?.(e);
+        },
+        onSelect: (e) => {
+          if (suggestion && e.target.selectionStart !== cursorAtFetch) {
+            setSuggestion("");
+            setCursorAtFetch(-1);
+          }
+          props.onSelect?.(e);
         }
       }
     )

package/dist/components/TextArea/AutocompleteTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.mjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useState, useEffect } from 'react';\nimport { useAutocomplete } from '../../hooks';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\n\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\n\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n\n  // Only update this “debouncedText” after the user stops typing for 500ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const response = await autocomplete({\n          text: debouncedText,\n          openAiApiKey: configuration.editor.openAiApiKey,\n          model: configuration.editor.openAiApiModel,\n          temperature: configuration.editor.openAiApiTemperature,\n        });\n        // e.g. response.data.autocompletion = \"Hello World\"\n        const autocompletion = response?.data?.autocompletion ?? '';\n\n        // If the suggested text starts with what the user typed,\n        // we only store the *remaining* part as the suggestion\n        // so that we can render \"ghost\" text appropriately.\n        if (autocompletion.startsWith(debouncedText)) {\n          const remaining = autocompletion.slice(debouncedText.length);\n          return setSuggestion(remaining);\n        }\n\n        return setSuggestion(autocompletion);\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive]);\n\n  const acceptSuggestion = () => {\n    // Merge the typed text with the suggestion\n    setText((prevText) => prevText + suggestion);\n    setSuggestion('');\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      {/*\n        --- Background/Ghost layer ---\n        Mirrors user's typed text and shows suggestion as ghosted/gray\n      */}\n      <div\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        <span className=\"align-text-top text-transparent\">{text}</span>\n        {(suggestion || suggestionProp) && (\n          <span className=\"text-neutral ml-3 align-text-top\">\n            {suggestionProp ?? suggestion}\n          </span>\n        )}\n      </div>\n      {/*\n        --- Actual editable textarea ---\n        Must share the same styling (font size, line-height, etc.) so\n        text lines up exactly underneath the background layer.\n      */}\n      <AutoSizedTextArea\n        {...props}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          // If user presses Tab and we have a suggestion, accept it\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUa,MAAA,cAAc,CAAK,OAAU,UAAqB;AAC7D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAY,KAAK;AAE7D,YAAU,MAAM;AACR,UAAA,QAAQ,WAAW,MAAM;AAC7B,wBAAkB,KAAK;AAAA,OACtB,KAAK;AAGD,WAAA,MAAM,aAAa,KAAK;AAAA,EAAA,GAC9B,CAAC,OAAO,KAAK,CAAC;AAEV,SAAA;AACT;AAOO,MAAM,uBAAsD,CAAC;AAAA,EAClE,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAC7D,QAAA,EAAE,aAAa,IAAI,gBAAgB;AACzC,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,YAAY;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAGzC,QAAA,gBAAgB,YAAY,MAAM,GAAG;AAE3C,YAAU,MAAM;AACV,QAAA,OAAO,MAAM,UAAU,YAAa;AACxC,YAAQ,YAAY;AAAA,KACnB,CAAC,MAAM,OAAO,MAAM,YAAY,CAAC;AAEpC,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,QAAI,CAAC,QAAS;AAEd,UAAM,kBAAkB,YAAY;AAC9B,UAAA;AACI,cAAA,WAAW,MAAM,aAAa;AAAA,UAClC,MAAM;AAAA,UACN,cAAc,cAAc,OAAO;AAAA,UACnC,OAAO,cAAc,OAAO;AAAA,UAC5B,aAAa,cAAc,OAAO;AAAA,QAAA,CACnC;AAEK,cAAA,iBAAiB,UAAU,MAAM,kBAAkB;AAKrD,YAAA,eAAe,WAAW,aAAa,GAAG;AAC5C,gBAAM,YAAY,eAAe,MAAM,cAAc,MAAM;AAC3D,iBAAO,cAAc,SAAS;AAAA,QAAA;AAGhC,eAAO,cAAc,cAAc;AAAA,eAC5B,KAAK;AACJ,gBAAA,MAAM,uBAAuB,GAAG;AAAA,MAAA;AAAA,IAE5C;AAEI,QAAA,cAAc,SAAS,GAAG;AAE5B,oBAAc,EAAE;AACA,sBAAA;AAAA,IAAA,OACX;AAEL,oBAAc,EAAE;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,mBAAmB,MAAM;AAErB,YAAA,CAAC,aAAa,WAAW,UAAU;AAC3C,kBAAc,EAAE;AAAA,EAClB;AAGE,SAAA,qBAAC,OAAI,EAAA,WAAU,mBAKb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA;AAAA,UAAC,oBAAA,QAAA,EAAK,WAAU,mCAAmC,UAAK,MAAA;AAAA,WACtD,cAAc,mBACd,oBAAC,UAAK,WAAU,oCACb,4BAAkB,WACrB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IAMA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,qBAAW,IAAI;AACP,kBAAA,EAAE,OAAO,KAAK;AACtB,gBAAM,WAAW,CAAC;AAAA,QACpB;AAAA,QACA,WAAW,CAAC,MAAM;AAEZ,cAAA,EAAE,QAAQ,SAAS,YAAY;AACjC,cAAE,eAAe;AACA,6BAAA;AAAA,UAAA;AAEnB,gBAAM,YAAY,CAAC;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"AutocompleteTextArea.mjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\n\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\n\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const placeholderRef = useRef<HTMLSpanElement>(null);\n  const ghostLayerRef = useRef<HTMLDivElement>(null);\n  const [suggestionPosition, setSuggestionPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n  const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n  // Only update this “debouncedText” after the user stops typing for 200ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const cursor =\n          textareaRef.current?.selectionStart ?? debouncedText.length;\n        const before = debouncedText.slice(0, cursor);\n        const after = debouncedText.slice(cursor);\n        const numLines = 5;\n        const beforeLines = before.split('\\n');\n        const contextBeforeLines = beforeLines.slice(\n          Math.max(0, beforeLines.length - numLines - 1),\n          -1\n        );\n        const contextBefore = contextBeforeLines.join('\\n');\n        const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n        const afterLines = after.split('\\n');\n        const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n        const response = await autocomplete({\n          text: before,\n          contextBefore,\n          currentLine,\n          contextAfter,\n          aiOptions: {\n            apiKey: configuration.editor.openAiApiKey,\n            model: configuration.editor.openAiApiModel,\n            temperature: configuration.editor.openAiApiTemperature,\n          },\n        });\n        const autocompletion = response?.data?.autocompletion ?? '';\n\n        setSuggestion(autocompletion);\n        setCursorAtFetch(cursor);\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive, autocomplete, configuration]);\n\n  useEffect(() => {\n    if (\n      !suggestion ||\n      cursorAtFetch === -1 ||\n      !placeholderRef.current ||\n      !ghostLayerRef.current\n    ) {\n      setSuggestionPosition(null);\n      return;\n    }\n\n    const rect = placeholderRef.current.getBoundingClientRect();\n    const parentRect = ghostLayerRef.current.getBoundingClientRect();\n    setSuggestionPosition({\n      left: rect.left - parentRect.left,\n      top: rect.top - parentRect.top,\n    });\n  }, [suggestion, cursorAtFetch, text]);\n\n  const acceptSuggestion = () => {\n    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n    if (currentCursor !== cursorAtFetch) return;\n    const newText =\n      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n    setText(newText);\n    setSuggestion('');\n    setCursorAtFetch(-1);\n    setTimeout(() => {\n      textareaRef.current?.focus();\n      const newCursorPos = currentCursor + suggestion.length;\n      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n    }, 0);\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={ghostLayerRef}\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        {suggestion && cursorAtFetch !== -1 ? (\n          <>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(0, cursorAtFetch)}\n            </span>\n            <span\n              ref={placeholderRef}\n              style={{ visibility: 'hidden' }}\n              aria-hidden=\"true\"\n            >\n              {suggestion}\n            </span>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(cursorAtFetch)}\n            </span>\n          </>\n        ) : (\n          <span className=\"align-text-top text-transparent\">{text}</span>\n        )}\n        {suggestionProp && (\n          <span className=\"text-neutral align-text-top\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none text-neutral whitespace-pre-wrap break-words text-base leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n          style={{\n            position: 'absolute',\n            left: suggestionPosition.left,\n            top: suggestionPosition.top,\n          }}\n        >\n          {suggestion}\n        </div>\n      )}\n      <AutoSizedTextArea\n        {...props}\n        ref={textareaRef}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          setSuggestion('');\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n        onSelect={(e) => {\n          if (\n            suggestion &&\n            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n          ) {\n            setSuggestion('');\n            setCursorAtFetch(-1);\n          }\n          props.onSelect?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}